D3 & Me

After not touching D3.js for a long time, I recently started using it again at work. Typically, I use Python—and Matplotlib—for visualization, but nothing beats using SVG and easily adding interactivity. If you’ve never heard of D3, the little intro snippet on the website sums it up well:

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.

Basically, select your data and use your favorite web technologies (SVG, CSS, and HTML) to make something cool.

I used Scott Murray’s D3 tutorial as a quick refresher, and made a bar chart using English Premier League soccer data.1 (Hit Animate Bars and watch what happens.)

See the Pen D3 & Me by Tom (@meagherco) on CodePen.

Mmmmmm, what a tasty transition. (No shame in hitting animate again.)

The chart could be improved further: making it responsive, displaying information on selection/mouseover, etc. Feel free to take a look at the code on CodePen.


Notes

  1. Scott also wrote a book, Interactive Data Visualization for the Web, which is free to read online


Once-A-Month Thoughts Join 30+ subscribers