Infographic with D3.js – Het Parool, Prestaties 4G

Infographic with D3.js – Het Parool, Prestaties 4G

A good friend of mine, the talented Jorris Verboon is the infographics guy at Amsterdam newspaper Het Parool. We decided to experiment with one of his infographics, originally made for print, and add some interactivity with D3.js.

The infographic

The infographic shows the huge differences in up- and download speed over the new 4G network in Amsterdam. For example in the Ten Katestraat, the measured download speed was 61.71 mbps, while in the nearby Amstelveenseweg the downloadspeed was 1.71 mbps.

Het Parool - Prestaties 4G tooltip
By clicking on a location a tooltip with more precise information appears.

D3.js & Require.js

I exported the background as SVG with Inkscape, this SVG is loaded and used to add the layers of interactivity. The data I put in a JSON file which is loaded and manipulated with D3.js. For this I wrote a few modules & some helper functions. These are connected with Require.js.

The goods

Now we are waiting for the infographic to be used on the site of Het Parool. For the moment, you can see the results by clicking the link below.

Interactive infographic: “Prestaties 4G”.