Understanding D3.js


  1. Foreward
  2. In the Fall of 2014 I started a project with a book publisher. The concept was to teach D3.js with text and interactive labs. That project was never finished (I dropped the ball). It seems like a waste for the unpublished material to not get any use. So I'm hosting it here for free. I hope you find it useful.

  3. Why D3?
  4. In the age of infographics, Big Data, and finally just data, we want to embed data into web pages. We want to communicate our data over the web and we want to do it exactly customized to our specific needs. D3.js excels at these tasks. While there are other great tools for visualizing data (Excel, gnuplot, Tableau), D3.js is great for the combination of free, sharable on the web, and exactly customized to your needs. On the flip side, it is a poor choice for data analysis and for when your needs are the same as everyone elses.

  5. How to use this website
  6. The concept is that this will teach you D3.js from scratch by coding up things in D3.js. Each page/chapter/exercise contains explanation and a live-coding section at the bottom. The live coding lets you program with D3.js and immediatly see the results. I think you'll get the most benefit from doing the exercises and maybe even customizing them to your whims.

    Also, please bear with the fact that this is unfinished and may be broken in places or "TODO".

    Lab 0: Prerequisites

  1. Why talk about SVG?
  2. Introducing SVG with circles
  3. SVG and CSS
  4. SVG lines and rectangles
  5. SVG text
  6. SVG groups and transforms
  7. SVG paths
  8. Lab 1: Basic D3.js

  9. Including d3.js
  10. D3 selections
  11. D3 Method Chaining
  12. D3 data
  13. D3 data updates
  14. D3 attr(), style(), and classed()
  15. Hierarchy in Selections and Data
  16. Lab 2: Data

  17. Types of Data
  18. Load CSV
  19. Load JSON
  20. Filtering and Transforming
  21. Sorting
  22. Grouping
  23. Scaling Data
  24. Other Scales
  25. Handling Dates
  26. Lab 3: Basic Charting

  27. Layout
  28. Axes