Chord Snip

.  

Important note on my add-ons

I've (reluctantly) decided to stop supporting all my Apps Script add-ons, as I no longer have the time or inclination to put them through the various verification processes and upcoming add-on store process changes.

I'll be removing them all from the store in a couple of months.

I realize that many of you may be using some of them. In order to provide some continuity, since they are open source, you are welcome to make your own copy and use them how you wish. Any developers who want to repackage and republish are also welcome to do so.

Here's the repos. You'll also find the link to the scripts if you prefer to take a copy of already built scripts.


https://github.com/brucemcpherson/ChordSnip
https://github.com/brucemcpherson/ColorArranger
https://github.com/brucemcpherson/SankeySnip
https://github.com/brucemcpherson/SlidesMerge
https://github.com/brucemcpherson/Dicers

documentation is here. Anyone can republish this, use the videos etc as required.
http://ramblings.mcpher.com/Home/excelquirks/addons/chordsnip
http://ramblings.mcpher.com/Home/excelquirks/addons/sankeyaddon
http://ramblings.mcpher.com/Home/excelquirks/colorfiesta/colorarranger
http://ramblings.mcpher.com/Home/excelquirks/addons/slidesmerge
http://ramblings.mcpher.com/Home/excelquirks/addons/dicers


 
 Chord snip is an add-on for Google Sheets that creates a Chord diagram as you type, gives you the SVG code to embed it in a web site and the ability to embed it in your Sheet. It's available on the Sheets add-on store.

I'll use D3.js version 4 under the hood. 

Introductory video

Here's a video showing the features of Chord Snip 


On starting

Here's the Add-on launching menu item



On initialization, Chord Snip automatically identifies the data on the active sheet and builds a Chord diagram. The sidebar looks like this and shows a preview of the chart you can choose to insert into your sheet.



About Chord diagrams

Actually you'll see the explanation below in the About tab





But here's a quick explanation for those unfamiliar with Chord diagrams.

What is a Chord diagram?

A chord diagram is a visualization of the relationship between data items, usually showing the flow of data between items in a system. The diagram is arranged as connected chords in a circle and can show flows in both directions. Chord Snip is a Google Sheets add-on/Office add-in which maintains a chord diagram preview in the sidebar of the active sheet's data in real time.

Suitable types of data

Chord charts are often used to show flows between places or members of a system (for example journeys to and from places)

Data format

A Chord diagram needs 3 data items, which should be laid out as columns with headers in a sheet.
  • Source. Sending process name
  • Target. Receiving process name
  • Volume. Volume of flow between 'Source' and 'Target'
By default, the source data columns will be automatically detected in the active sheet, but you can customize the column names and range via the Data Settings. Any changes you make to the data will periodically be reflected in the chart preview.

Chart image

You can get a scaled up version of the chart preview by copying the code shown in the Chart settings/embed code area. This will be in SVG format so that you can embed the code or link to the drive file in a web site or document.


It is also possible to insert a static version of the chart in your sheet. The scale and look of the chart is controlled by options in Chart settings.

Source data columns

There are 3 columns of interest for a Chord diagram. Chord snip will try to deduce which columns are which, but you can explicitly set them via the Data settings dialog. The columns section can be used to modify the source data location.





Source data scope

By default all the data in the active sheet is incorporated into the chart. If you select and area of data, and choose selected range from the source data section, the chart will only use data from the selected area.

Test data


If Chord snip detects that there is no suitable data on the current page, you'll get a message like this, and it will even generate a new sheet with some data to play around with if you want.


Inserting a full sized chart in the sheet. 

To embed a chart image in your sheet, select a cell that at which the top left corner of the chart should be positioned, and use Insert.

This will embed a full sized image as below. 



Removing an inserted image


You can manipulate or remove an already inserted image from your sheet with this standard sheets image dialog.



Chart settings 


There are a large number of settings available to change the appearance of both the preview and full sized chart. Let's take a look through them. It should be evident from the images what each setting does.



Preview Chart appearance


This dialog gives access to further settings to change the appearance of various attributes of the chart.

Link appearance

These settings set the appearance of the links between each node.


Color modes

These identify the color scheme approach. There are various to choose from which may be extended over time. These schemes are used to color both the nodes and the links.

 
Ramp position and ramp value will create a color ramp scheme which will be interpolated using either the position of the node, or its total volume to scale the color. The start and finish ramp colors can be specified

Here's an image using these ramp colors, first ramping by position




then by value


Opacity

Opacity is a value beteen 0 and 1 and is the transparency of the color. A lowish value is most effective for this kind of diagram so the crossovers can be more clearly seen. Here's what an opacity of 1 looks like, using the google20 scheme.

Border


Here's the same diagram with the border width set to 0.



Node appearance

The nodes are the chords round the exterior of the circle. They take their fill colors from the link color schemes and opacity. 

The label settings are self explanatory, but here's a few notes on the others.
  • The pad angle is the spacing between nodes. Here's a diagram with node spacing of 0.
  • Thickness of the arc is the difference between the exterior and interior radii of the arcs. Here's a diagram with a larger thickness

  • The items can be sorted according to volume, or left in their natural order.


Tooltips

Hovering over a link or a node will reveal some data. The tooltip format is not configurable.

Interactivity

The preview diagram is interactive. Hovering over a node will hide all but its links



Images embedded in sheets don't have this interactivity, since the are simply images of a diagram.


Scale

These settings are the sizes of the full scale chart that you embed in your sheet with the Insert button.


Some notes on these settings.
  • The width and font size of the desired embedded chart are used to scale other measurements of the original chart such as the angle between nodes. 
  • The image margin is the padding round the image in the embedded image.
  • The image frame fill color is the background color to use for the embedded image frame. 
  • A transparent image frame when embedded could look like this. This is .5 opacity - note the sheet grid lines show through.




Embed code


Chord snip creates SVG code that can be copied directly into a web page's HTML code to embed the chart. Just copy the code in this dialog.






Managing settings

You'll notice that each settings page has an apply and a back button. This allows you to undo any changes you've made while on this settings page.  Apply will be enabled if you have made any.  Any changes made on the page are immediately applied to the chart preview so you can flip over to see what it looks like. To keep them hit Apply, to get abandon them use Back.




In addition, Chord snip has a comprehensive way of making settings permanent so you can re-use them if you have a house or document style you want to follow, or for restoring complete settings as they were at the beginning of the session, or to the default values for the chart.


Save settings

This dialog allows you to retain the current settings so that they will apply each time you open this document, or to every document where you use Chord Snip. Clear these settings will cause Chord snip to revert to it's normal default values in this and other documents.


Reset settings

Chord snip follows this pattern when deciding which settings to use when opening, using the first settings collection that exists.


In an open document, you can select some different setting by using the Apply settings dialog




Data Settings

You can modify the scope of the chart with these settings


Respecting Filters


The add-on now uses SheetsMore to respect data, so the chart will pay attention to the most common types of filters selected in the UI. Since this is a service with a quota, the setting of respect filters is not saved to avoid unnecessary API traffic, so if you want it, you need to set it for your session.


Availability

This add-on is available in the Sheets add-on store

join our community for news of when this add-on is published so you can use it in your own workbooks.

Pro version

All features mentioned here are available in the current Chord Snip version. At some future time, there might be a pro-version with additional capabilities, or a lite version with some  features that might need to be unlocked before they are available. For more information on this join our community

Source code

As usual, the code is open source. You can find it on GitHub.  

Other versions

You may want to check out Sankey Snip which is a similar add-on for creating Sankey flow diagrams. 

Comments