Articles in category: d3js

Visualising Amsterdam’s cyclists

6 April 2019 - Bike City Amsterdam, a new book by Fred Feddes and Marjolein de Lange, recounts how Amsterdam developed a cycling policy (more on the book below). An important source for the book is the archive of the Amsterdam branch of cyclists’ organisation Fietsersbond. In addition, traffic data was used to analyse trends.

Using a jagged baseline to indicate a broken y-axis

31 March 2019 - In an article for the recently created Data Visualisation Society, R.J. Andrews suggests using a jagged baseline to indicate a broken y-axis (i.e., an axis that doesn’t start at zero). The idea - inspired by some beautiful charts dating back to WWI - is to suggest that the bottom part of the chart has been torn off. I like the idea - but I found it isn’t easy to implement.

How to make a d3js force layout stay within the chart area - even with multiple components

21 September 2017 - For a post on analysing networks of corporate control, I wanted to create some network graphs with d3.js. The new edition of Scott Murray’s great book on d3.js, which is updated to version 4, contains a good example to get you started. However, I was still struggling with some practical issues, as the chart below illustrates (reload the page to see the problem develop).

Embedding D3.js charts in a responsive website - a better solution

30 December 2017 - I often use D3.js to create charts which I embed on my website (the chart below is included merely as an illustration; it was copied from here). Normally you set the width and height of the embedded page in the embed code, but with a responsive layout it’s not so simple. The challenge is to adapt the iframe width to varying screen sizes and change the height so that the chart still fits.

Datawrapper’s policy on bad graphs

23 October 2016 - Datawrapper is a tool that lets you turn a dataset into a decent-looking chart within minutes. In an interview, co-founder Mirko Lorenz said Datawrapper is designed to prevent people making misleading graphs: