Command Palette

Search for a command to run...

Hectal
Phase 2Beginner3 of 19 in Data Visualization

Seeing Data: Choosing the Right Chart

Kinds of data, marks and channels, picking a chart from the question, how eyes group things, and how to tell an honest chart from a misleading one.

Drawing a chart takes a few lines of code. Choosing the right one is the hard part. This phase teaches the judgment that comes before any code: what kind of data you have, which visual property (position, length, angle, colour) the eye reads best, and which chart answers which question.

Every principle is a live before-and-after on real Lumen Bikes numbers, drawn with plain SVG. You see a 25-slice pie fail and a sorted bar chart succeed, you measure how much a cut axis exaggerates, and you watch a crowded chart turn readable.

At the end you add a chart plan to the dashboard (which chart answers which team question) and replace the pie idea with a hand-made, sorted picture of the five emptiest stations.

Phase 2 · the story

Priya, operations lead

“Which stations run out of bikes? Someone drew a pie chart of all 25 and I can't read a single slice.”

Every morning Priya, the operations lead, decides where the vans carry bikes. Her question is simple: which stations are running empty right now? A colleague tried to help and put a chart on the wall screen: a pie with 25 slices, 25 colours and 25 labels that overlap in the middle.

Priya squints. She can see that some slices are big and some are tiny, but she cannot tell the fourth biggest from the fifth, and she cannot find Windmill at all. "I don't need a pretty picture. I need to know where to send the van."

The data is fine. The problem is the choice of chart. In this phase the team learns to pick a chart from the question, and by the end the dashboard answers Priya's question with five sorted bars she can read in two seconds.

In this phase

You will learn

  • Tell the four kinds of data apart and say what each one allows
  • Rank the ways the eye reads a chart (position, length, angle, area, colour) and choose the best one
  • Pick a chart from the question it must answer, and spot a misleading one
  • Add a chart plan and a hand-made sorted bar picture to your dashboard

You write code in

In the editor on this page, and in your own lumen-dashboard/index.html (no install needed)

Files you touch

  • index.html
0/6 · 0%
6 topics ~3 h 17 code blocks & diagrams
Start with the first topic
1
2.1

Kinds of Data

Data comes in four kinds: quantitative (amounts), ordinal (ordered labels), categorical (unordered labels) and time. The kind decides what you may do with a column: sort it, average it, compare it, or only count it.

21 min 2 code practice

2
2.2

Marks and Channels

Every chart is made of marks (points, lines, areas) whose looks, called channels (position, length, angle, area, colour), carry the data. Some channels are read far more accurately than others, so the best charts put the important comparison on the best channel.

27 min 3 code practice

3
2.3

Choose the Chart from the Question

Start from the question, not from the chart type. Each kind of question (compare, change over time, part of a whole, distribution, relationship, ranking, where, flow) has a chart that answers it fastest, and sometimes the best answer is a table or one big number.

26 min 3 code practice

4
2.4

How Eyes Group Things

The eye groups things before it reads them: dots that sit close, look alike, share a box or are joined by a line look like one group. One strong colour among greys is noticed in a flash. Use these rules to guide attention, and split a crowded chart into small multiples.

26 min 3 code practice

5
2.5

Honest and Misleading Charts

A chart can be built from correct numbers and still mislead: a cut axis on bars, two y axes, circles sized by radius, a hand-picked time window, totals instead of rates, uneven bins, a rainbow colour scale. Learn to spot each one, measure how much it lies, and fix it.

28 min 4 code practice

6
2.6

Build: Pick and Sketch the Dashboard's Charts

Write a chart plan into your dashboard (which chart answers which team question), then replace the pie idea with a hand-made, sorted picture of the five emptiest stations. It answers Priya's question: which stations run out of bikes?

28 min 2 code practice

Practise this phase

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

1

Name the kind of a column

Write kindOf(values), which takes an array of strings (a CSV column) and returns "time", "quantitative" or "categorical".

Beginner
2

Size a circle by area

Write radiusFor(value, max, maxRadius) so that the circle's area is proportional to the value. The biggest value gets maxRadius.

Beginner
3

Fix a cut baseline

The two bars show June (107,712 rides) and July (117,803 rides). The code cuts the axis at 100,000, so July looks 2.3 times as long as June.

Beginner
4

The stations box, with an empty state

show(rows) should draw the stations running low into #low: at most 5, below 40% full, emptiest first, one rect per station with data-name, width share × 240.

Intermediate