Command Palette

Search for a command to run...

Hectal
Phase 7Intermediate8 of 19 in Data Visualization

Shapes and the Chart Catalogue

Lines, areas, stacks, pies, histograms, heatmaps and legends with D3's shape generators: what each one builds, where it breaks, and when it misleads.

Scales turn numbers into positions. Shape generators turn positions into shapes. In this phase you meet D3's generators: d3.line and d3.area for lines and filled areas, d3.stack for bars and areas that pile up, d3.pie and d3.arc for circles cut into slices, d3.bin for histograms, and d3.symbol for markers. You read what each one actually writes (a path string you can print) and what it does with empty data, missing values and negative numbers.

Then you tour the catalogue: grouped, stacked and 100% bars, a pie and its honest alternative, a histogram whose story changes with the bin width, a heatmap of June by day and hour, and small multiples. For each chart you learn when it answers the question well and when it misleads.

At the end you add two charts to the Lumen dashboard: monthly rides stacked by district, and a heatmap of June. Both come with a shared legend part.

Phase 7 · the story

Priya, operations lead

“I need to compare months, stations and bike types on one screen, not on three spreadsheets.”

Priya plans the bike trucks. Every morning she asks the same three questions: which months are busy, which parts of the city carry the rides, and how many are e-bikes. So far the dashboard answers each with a number or a single line.

On Thursday she tries to compare Harbour and Old Town across the year, and finds she has to flip between two charts and remember the heights. "Can I see them together?" she asks. "And can I see which hour of which day is the rush?"

In this phase you learn the shapes that answer her: stacked bars for months by district, a heatmap for days by hour, and the legends that explain the colours. By the end, her screen shows both.

In this phase

You will learn

  • Draw lines, areas, stacked and grouped bars, pies, histograms and heatmaps with D3's shape generators
  • Read the path string a generator builds, and predict what it does with empty, missing or negative data
  • Choose the chart that answers a question, and spot the one that misleads
  • Add a legend and direct labels so a chart explains its own colours

You write code in

In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page

Files you touch

  • src/charts/stations-stacked.js
  • src/charts/june-heatmap.js
  • src/parts/legend.js
  • src/main.js
0/7 · 0%
7 topics ~3 h 14 code blocks & diagrams
Start with the first topic
1
7.1

Lines, Areas and Curves

d3.line and d3.area are functions that turn data into the d text of an SVG path. You choose how a point becomes x and y, which points exist at all, and how the points are joined: straight, stepped or smoothed.

22 min 3 code practice

2
7.2

Stacked and Grouped Bars and Areas

d3.stack adds up several series so that each bar or area starts where the one below it ends. You choose the order and the offset (plain, 100%, or above and below zero), and you learn which questions a stack answers and which it hides.

20 min 2 code practice

3
7.3

Arcs, Pies and Donuts

d3.pie turns numbers into angles and d3.arc turns angles into path text, which makes pies and donuts. They show a part of one whole well for two to five slices, and badly beyond that: the honest alternative is a sorted bar chart.

22 min 2 code practice

4
7.4

Histograms and Distributions

A histogram counts how many values fall in each range of numbers, so you see the shape of the data instead of single values. d3.bin makes the ranges. The width of the bins can change the story, so you check more than one.

22 min 2 code practice

5
7.5

Heatmaps and Small Multiples

A heatmap colours a grid of cells by a number, which shows a pattern in two directions at once, like day by hour. Small multiples repeat one small chart for many groups, with the same scale so the groups can be compared.

22 min 2 code practice

6
7.6

Legends, Symbols and Direct Labels

A chart must explain its own colours, shapes and sizes. d3.symbol draws marker shapes, legends are small charts built with the same scales, and direct labels put the names on the lines themselves so the reader needs no lookup.

22 min 2 code practice

7
7.7

Build: Rides by Station and Bike Type

Add two charts to the dashboard: monthly rides stacked by district, and a heatmap of June by day and hour. Both come with a shared legend part. It answers Priya's question: which months, which parts of the city, and which hours?

26 min 1 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Draw a line with a gap

The third day has no data (null), but the line dives to the bottom of the chart.

Beginner
2

Bins of ten

The histogram of e-bike batteries has 11 bars and the last one is 100-110, although no battery is above 100.

Intermediate
3

Stack two bike types

The bars should be stacked: the e-bike part sits on top of the pedal part, and together they are as tall as the month's total.

Intermediate
4

Spread direct labels

Direct labels at the ends of lines can overlap. Write spread(ys, min): it takes label positions (in any order) and returns positions where neighbours are at least min apart, pushing labels down only.

Intermediate