D3 resources

I’ve written quite a few d3 tutorials. This is their home.

Most of these tutorials are based on version 4. They may or may not work with later versions, but they’re usually not version 3 compatible.

There used to be lots of bl.ocks examples, but now d3 seems to have moved to the Observable ecosystem, so the links now are redirected to gists instead, and they’re not interactive, which seems like a shame.

Force graphs

In version 4 of d3, force directed graphs are bundled into the module d3-force. They work quite differently from their version 3 predecessor.

Basics

• force graph basics
• minimal example
• node and link attributes

Forces

• charge forces
• link forces
• positioning forces
• collision forces
• custom forces
• force playground

Examples

• zoomable
• dragable
• sticky nodes
• bounding box
• expanding
• squashed
• drifting
• splitting
• growing, shrinking
• popping

Zooming

Just like force directed graphs, version 4 of D3 separated out zoom behaviour into its own module. These tutorials cover how to use that module.

• understanding SVG transforms
• minimal example
• selective zooming
• combining drag and zoom
• zoomable force graph

Other

These are other things I’ve written on d3 over the years.

• drag and drop, lesson 1
• drag and drop, lesson 2
• start and end event listeners
• using mouse events
• some examples of transition chaining
• using d3 in R notebooks
• a simple scatterplot
• a simple barchart
• a simple linechart