Zoom the map without growing the stations
The zoom is moved by code here (svg.call(zoom.transform, ...)). A wheel, a double click and a pinch call the same handler.
A choropleth colours each area by a value, and a symbol map puts a circle on each place. Both are easy to draw and easy to get wrong: totals follow size, classes decide the colours, a circle's area (not its radius) must show the value, and zoom must not grow the symbols.
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.
Add a legend to the choropleth: four squares with the class ranges (scale.thresholds() gives the breaks of a quantize scale).
Write circleRadius(value, max, maxRadius) that returns 0 for missing, zero or negative values, and a square-root scaled radius otherwise.
Explain it without notes
Why is a choropleth of total rides less useful than one of rides per dock?
How do quantize, quantile and threshold scales differ, and when does each mislead?
Why must a circle's radius be the square root of the value?
How do you stop circles growing when the map zooms?
Preview
Console
Nothing logged yet.Expected console output
start | k 1.0 | x,y 0,0 | r in the file 5.00 | r on screen 5.0
zoom 4x on Quay | k 4.0 | x,y -713,-703 | r in the file 1.25 | r on screen 5.0
ask for 20x (limit is 8) | k 8.0 | x,y -1636,-1576 | r in the file 0.63 | r on screen 5.0
move the centre to the corner | k 8.0 | x,y 0,0 | r in the file 0.63 | r on screen 5.0
reset | k 1.0 | x,y 0,0 | r in the file 5.00 | r on screen 5.0