Three scales, and what they return for odd input
Edge cases in one place. A missing value gives undefined, so a fill set from it is not set and the shape turns black. An ordinal scale gives new names the colours it already has, in order, and adds them to its domain. (Viridis returns its end colour past the domain; call .clamp(true) to be sure for other interpolators.)
Colour carries data in three ways: an ordered ramp (sequential), a ramp with a meaningful middle (diverging), or unrelated names (categorical). Each job needs its own scale, and a rainbow is wrong for order because its lightness goes up and down.
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 rampLightness(interpolator) that returns true if the Lab lightness of 9 samples changes in one direction only. Test it with d3.interpolateViridis and d3.interpolateRainbow.
Make a diverging scale for the temperature gap temp_c - 17 (days from daily.csv, range -7.1 to +7.9) and print the colour for the two ends. Which value is the middle?
Explain it without notes
Which kind of colour scale would you use for rides per hour in the June heatmap, and why?
Why is a rainbow a poor choice for a number that runs from low to high?
What does d3.scaleOrdinal return for a name that is not in its domain, and why can that mislead?
Console
(nothing was printed)Expected console output
sequential 0, 60000, 120000: [ '#440154', '#21918c', '#fde725' ]
diverging -6, 0, 6: [ 'rgb(103, 0, 31)', 'rgb(242, 239, 238)', 'rgb(5, 48, 97)' ]
categorical: #0072B2 #D55E00 #009E73
sequential beyond domain 200000: #fde725
sequential null: undefined undefined: undefined NaN: undefined
all values equal, domain [5, 5]: #21918c
a fourth name, no fourth colour: #0072B2 #D55E00
cat.domain(): [ 'Harbour', 'Old Town', 'University', 'Riverside', 'Hillcrest' ]