Circle area with scaleSqrt, colour with scaleDiverging
Area ratio 5.59 matches the rides ratio only with the square-root scale. The twelve squares are the monthly means, coloured by the same scale.
When numbers span many sizes, when a circle must show a value by its area, or when a colour needs a meaningful middle, a straight-line scale misleads. Log, power, square-root, symlog and diverging scales bend the rule the right way, and each has inputs it cannot take.
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 a function that turns a station's ride total into a circle radius, for a largest radius of 30 pixels, and prove that the busiest station's area is 5.59 times the quietest's.
Bike odometers range from 194 to 8,902 km. Create a log scale for 0 to 300 pixels and print the pixel of 194, 1,000 and 8,902. What does scaleLog().domain([0, 8902]) give for 1,000?
Explain it without notes
Why does a circle chart need scaleSqrt for the radius?
Why can a log scale not start at 0, and what are your options for data that has zeros?
What does the middle number of a diverging domain mean, and how can you choose it?
Preview
Console
Nothing logged yet.Expected console output
busiest: Quay 58584 quietest: Windmill 10486
rides ratio: 5.59
area ratio with scaleSqrt: 5.59
area ratio with scaleLinear: 31.21
temperature domain: 9.9 17.5 24.9
coldest day rgb(5, 48, 97) | average day rgb(242, 239, 238) | hottest day rgb(103, 0, 31) | 30 degrees rgb(103, 0, 31)
January rgb(62, 137, 190) July rgb(201, 71, 66)