I wanted to learn data visualization for a long time. Indeed, being able to communicate results in clear and aesthetic manner is crucial for scientists. Results that cannot be communicated simply do not exist!
The D3.js javascript library, mainly developed by Mike Bostock during his Ph.D. at Stanford Visualization Group, appeared in the early 2010 and quickly became a reference tool for data visualization (refered as data viz by hipsters). D3.js produces interactive and aesthetically very pleasing charts. On top of that, it is said to be relatively easy to use. These was enough elements for motivating me to learn it.
Where to start?
This post is not designed as a tutorial for D3.js but I rather want to briefly describe my learning curve, starting from (almost) scratch, up to my first data viz. There are plenty of excellent tutorials out there, I especially recommend Scott Muray’s tutorial as well as the Dashing D3.js website
As mentioned above, D3.js is a javascript library primarily created for web design. As a physicist, I was not skilled in javascript, which, I must say, was an additional difficulty when learning D3.js.
My objective was to implement a data viz displaying geographical data in an interactive manner. Obviously, it makes sense to choose a map as the support for the data. After few minutes on Google, I ended up with a dataset representing the production of wine in France for each department (French departments are the equivalent of UK counties). Since I am a wine lover, I think this is a wonderful topic for my first data viz!
1) Get the French department’s data
Geographical data can be easily manipulated in D3.js with the geoJson and topoJson format.
Original dataset are freely available online on the IGN website. However, data cannot be directly downloaded in a D3.js’friendly format and needs to be first converted to geo- or topoJson. Hopefully, I found another tutorial where the department’s data were ready to use. This website, created by data scientists based in Paris, was of invaluable help for me. The map presented below is closely inspired by their work. I am really grateful to these persons; they were extremely helpful and always ready to answer questions.
2) Link the wine production data to each department
D3.js offers the possibility to colour departments according to the value of the wine production. To do so, we just need to link the wine production to each department by using a common key. Then, we associate a colour that scales with the wine production (the darker is the region, the more wine is produced). Finally, a tooltip was added to display the exact wine production when the mouse’s pointer goes over the location of the department.
The results are presented below. Santé!
