A very complicated simple range plot

This week, we look at one more of the most innovative charts of 2018, before finally leaving the past year behind us. The chart below might seem familiar. Like the chart we looked at one month ago, it’s a scatterplot turned crazy, it was published on The Times website, and its even by the same chart creator: Interactive Journalist Ryan Watts.

Ryan builds mind-blowing charts out of the Datawrapper scatterplot. Make sure to hover over the chart and click “Edit this chart” to have a look at the data structure and the custom lines he added. Indeed, he wants you to steal from his chart; as he explains as a response to my question about how he created this chart:

Fortunately it was fairly simple [to create the data structure for this chart] in Google Sheets. Each row is a point and each point needed a line so I went back to the data and worked out the coordinates for the first one and then copied them down – it was just a lot of concatenating. Making a shape with the “custom area” feature in Datawrapper just requires four pairs of coordinates, separated by commas, and is ordered from the bottom left to the bottom right moving clockwise. I often return to this chart to borrow the custom areas, so I would encourage others to do the same if it saves time.

In general, I was surprised that Ryan did all this effort. Datawrapper offers two chart types that would have worked straight forward for this kind of data; arrow plot and range plot. But apparently, there was an extra feature that Ryan needed that only the scatterplot offered:

The knife crime chart came from a reporter asking if we could add a horizontal average line to a column chart to show which police forces were over or under the mark. That last request came quite late in the day, so we had to get a little creative to meet a 4 pm deadline and show the data the way we agreed would be best. In an ideal world, we would have built something similar to the range plot so that the police force labels aren’t hidden behind a hover but this wouldn’t have been possible using the scatter plot and, with a few labels, our improvised Datawrapper solution told the story well.

So how would the chart look like with our arrow plot (and without the average line)? I rebuilt Ryan’s chart to find out:

My version of the chart works slightly better on mobile devices. But Ryan’s chart offers something that I appreciate a lot in all kinds of data visualizations: An overview. All elements are within our view. We can see the whole data “in one screen”.

---

To see more of Ryan’s great Datawrapper skills, have a look at these charts about the most-polluted cities, a comparison of male and female life expectancy and London killings. I’ll see you next week!