The same two colours blended in RGB, Lab and HCL
In the picture the RGB and Lab rows pass through a dull grey-brown in the middle. The HCL row passes through olive and green and stays vivid. The numbers agree: chroma (colourfulness) in the middle is 12, 19 and 48.
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
RGB midpoint #898670 lightness 56 chroma 12
Lab midpoint #a38c70 lightness 60 chroma 19
HCL midpoint #83983c lightness 60 chroma 48
end colours: lightness 61 and 58