A Tutorial on D3.js Joins

D3.js Logo

While there are a variety of Javascript libraries available for creating visualizations, the most widely used is D3.js.

D3 stands for Data-Driven Documents, and at the core of D3 is a programming model in which users join data elements to document elements.  These are often SVG elements, but D3 can really be used for any kind of data-driven DOM manipulation.  I instruct my students on the basics of D3.js as part of the Visual Analytics course which I teach every fall.

One of the core concepts within the D3 programming model is the join, and Mike Bostock (the creator of D3.js) has a nice writeup on how joins work.  I ask students to review this writeup, but I still get plenty of questions about both (1) the basics of how joins work and (2) more advanced concepts like key functions.

I put together an online tutorial to help explain some of these ideas to my students, and I’ve now posted it to the web for access by the general public.  You can access my D3js Join Tutorial by clicking here.