lesson

We learn about path SVG elements and how to construct a string for their d attribute.

Amelia Wattenberger

lesson

We learn about scales and create our first ones: our y and x scales.

Amelia Wattenberger

lesson

We create our bounding box, and shift it to respect our margins.

Amelia Wattenberger

lesson

We learn how to create new elements inside of a d3 selection object.

Amelia Wattenberger

lesson

We create our wrapper and learn about d3 selection objects.

Amelia Wattenberger

lesson

To set up our chart environment, we learn why we need two containers: wrapper and bounds.

Amelia Wattenberger

lesson

We learn how to set up our chart - accessor functions are crucial for easy changes, documentation, and framing.

Amelia Wattenberger

lesson

First things first, we learn how to load our dataset and look at the structure.

Amelia Wattenberger

lesson

We dig in right away, starting with a timeline of temperature over time. First, we need to get our bearings.

Amelia Wattenberger

lesson

We are introduced to React.js and learn a basic principle for combining d3 + React.

Amelia Wattenberger

lesson

Onto our last step: adding interactions! The tooltip we'll build will be unlike any you've seen before - it will follow the mouse all the way around our chart, highlight the relevant data elements, and describe the weather for that hovered date.

Amelia Wattenberger

lesson

We'll add annotations to our chart to tell our viewer what the different parts of the chart are showing. To do this, we'll create a generic function, since there are so many things to label.

Amelia Wattenberger