Build: Rides by Station and Bike Type

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

chart function

A function such as drawStationsStacked(container, rows) that draws one chart and returns { update }.

part

A piece several charts share, such as the legend in src/parts/.

update

The function a chart returns. Call it with new rows and the chart changes in place.

empty state

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

1. 1

   Empty the data

   In startStacked replace rows.map(...) by []. The box shows No rides to show. in place of the chart (the empty chart is hidden, because its axis would show meaningless ticks), and the legend stays. In startHeatmap replace await loadHourlyJune() by [] and the heatmap box does the same.

2. 2

   Send a bad row

   Add { month: "Jan", district: "Harbor", rides: 100 } (a different spelling) to the stack's rows. The console warns 1 row(s) were left out and the bars are unchanged.

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

// Legends are built from the chart's own scales, so they can never disagree with the chart.
import * as d3 from "d3";

/** A row of swatches with names, one for every value of an ordinal colour scale. */
export function drawLegend(container, color, options = {}) {
  const { label = "Legend" } = options;
  const list = d3.select(container).append("ul").attr("aria-label", label)
    .style("display", "flex").style("flex-wrap", "wrap").style("gap", "4px 14px")
    .style("list-style", "none").style("margin", "6px 0 0").style("padding", "0").style("font-size", "12px");
  function update(names = color.domain()) {
    const item = list.selectAll("li").data(names, (d) => d).join("li").style("display", "flex").style("align-items", "center").style("gap", "5px");
    item.selectAll("i").data((d) => [d]).join("i").style("width", "10px").style("height", "10px").style("background", (d) => color(d));
    item.selectAll("span").data((d) => [d]).join("span").text((d) => d);
  }
  update();
  return { update };
}

/** A colour bar for a sequential scale: a gradient from the lowest to the highest value, with both ends named. */
export function drawColorBar(container, scale, options = {}) {
  const { width = 160, label = "rides" } = options;
  const wrap = d3.select(container).append("div").attr("role", "img")
    .style("display", "flex").style("align-items", "center").style("gap", "6px").style("font-size", "12px").style("margin-top", "6px");
  const low = wrap.append("span");
  const bar = wrap.append("span").style("width", width + "px").style("height", "10px");
  const high = wrap.append("span");
  function update() {
    const [lo, hi] = scale.domain();
    const stops = d3.range(0, 1.01, 0.1).map((t) => scale(lo + (hi - lo) * t));
    bar.style("background", "linear-gradient(to right, " + stops.join(", ") + ")");
    low.text(lo);
    high.text(hi + " " + label);
    wrap.attr("aria-label", "Colour scale from " + lo + " to " + hi + " " + label + ", light to dark");
  }
  update();
  return { update };
}

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 see the months and the districts in one chart, and the rush hours in another. The stack shows July at 117,803 rides and Westpark joining in May. The heatmap shows two weekday peaks (about 8 and 17 to 18 o'clock) and the weekend midday (busiest from 13 to 15 o'clock). The e-bike share by month is Topic 7.2's example, and bike types are still not on the dashboard.

2. 2

   How it plugs into what exists. You start from the Phase 6 project: rides-line.js (now with D3 axes) and stations-bar.js stay. Each new chart is a function that takes a container and rows and returns { update(rows) }, like drawStationsBar. src/parts/legend.js is new: drawLegend for colour names and drawColorBar for a gradient. main.js adds two boxes with their own loading and error lines, and loads hourly-june.csv as text columns (day, hour, rides) because its datetimes have no time zone.

3. 3

   The checks inside the charts. Both charts drop rows without a number (and warn), show "No rides to show." when nothing is left, and put a summary in aria-label (busiest month, busiest hour). The stack treats a missing district and month as 0 rides. The heatmap draws zero as grey. Both rebuild the colour domain from the new data in update.

4. 4

   What the dashboard can do now that it could not before: compare months and districts in a stack, find rush hours in a heatmap, and explain colours with legends built from the same scales. Still missing: the charts do not react to pointer or touch (Phase 8), the colours and fonts do not follow the dark theme (Phase 10), the e-bike share has no chart of its own (Topic 7.2 shows it), and the heatmap has no text alternative beyond its summary (Phase 15).

• My project has stations-stacked.js, june-heatmap.js, legend.js and the new main.js.

• The page shows the stack and the heatmap with their legends.

• I made the heatmap fail on purpose and saw its box change, with the other charts intact.

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