Over the new year I decided to work on my D3.js skills (rather than do the actual work that I probably should’ve done) by submitting an entry to the World Data Visualization competition.
The interactive version of the fruits of my labour can be found by clicking here. Below is a static screenshot.
Essentially, the first screen shows each country’s happiness score (and are colored accordingly using the viridis color palette). When you hover over a bubble, it reveals which country each bubble belongs to. If you click on a variable name, the position of each bubble is jiggled to its new ranking according to the variable selected.
When I began to create this visualization, I had a picture in my head of a plot that a lot of Google searching lead me to realize was called a “beeswarm plot”, which is essentially a jittered one-dimensional scatterplot where the points are kind of “glued” together.
The main thing I struggled with when creating this visualization was realizing that forces in D3 are inherently different from transitions when I was implementing the buttons. But once I wrapped my head around these different types of “simulations”, a lot of things magically started falling into place.
Most of all, I learnt a huge amount from the process and am really proud of my second-ever D3 project!