Decoding D3.js programming

I just wanted to write a quick post showing a relatively simple example of importing and visualizing data stored in JSON format. I’m using shot location data from a basketball game between the Golden State Warriors and Denver Nuggets that took place recently. I wrote a Ruby scraper which pulls the shot data from ESPN (using the Nokogiri gem), and simply pipes it to a JSON data file (using the json gem).

I’m trying to learn how to use the different layouts in D3, so I can start making more sophisticated visualizations. The force layout lets you specify an array of nodes and links between those nodes, and the nature of the physical interaction between the nodes. I realized a few hours into playing around with it, that this could be a great toolbox for visualizing chemical structures. I’ll show you how in this post.

Let’s make a chart! I’m going to try to replicate a chart from Golden State of Mind where we were voting on players for a NBA draft board (fear not, you won’t have to know what the heck that means to follow along here).

To begin to use d3 effectively, I realize I need to have a very good grasp of how data joins work. The idea of the “data join” is essentially what it sounds like: the act of joining (or binding) data to DOM elements. Here I’ll demonstrate a few things I’ve picked up so far.

These are my first baby steps in D3, a new(ish) JavaScript library that was developed by Mike Bostock (i.e. a data science guru) for creating data visualizations. In fact, D3 stands for “Data Driven Documents”, and as the name suggests, it’s really a general purpose framework for doing pretty much anything one could want to do with data these days.