Lessons

lesson

Lastly, we add a tooltip to our timeline. We talk about how to add a listener rectangle, d3.leastIndex(), and how to add a dot to mark our place.

Amelia Wattenberger

lesson

We add a tooltip to our scatter plot. Along the way, we learn about d3.timeFormat and learn a great trick for making our tooltips feel smoother, using voronoi.

Amelia Wattenberger

lesson

We add a tooltip to our histogram. This involves creating a tooltip, updating its contents to show information about the hovered bar, and moving above the hovered bar.

Amelia Wattenberger

lesson

We learn how to add interaction event listeners using our d3 selection objects, then run through a concrete example.

Amelia Wattenberger

lesson

Let's start talking about adding interactions to our charts!

Amelia Wattenberger

lesson

We talk through a more complex example: animating our line chart when it gets new data. This is trickier than it might seem at first!

Amelia Wattenberger

lesson

We learn about d3.transition, and talk about when we would use it instead of CSS transitions. We then update our histogram to animate using d3.transition.

Amelia Wattenberger

lesson

We add CSS transitions to our histogram, animating changes as the bars change.

Amelia Wattenberger

lesson

We learn about CSS transitions and the different CSS transition properties, then run through a concrete example and look at how to debug them.

Amelia Wattenberger

lesson

We talk about the different ways we can animate changes in our charts, and rule out SVG <animate>.

Amelia Wattenberger

lesson

This is a great lesson, and one that's hard to find good content on. We talk about the ways to make our charts accessible to screen readers, and walk through changing our histogram.

Amelia Wattenberger

lesson

We talk about how to generalize our code, and change it so that we draw multiple histograms for different metrics.

Amelia Wattenberger