Topic 2.2
Marks and Channels
In one line
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.
Think of it like this
A school sports day. To find the fastest runner you look at who crossed the line first, which is a position. To compare how much each child won, you look at the height of the stacks of medals (a length). If instead the teacher gave each child a balloon whose size matched their score, you would squint: balloons that are 10% apart look the same. Which "look" carries the number changes how well you can read it.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- mark
- The basic shape that stands for one data item: a point, a line or an area.
- channel
- A visual property of a mark that carries a value: position, length, angle, area, colour or shape.
- common scale
- Marks measured against the same axis or baseline, so you compare them by the gap between them.
- hue
- The kind of colour: red, blue, green. It is good for telling categories apart, not for showing amounts.
- lightness
- How light or dark a colour is. It has an order, but the eye reads it roughly.
- perception
- How well people actually read a drawing, measured by experiments, not by guessing.
- overloaded mark
- A mark that carries more than two or three variables at once, so none of them can be read.
Step by step
01Draw the same six numbers five ways
The first example draws the six district totals from station-month.csv (Harbour 247,823 down to Westpark 45,543) as position, length, angle, area and lightness, one row each.
Look at Harbour and Old Town, the first two columns. Their totals differ by only about 4%. Which rows let you see that Harbour is bigger?
02Measure what each channel shows
The code then prints how big the Harbour-versus-Old-Town gap is inside each channel: a couple of pixels for position and length, a few degrees for the dial, a fraction of a pixel in radius for area, a couple of percentage points for lightness. The smaller the physical gap, the harder it is to see.
03Size circles the right way
The second example draws circles for four real days two ways: radius proportional to rides (wrong) and area proportional to rides (right, radius with a square root). It prints how many times bigger the biggest circle looks in each.
With the wrong rule the quietest day (439 rides) looks 99.5 times smaller than the busiest in area, when the real ratio is 10.0.
04Give each variable its own channel
The third example shows eight stations as a row of dots with size = docks, hue = district and lightness = rides, then as a scatter plot with docks along x, rides up y and hue for the district. Ask the same question of both: which station has the most rides?
Try it yourself
- 1
Make the gap bigger
In the first example, change Old Town's
vfrom 237979 to 190000, and change237979to190000in theconst gapline too (that line has its own copy of the number). The Console now printstrue gap: 23.3% of the biggest value,position: 10.3 px apart,angle: 42.0 degrees apart,area: radius differs by 2.99 pxandlightness: 14.5 percentage points. Every row now shows the difference, even area and lightness. A channel is weak only for small differences. - 2
Set one value to zero
In the first example, change Westpark's
vfrom 45543 to 0. In the Preview, Westpark's dot sits on the floor of its row, its bar has no height (nothing to see), its dial needle lies flat, its circle disappears with no error, and its lightness square is almost white. Zero is a real value, but only position and the dial still show where it is. Label zeros, or use a channel that keeps a visible mark.
Code & diagrams
The numbers are the same in every row. Only the channel changes. The 4% gap between Harbour and Old Town is plain in the position and length rows and nearly gone in the area and lightness rows.
Preview
Console
Nothing logged yet.Expected console output
true gap: 4.0% of the biggest value
position: 1.7 px apart
length: 1.7 px longer
angle: 7.1 degrees apart
area: radius differs by 0.48 px
lightness: 2.5 percentage pointsTop row (orange): radius follows the value, which exaggerates. Bottom row (green): area follows the value. A zero or a missing value gives no circle, and the code says so instead of drawing a broken one.
Preview
Console
Nothing logged yet.Expected console output
true ratio busiest / quietest: 10.0
radius = value -> area ratio: 99.5
area = value -> area ratio: 10.0
a day with 0 rides:
skipped: radius 0 cannot be drawn
a missing day:
skipped: radius NaN cannot be drawnTop: the overloaded row. Bottom: the scatter plot. Two stations share 12 docks and sit on the same vertical line, which is correct, not a mistake.
Preview
Console
Nothing logged yet.Expected console output
busiest station by rides: S01
overloaded row: rides must be read from lightness (hardest channel)
scatter plot: rides is the height of the dot (position, the easiest channel)
stations with the same docks: S01, S13Break it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
A negative value as a circle radius
In the second example, remove the line if (!(r > 0)) { ... return; } inside circle() and add a day { d: "fix", v: -50 } at the end of days. The existing loop draws it in both rows.
Myth vs fact
Myth
Pie charts are bad because designers don't like them.
Fact
Angle is read less accurately than length. Cleveland and McGill measured this in 1984 and later experiments agreed. With 3 big slices a pie works; with 25 it cannot.
Myth
Bigger circles make a number "feel" bigger, so radius is fine.
Fact
People judge area, not radius. Radius proportional to value makes a value 10 times bigger look 100 times bigger.
Pro corner
Extra depth for experienced readers. New to this? Skip it for now and come back later.
- ▸
Perception studies measure error, not preference: for the same data, position on a common scale gave the smallest error and area and lightness the largest. The ranking describes reading amounts. For tell-apart tasks (which district?), hue is excellent, and it is ranked last only because it carries no quantity.
- ▸
Bars need a zero baseline because the eye reads length as a ratio. Dots (position) do not, because the eye reads position against the axis, so a dot plot may start at a non-zero value. This is the reason dot plots and lines can use a trimmed axis honestly (Topic 2.5).
Remember this
- 1
The problem this solves: the same six numbers can be drawn in many ways, and some ways make a 4% difference obvious while others hide a 30% one. You need to know which visual property the eye reads best, so that you give the best one to the number that matters most.
- 2
Marks and channels. A mark is the basic shape: a point, a line or an area. A channel is a property of the mark that can carry a value: its position (x or y), its length, its angle, its area (size), its colour hue (red vs blue), its colour lightness (light vs dark) or its shape. A bar chart uses a rectangle mark and the length channel (plus position for the category). A scatter plot uses point marks and two position channels.
- 3
The accuracy ranking. In 1984 William Cleveland and Robert McGill measured how accurately people read numbers from different channels, and later studies (Heer and Bostock, 2010, using many online volunteers) found the same order. From best to worst: position on a common scale, position on separate scales, length, angle and slope, area, then colour lightness and saturation. Colour hue is not for amounts at all: it tells things apart (categories) but has no order in the eye. So bars (length from a common baseline) beat pie slices (angle) beat bubbles (area) for comparing numbers.
- 4
Why position wins. When two marks sit on the same scale you can compare them by looking at the gap, with no mental arithmetic. Angle and area need the eye to judge a wedge or a blob, and humans systematically misjudge both. Area is the trap: if you double a circle's radius, the area goes four times bigger and the circle looks four times as big. To show a value with area, the radius must grow with the square root of the value.
- 5
One channel per variable. Give each variable its own channel and use each channel once. A map of stations where size shows docks, colour shows district and lightness shows rides asks the viewer to decode three things on the same dot, so they decode none of them well. If two variables matter, give each a position (a scatter plot) and add colour only for a category. Recall from Topic 2.1: amounts (quantitative) go on position, length or area; labels (categorical) go on hue or shape.
- 6
Real data has awkward cases. A zero value has zero length (a bar of height 0 is invisible, which is correct) but a zero-area circle disappears. A negative value cannot have a negative length or radius: SVG refuses it. And when every value is nearly equal, position and length show almost no difference at all. That is honest: the data really is nearly flat, and a chart should not invent a difference.
Explain it without notes
Name three marks and three channels. Which channel does a bar chart use?
Why is position on a common scale ranked above angle and area?
If you size circles by value, should the radius or the area follow the value? What goes wrong the other way?
What is an overloaded mark, and how do you fix it?
Practice
Write radiusFor(value, max, maxRadius) that sizes a circle by area and returns 0 for a zero, negative or missing value instead of NaN. Test (4380, 4380, 45), (2979, 4380, 45), (0, 4380, 45), (-50, 4380, 45), (undefined, 4380, 45).
Name the channels for three variables of a station chart: rides, district and docks. Why?
Trade-offs
- ↔
Position and length are the most accurate channels but use the most space. Area and lightness pack more variables into one mark but are read roughly, so label the important values.
Done when you can
I can name the marks and channels and say which channel a bar chart uses.
I can rank position, length, angle, area and colour by how accurately they are read.
I size circles so that the area, not the radius, follows the value.
I give each variable its own channel and avoid overloaded marks.