Learn D3

https://observablehq.com/collection/@d3/learn-d3

This tutorial seems rather heavily tied to Observable, so I didn’t really get a feel for what D3 is like to use directly. It also requires some existing knowledge of SVG.


Scales

Of all D3’s tools for data graphics, the most fundamental is the scale, which maps an abstract dimension of data to a visual variable.

Each scale is configured by pairwise correspondences from abstract data (the domain) to visual variable (the range). For example, the x-domain’s lower value (0) is mapped to x-range’s lower value (the chart’s left edge), while the domain’s upper value (the maximum count) is mapped to the range’s upper value (the right edge).

For a linear scale, the domain and range are continuous intervals (from min to max). For a band scale, the domain is an array of discrete values (🍊, 🍇, 🍏, …) while the range is a continuous interval; the band scale automatically determines how to slice the range into discrete, padded bands.

Shapes

  • d3.line
  • d3.area
  • d3.arc

Animation

Tweening is a key process in all types of animation, including computer animation. It is the process of generating intermediate frames between two images, called key frames, to give the appearance that the first image evolves smoothly into the second image.

D3 provides interpolators. The most generic of these, d3.interpolate, accepts numbers, colors, strings-of-numbers, and even arrays and objects. Given a start and end value, d3.interpolate returns a function that takes a time 0 ≤ t ≤ 1 and returns the corresponding inbetween value.

Joins

D3’s data join lets you specify exactly what happens to the DOM as data changes. This makes it fast—you can minimize DOM operations—and expressive—you can animate enter, update and exit separately.

Edit