Build: An Interactive Rides Explorer

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

explorer

A dashboard the reader can point at, select in and share, not only look at.

crosshair

A vertical line and a dot that follow the pointer and snap to the nearest day.

live region

An element with aria-live: a screen reader announces its new text.

preset

A button that sets a common selection, such as June, in one press.

1. 1

   Move the crosshair with the keyboard

   In the editor, click the chart once, then press the left arrow. The tooltip walks one day at a time from the last day. Escape closes it.

2. 2

   Press the new last-week button

   In start(), add ["Last 7 days", d3.utcDay.offset(bounds[1], -7), bounds[1]] to the list of presets, put const asDate = (v) => (v instanceof Date ? v : parseIso(v)); above const presets, and change the click handler to selectRange(from ? [asDate(from), asDate(to)] : null). Pressing it prints 25 Dec to 31 Dec: 9,224 rides: the last day of the data is included, because bounds ends one day after it.

3. 3

   Open a hole in the data

   Replace the example's loadDailyReport by one that sets rides to null for 10 to 19 August (rows.map((d) => (d.date >= new Date("2025-08-10") && d.date < new Date("2025-08-20") ? { ...d, rides: null } : d))). The line breaks into two pieces. A pointer over 15 August now hides the tooltip, instead of showing 9 August or 20 August as if it were the day under the pointer, and a pointer at 21 August shows Thu 21 Aug 2025: 2,256 rides. The Summer total drops to 300,308 rides.

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

// A tooltip that stays inside its container. It shows text only (textContent), never markup.
export function createTooltip(container) {
  const element = document.createElement("div");
  element.setAttribute("role", "tooltip");
  element.hidden = true;
  element.style.cssText =
    "position:absolute;left:0;top:0;z-index:2;max-width:220px;padding:6px 8px;border-radius:4px;" +
    "background:#1d2b36;color:#fff;font:12px system-ui,sans-serif;pointer-events:none;overflow-wrap:anywhere";
  container.style.position = "relative";
  container.append(element);
  return {
    element,
    /** Show `text` beside the point (x, y), measured in pixels from the container's top-left corner. */
    show(text, x, y, gap = 12) {
      element.textContent = text;
      element.hidden = false; // a hidden box has no size: show it before measuring
      const box = container.getBoundingClientRect();
      const w = element.offsetWidth, h = element.offsetHeight;
      let left = x + gap, top = y - h - gap;
      if (left + w > box.width) left = x - w - gap; // no room on the right: go left
      if (top < 0) top = y + gap;                    // no room above: go below
      element.style.left = Math.max(0, Math.min(left, box.width - w)) + "px";
      element.style.top = Math.max(0, Math.min(top, box.height - h)) + "px";
    },
    hide() { element.hidden = true; },
  };
}

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

1. 1

   Priya's need is met. She can point at a day on the line and read its date and rides, with a mouse, with a finger in the depot, or with the left and right arrow keys. She can drag across a stretch of days, or press June or Summer, and the station bars below show where those rides happened. Every chart says what it shows when there is nothing to show.

2. 2

   What the dashboard starts from. The Phase 7 dashboard: the key numbers, the rides line with D3 axes (src/charts/rides-line.js and src/parts/axis.js, Phase 6), the month picker with the station bars (src/charts/stations-bar.js, Phase 5), the stacked months and the June heatmap (Phase 7), and src/main.js that starts them all. Four files change here and they are given in full. main.js keeps Phase 7's loading and error handling and its stacked and heatmap boxes (marked with comments); the live example at the end runs the rides line and the stations chart only.

3. 3

   What is new. src/parts/tooltip.js is Topic 8.2's tooltip as a part. rides-line.js keeps its D3 axes and adds the crosshair, tap, arrow keys and brush (Topics 8.1 to 8.5), reports a range with onBrush, and moves the brush from code with setRange. stations-bar.js keeps its keyed join and gains hover and focus highlighting (Topic 8.4) and update(rows, { max }). main.js gets one selectRange() that validates a range and calls every follower (Topic 8.6): a note under the line, the brush, and the station bars.

4. 4

   Decisions worth knowing. The range the brush reports is rounded to whole days (the drawn brush is not snapped; Topic 8.5's try-it shows how), and a drag shorter than a day counts as a click and clears the brush. A range ends on the day *after* its last day, so the line's scale reaches one day past the data and the last day can be selected. The label shows the last day included ("1 Jun to 30 Jun"), not the exclusive end. A pointer over a hole in the data shows no tooltip instead of a day that is days away (Topic 8.3). The brush is hard to use with a finger, so three buttons set the same range. The line and the brush group both have touch-action: pan-y, so the page still scrolls up and down over them (d3.brush would set none, Topic 8.5). The station numbers come from station-month.csv, which is monthly, so while a range is selected the bars add up every month it touches and a note says so; the month picker is disabled until the selection is cleared.

5. 5

   What the dashboard can do now that it could not before: read any day's numbers by pointer, tap or keyboard; pick a date range three ways; see the stations for any range of days; say "no data" and "no dates selected" instead of failing.

6. 6

   What is still missing. Station numbers by day (the 10,000 trips cover June only; Phase 12 works with them). Motion when the bars change (Phase 9). Dark mode, colour tokens and a layout that adapts to the wall screen (Phase 10). Maps (Phase 13). A data table and screen-reader detail beyond the labels and the live range note (Phase 15). Tests (Phase 16).

• ↔

  A followers array in main.js is easy to follow with three views. With ten, move the selection into a store with subscribers (Topic 8.6).

• ↔

  Monthly station totals are honest but coarse. Daily station numbers need the trips data and a heavier load, which Phase 12 handles.

• I can point at a day by mouse, tap and keyboard and read its numbers.

• I can pick dates by brush and by buttons, and see the bars change.

• I can say what the dashboard cannot do yet and which phase adds it.

• I can run the explorer's files together and send them events.