Build: Rides Over Time with Real Axes

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

shared part

A file in src/parts/ that several charts import, such as the axis helpers.

defined()

A d3.line setting that says which points exist. A point that does not exist leaves a gap.

viewBox

An SVG attribute that makes the drawing scale to its box, so width 100% works.

update(data)

The function a chart returns so the page can redraw it with new data.

empty state

What the box shows when there is nothing to draw: a message, not a blank.

1. 1

   Change the tick count

   In rides-line.js change ticks: 5 to ticks: 10 in the leftAxisWithGrid call and nice(5) to nice(10). There are now 10 gridlines (0 to 4,500 in steps of 500) instead of 6. Change only nice(10) and leave ticks: 5: the domain ends at 4,500 but the top label is 4,000, so the line's peak rises above the last gridline.

2. 2

   Drop the 14 August note

   Pass { notes: {} } as the third argument in main.js. The note disappears; the label for screen readers drops the "(app down)" part.

Your lumen-dashboard project after this topic. Click a file to see it in full.

// Axes the charts share. Each function draws into a <g> you place yourself, and can be called again after the scale changed.
import * as d3 from "d3";

/** A bottom axis. ticks: a count or an interval such as d3.utcMonth. format: a function that makes the label text. */
export function bottomAxis(g, scale, { ticks = 8, format } = {}) {
  const axis = d3.axisBottom(scale).ticks(ticks).tickSizeOuter(0);
  if (format) axis.tickFormat(format);
  g.call(axis).attr("font-size", 12); // font-size after the call: the axis sets 10 the first time it draws
  return g;
}

/** A left axis whose ticks run across the plot as pale gridlines. width = the plot's width in pixels. */
export function leftAxisWithGrid(g, scale, { width, ticks = 5, format = d3.format(",") } = {}) {
  g.call(d3.axisLeft(scale).ticks(ticks).tickFormat(format).tickSize(-width))
    .attr("font-size", 12)
    .call((axis) => axis.select(".domain").remove()) // the gridlines are enough
    .call((axis) => axis.selectAll(".tick line").attr("stroke-opacity", 0.15));
  return g;
}

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   Why the dashboard needs this now, and the story's end. Tomás asked why his spreadsheet axis said 0, 730, 1,460 while the dashboard said 0, 1,000, 2,000. Phase 3's line chart had its own copy of the rounding rule (niceTicks) and placed each point by its position in the list, so a row dropped during cleaning would shift every later point and the month ticks. Every new chart would need its own copy. Now one scale picks every number from the dates themselves and one axis draws it, so every chart that uses leftAxisWithGrid shows the same kind of round ticks. Tomás's question has an answer he can repeat: D3 chooses steps of 1, 2 or 5 times a power of ten, so the labels are numbers a person can say.

2. 2

   What it adds. src/parts/axis.js has two functions, bottomAxis and leftAxisWithGrid. src/charts/rides-line.js is rewritten: it takes the rows ({ date, rides }), builds a UTC time scale for x and a linear scale for y, calls the axes, and returns { update(data) }. src/main.js changes by one line: the chart now gets the rows, not a list of numbers, because a time scale needs the dates.

3. 3

   How it plugs in. The loader from Phase 4 still supplies cleaned rows with null for missing days. The chart keeps the Phase 4 behaviour on purpose: defined() leaves a gap for each missing day, a day with no neighbours gets a dot, an empty array shows "No rides to show yet.", and the outage day is still marked.

4. 4

   What the dashboard can do now that it could not before: it picks axis numbers by rule instead of by hand, it ticks months on the first of the month in every viewer's time zone, it has gridlines that stay out of the way, and its chart can be re-drawn with new data by calling update(rows) (Phase 9 animates that).

5. 5

   What is still missing. The line is made by d3.line (Phase 7 explains it and adds the other chart shapes). Hover and tooltips come in Phase 8, motion in Phase 9, the dark-mode theme colours in Phase 10, and accessible tables in Phase 15. The station bars from Phase 5 are still positioned by hand and have no axis: Topic 6.4's band scale and Topic 6.6's axis are the tools for them, and Phase 7 builds the stacked version with them.

6. 6

   Starting point. The Phase 5 dashboard: Phase 4's loader and states, Phase 5's station bars with the month menu, and Phase 3's hand-made line in src/charts/rides-line.js, which this build rewrites with D3.

• ↔

  A chart that returns { update } costs a little more code than one that draws once, and pays back when the data changes (filters, live data, animation).

• My project has src/parts/axis.js and the rewritten rides-line.js.

• The chart shows month names, thousands, gridlines and the 14 August note.

• I tried the empty array and saw the message.

• I can say why the chart needs rows with dates.

• I can say what the dashboard still lacks and which phase adds it.