d3.js tutorial - Infoviz course @UVic

D3-tutorial.md

Getting started with d3.js

Matthieu Foucault (mfoucault@uvic.ca) - Feb, 22, 2018

Useful links

• Examples: https://github.com/d3/d3/wiki/Gallery and https://bl.ocks.org/
• API reference: https://github.com/d3/d3/blob/master/API.md
• Online editor: http://blockbuilder.org/
• More tutorials: https://github.com/d3/d3/wiki/Tutorials
• Books: D3.js in action and Interactive data visualization for the web
• Related: SVG tutorial and Canvas tutorial
• Survey of visualizations: https://idl.cs.washington.edu/files/2012-VisualizationZoo-CACM.pdf

What does D3 do?

1. Makes it easier to manipulate (create, update, delete) HTML and SVG elements
2. Provides a scales modules: really helpful to transform arbitrary scales into pixels.
3. Modules that help with manipulating data (Hierarchies, Forces, Voronoi)

Where to start?

⚠️ There are two main versions of d3.js that are used online (v3 and v4). They are not compatible, so make sure you are using the right one (v4 is preferred)

1. Go to blockbuilder.org and edit existing examples

• Line chart: http://blockbuilder.org/mbostock/3883245
• Scatterplot: http://blockbuilder.org/Jverma/076377dd0125b1a508621441752735fc
• Bar Chart: http://blockbuilder.org/mbostock/3048450
• Force Layout: http://blockbuilder.org/mbostock/6526445e2b44303eebf21da3b6627320 and http://blockbuilder.org/mbostock/ad70335eeef6d167bc36fd3c04378048

2. Look at the API to see all the things d3 can do

Gotchas

• The y axis (with SVG or Canvas) goes from top to bottom, which is why a vertical scale's range will often be [height, 0] instead of [0, height]
• Many d3 functions are factory methods: they return the function that you need to pass your data to. E.g. d3.scaleLinear() returns the scale function.