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.
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)
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.
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
Inserting a full sized chart in the sheet.
This will embed a full sized image as below.
Removing an inserted image
Preview Chart appearance
then by value
- The pad angle is the spacing between nodes. Here’s a diagram with node spacing of 0.
Hovering over a link or a node will reveal some data. The tooltip format is not configurable.
The preview diagram is interactive. Hovering over a node will hide all but its links
- 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.
In an open document, you can select some different setting by using the Apply settings dialog
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.
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