Circle size: radius or area?
Top 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.
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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
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?
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?
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 drawn