Flourish chord diagrams

Chord diagrams can be used to visualize relationships and flows. They are both esthetically pleasing and – for the right data – a great way to communicate the data.

We’ve just added chord diagrams to Flourish, so now you can easily make one yourself. All you need to do is upload data and set columns for “from”, “to” and “value”.

Below you can see an example of a Flourish chord diagram in action. It visualizes how often different characters in the sitcom “Friends” speak to each other.

Create your own chord diagram now »

Template features

This template gives you a lot of features for creating your ideal chord diagram. For example, you can:

• Choose a color scheme or enter custom colors.
• Change the color mode of the chords. By default, it uses a gradient color scheme, an idea inspired by the amazing Nadieh Bremer. Alternatively you can color each chord to match its larger or smaller end. You can also use the custom color palette to change the color to anything you want.
• Fine-tune the labels. Put them along the arcs – in which case any overlapping labels are automatically hidden – or rotated 90 degrees. Make them responsive or a fixed size.
• Show a customized popup to give some context and make the direction of the flows more obvious.
• Highlight one or more chords to focus the eye on particular data points.
• Adjust the arc spacing.

As with all Flourish graphics, our chord diagrams are mobile-friendly, and they animate when the data changes.

Try making one now, or read on for more details.

How to make a chord diagram, step by step

• Select the chord diagram template.
• Upload a CSV or Excel file, or just type in your values to the existing data sheet manually.
• Set the three required columns for “from” and “to” (e.g. people or countries) and “value” (a number describing the size of the flow).
• Decide if your data needs two values for each chord or just one (see below).
• Get creative … change the colors, align the labels to your liking, adjust the chords, popups, styles and animations. Also add a header and a footer.
• Once you’re happy with your chord diagram, you’re ready to publish it to the world, download it to host on your own servers or use it in a Flourish story. Premium users can also download it as an SVG image to edit it in a vector graphics tool or drop into a printed report.
• To create an animation as in the example above, make two chord diagrams and combine them in a story.

Directional and non-directional data

Chord diagrams are most commonly directional, which means each chord has two values. For example in the example above the “Chander/Monica” chord has one value for lines spoken by Chandler to Monica and another for lines spoken by Monica to Chandler.

If your data is directional like this, you just need one row for Chandler to Monica and another for Monica to Chandler. If you only add one row, the template will assume that the flow in the other direction is zero. Hence this:

From	To	Count
Chandler	Monica	200

Is the same as this:

From	To	Count
Chandler	Monica	200
Monica	Chandler	0

Sometimes, however, you may want to make a chord diagram for non-directional data – for example how often Chandler and Monica were in the same scene together. To achieve this, simply include both directions in your data and set the value to the same number:

From	To	Count
Chandler	Monica	200
Monica	Chandler	200

You can then update the popups to “non-directional”, which avoids showing the same value twice.

Create your own chord diagram now »