Opening The Times Dataviz Catalogue

Basile Simon
Dec 5, 2017 · 3 min read

Today, we are happy to share the first version of : a collection of data visualisations created for the Times and Sunday Times, collected together in one place in the hope that what we have learned can be useful to others.

Our goal is to compile and showcase the best of our burgeoning data visualisation work, rather than to offer a taxonomy of visual journalism (the FT’s is a fantastic resource for that).

This collection will also be used internally as a training resource to upskill members of our digital team. From reporters to editors, developers and designers, understanding the correct way to visualise a data set is crucial to enhancing our stories and bringing them to life online.

The catalogue is both a publicly accessible website showing the breadth of our work, and a allowing developers to understand how they are built.

Two audiences?

our work and a resource we intend to grow over time. The website can also be used to SVGs out for additional Illustrator massage — think of it as a hiring tool and a style guide.

We display only one chart per page to keep things clean, and we’re publishing everything so you can clone the code and see a data visualisation’s evolution there too.

README files for each type of chart provide handy details about the data format we have implemented. As a growing number of journalists become proficient with basic data manipulation, we wanted to fulfill this requirement directly.

Frequent practitioners will notice that the code is kept very simple. This is a purposeful decision, and following conventions and habits (particularly around d3.js). In doing so, we aim to make our code more familiar, and hopefully easier to experiment with.

The only notable exception to what remains common in d3 world is the use of ES6. The elegance of arrow functions, the relatively wide cross-browser support, and the broad adoption of tools like to cater for those browsers that don’t fully support ES6 should convince everyone to make the switch.

* d3.extent returns a [min,max] array
* /
var xExtent = d3.extent(dataset, function(d) {
return d.Age;
// in ES6:
const xExtent = d3.extent(dataset, d => d.Age);

As mentioned previously, the whole project is and we intend to continue improving it. You can also check out our and see where we’re headed.

Follow and on Twitter for updates and new things coming to the page.

Digital Times

Stories from the digital team at The Times and Sunday Times

Thanks to Chris Hutchinson.

Basile Simon

Written by

Interactive journalism nerdery @thetimes + data-journalist @airwars + lecturer in Interactive Journalism @cityjournalism

Digital Times

Stories from the digital team at The Times and Sunday Times