Build: The Dashboard's First Page

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

layout

How the parts of a page are arranged: here, a header and a grid of boxes.

grid (CSS)

A CSS layout (display: grid) that puts boxes into rows and columns, wrapping them onto new rows when the screen is narrow.

baseline

The line the bars stand on, here at y = 180. Every bar's bottom touches it.

aria-label

An attribute that gives an element a text name for screen readers. With role="img" it describes the whole picture.

hard-coded

Typed directly into the code by hand, instead of computed from data.

1. 1

   Make the bars shorter

   Redo two rows of the table in step 3 with 120 instead of 160. Tuesday becomes height 120, y 60; Monday becomes height 89.5, y 90.5. Every bar shrinks by a quarter and the comparison stays the same: the rule changed, not the data.

2. 2

   Highlight a different day

   In the first example, give Tuesday's bar (the second <rect>) fill="#264653" and Monday's fill="#2a9d8f". The eye now goes to the busiest day. Which one you highlight is part of the message: update the aria-label to match.

3. 3

   Watch the boxes stack

   Drag your browser window narrower. Below about 950 pixels the grid drops to two columns, and below about 650 to one. Whenever the week box becomes narrower than its 380-pixel SVG (the two-column layout, and phone widths), the box shows a horizontal scrollbar. Phase 1 makes the SVG shrink instead.

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lumen Bikes dashboard</title>
  <style>
    body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; background: #f6f7f9; color: #1d2b36; }
    header h1 { margin: 0; font-size: 22px; }
    header p { margin: 4px 0 16px; color: #5b6b78; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
    .box { background: white; border: 1px solid #dde3e8; border-radius: 8px; padding: 12px; overflow-x: auto; }
    .box h2 { margin: 0 0 8px; font-size: 15px; }
    .soon { color: #5b6b78; font-size: 14px; }
  </style>
</head>
<body>
  <header>
    <h1>Lumen Bikes</h1>
    <p>Ardenvale bike share, operations dashboard</p>
  </header>
  <main class="grid">
    <section class="box" id="this-week">
      <h2>Rides this week (2–8 June 2025)</h2>
      <!-- 7 bars drawn by hand: height = rides ÷ 3,992 × 160 (the busiest day is 160 tall) -->
      <svg width="380" height="210" role="img"
           aria-label="Rides per day from Monday 2 to Sunday 8 June 2025: Monday 2,979, Tuesday 3,992, Wednesday 3,759, Thursday 3,742, Friday 3,648, Saturday 3,013, Sunday 3,451. Monday, a rainy day, was the quietest.">
        <line x1="20" y1="180" x2="380" y2="180" stroke="#9aa8b4"></line>
        <rect x="30" y="60.6" width="40" height="119.4" fill="#e76f51"></rect>
        <rect x="80" y="20" width="40" height="160" fill="#2a9d8f"></rect>
        <rect x="130" y="29.3" width="40" height="150.7" fill="#2a9d8f"></rect>
        <rect x="180" y="30" width="40" height="150" fill="#2a9d8f"></rect>
        <rect x="230" y="33.8" width="40" height="146.2" fill="#2a9d8f"></rect>
        <rect x="280" y="59.2" width="40" height="120.8" fill="#2a9d8f"></rect>
        <rect x="330" y="41.7" width="40" height="138.3" fill="#2a9d8f"></rect>
        <g font-size="12" text-anchor="middle" fill="#1d2b36">
          <text x="50" y="198">Mon</text><text x="100" y="198">Tue</text><text x="150" y="198">Wed</text>
          <text x="200" y="198">Thu</text><text x="250" y="198">Fri</text><text x="300" y="198">Sat</text>
          <text x="350" y="198">Sun</text>
        </g>
      </svg>
    </section>
    <section class="box" id="rides-line">
      <h2>Rides through the year</h2>
      <p class="soon">Coming in Phase 3: a line of all 365 days.</p>
    </section>
    <section class="box" id="stations-bar">
      <h2>Busiest stations</h2>
      <p class="soon">Coming in Phase 5: bars that update with the data.</p>
    </section>
  </main>
  <script>
    // A quick self-check: count the bars and find the tallest one
    const bars = document.querySelectorAll("#this-week rect");
    const heights = Array.from(bars, (b) => Number(b.getAttribute("height")));
    console.log("Bars:", bars.length);
    console.log("Tallest bar:", Math.max(...heights), "(Tuesday)");
  </script>
</body>
</html>

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

1. 1

   The problem this solves: Tomás couldn't see anything in 365 rows. The dashboard starts with the smallest useful answer: one week, seven bars, one look. It also fixes the page's layout now, so every later chart has a box waiting for it.

2. 2

   What the page has now. A header ("Lumen Bikes" and a one-line description), and three boxes in a grid. The first box, #this-week, shows rides from Monday 2 to Sunday 8 June 2025 as seven vertical bars. The other two, #rides-line and #stations-bar, say which phase fills them.

3. 3

   The rule for the bars. The busiest day (Tuesday, 3,992 rides) gets a bar 160 pixels tall. Every other day gets rides ÷ 3,992 × 160. Monday's 2,979 rides become 119.4 pixels. Because SVG's y grows downwards and bars stand on a baseline at y = 180, each bar's top is at y = 180 − height. Seven bars of width 40 stand 50 pixels apart, starting at x = 30.

4. 4

   Monday stands out. Monday is drawn in orange: it is the quietest day, and it rained (4.8 mm). The colour points the eye at the answer before you read a label, and the label (aria-label) says the same thing in words for anyone using a screen reader.

5. 5

   What the dashboard can do now that it couldn't before: it exists, it opens on any computer, and it answers "how did last week go?" at a glance. Still missing: the bars are typed by hand, so new data means retyping them; there are no axes or numbers on the chart; and on a narrow phone the week box scrolls sideways because the SVG has a fixed width. Phase 1 makes it scale to any screen, Phase 3 draws charts from data with code, and Phase 6 adds real axes.

• ↔

  Typing the bars by hand is quick for seven values and teaches the arithmetic, but every data change means retyping. Code (Phase 3) costs a little more at first and pays back on the first update.

• My lumen-dashboard/index.html shows the header, three boxes and seven bars.

• I can work out any bar's height and y from its number with the rule.

• The browser's Console shows Bars: 7 and no red lines.

• I can say what the dashboard can do now and which phases add what's missing.