Making interactive charts

To start with, here’s a copy of Adam’s wireframe from Chapter 10 made into an interactive wireframe using Figma.

You can drag around to explore the wireframe and also see the pop-overs by clicking on the chart.

You can also see the Figma file behind this here: figma.com/file/bUSX928zNtMLfTio6y4GWg/wireframe?node-id=1%3A2. Figma is a fully featured vector editing tool and has all kinds of features (like reusable components, document styles and simple interaction editing) that all help make wireframes and prototypes.

Interactive wireframes like this are really helpful in testing the interactive elements you are considering and making sure that your user journeys all make sense.

Now, here are some examples of interactive charts made in a variety of free to access online tools.

Datawrapper

Datawrapper is a free online tool which you can find here: datawrapper.de. It specialises in simple charts with basic functionality (rollovers, etc) done well (and they’re done very well - the colour palettes in particular are really well chosen).

It is free to use and does not require any sign up.

Flourish

Flourish is a free to use interactive chart maker that can be found here: flourish.studio. Its built primarily for data journalism and includes a lot of varied chart types, with a wide range of interaction and animation options.

It does, however, require registration and if you publish a chart on a free account your data is made public.

If you click through to the chart on Flourish: public.flourish.studio/visualisation/6907840/, you’ll be able to duplicate it to your own account and examine it in the Flourish interface.

One thing you’ll notice is that the chart on that link looks different to the chart embedded above. In order to set a default state for the chart I had to include it in a ‘story’ where I set the defaults and then embed that story above.

Highcharts

Highcharts is a dedicated javascript charting engine: highcharts.com. It requires knowing a little javascript (and html and css) to use, but they do also have an online chart builder here: editor.highcharts.com. It is available under Creative Commons for non-for-profit projects, but anything requires a paid license.

I’ve been fairly conservative here, only using the built-in options of the chart rather than adding any custom features with html or javascript (like dropdown, etc). The extra options like download, or viewing a data table, are all built in to the Highcharts engine.

You can see the interactive chart on its own here here: communicating-datavis.github.io/book/highcharts.html and the code behind it is available through GitHub here: github.com/communicating-datavis/book.

Of these three, Flourish is probably the happy medium: not as customisable as Highcharts but more fully featured as an interactive than Datawrapper. Its certainly a good place to start if you want to experiment with telling interactive stories.