Four ramps: which ones change lightness in one direction?
In the picture: Viridis runs dark purple to green to yellow, YlGnBu pale yellow to deep blue, Turbo near-black through blue, green, yellow and orange to dark red, and Rainbow purple through pink, orange, green and blue back to purple. The numbers say what the eye cannot: Turbo and Rainbow rise to about 90 and fall again.
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?
Preview
Console
Nothing logged yet.Expected console output
Viridis 15 25 35 45 54 63 73 82 91 one direction
YlGnBu 99 95 88 77 68 55 40 26 13 one direction
Turbo 9 48 70 86 90 84 68 46 31 goes up and down
Rainbow 37 52 63 74 88 85 73 52 37 goes up and down