Adding live data visualisations

In a number of jobs I've had, displaying data visualisations that use editable data sources has been a challenge. Often the web team has ended up having to embed images of data visualisations. This is clunky and difficult for editors to change.

In this tutorial, we'll use Angular's D3 library to generate some data visualisation components, and we'll set up Contentful components in the back end to allows editors to add them as part of their document flow, and use real data to generate them.

Later we'll look at using Google Sheets as live data APIs, but for now we'll stick to JSON managed in the component.

What data should we use?

It's difficult to think of any data that's not controversial these days. Whether it's fishing quotas, voter turnout or crowd sizes, everything's got a political slant. I thought to start with it might be better to avoid controversy, so I dug around on data.gov.uk until I found a nice manageable data set about how often people visit different types of parks. The types of visits are to countryside parks, town parks or both, and they've over the last 11 years. You can click on the keys to show or hide the data for each type of visit.

These really are the kinds of insights you just wouldn't get elsewhere...