Charts
Eight series colors in a fixed order, a ramp for magnitude, a pair for sign, and four reserved status colors.
In this chapter 7 pages
Series colors
Assign series colors in this order, starting from tomato. Never cycle back to the start: a ninth series goes into "Other" or into small multiples. A color follows its series, so filtering one series out never repaints the others.
- 1. tomato#D9412B / #E04B34
- 2. teal#009B93 / #00A39A
- 3. cobalt#3A62C4 / #5A7FDB
- 4. grass#4C8C2B / #5A9A35
- 5. sky#2E8FD0 / #2E8FD0
- 6. mustard#C28A0A / #B98200
- 7. plum#9A3E96 / #9A52C8
- 8. pink#E06C91 / #D9658B
The order was chosen by checking every arrangement for color vision deficiency, using the Machado 2009 simulation of protanopia and deuteranopia. Neighboring colors stay at least 13.6 apart (OKLab distance times 100) in both themes, against a target of 8, and at least 16.7 apart for full color vision. Every color clears 3:1 against its chart background. The dark theme has its own steps, checked the same way.
Example
Validation accuracy by epoch
Synthetic example data
- Model A
- Model B
- Model C
Data table
| Epoch | Model A | Model B | Model C |
|---|---|---|---|
| 0 | 0.440 | 0.360 | 0.340 |
| 10 | 0.592 | 0.477 | 0.520 |
| 20 | 0.689 | 0.563 | 0.620 |
| 30 | 0.751 | 0.627 | 0.674 |
| 40 | 0.791 | 0.674 | 0.704 |
| 50 | 0.816 | 0.710 | 0.720 |
| 60 | 0.832 | 0.736 | 0.729 |
| 70 | 0.842 | 0.755 | 0.734 |
| 80 | 0.849 | 0.769 | 0.737 |
| 90 | 0.853 | 0.780 | 0.738 |
| 100 | 0.855 | 0.788 | 0.739 |
Lines are 2px. Up to four series get direct labels at their ends, in text color; the legend stays as well, so identity never rests on color alone. Hover shows every value at that epoch, and the data table holds the numbers for anyone who cannot see the plot.
Magnitude and sign
For magnitude (a heatmap, an adjacency matrix), use the cobalt ramp, light to dark. For values with a sign around zero, use the diverging pair, with gray in the middle.
For ordered categories (small, medium, large) use ramp steps 3 to 7, which stay visible on white.
Status
Good, warning, serious, and critical mean state, never "series 4". Each comes with a mark and a word.
GoodWarningCritical
Charts with no color
For print and forced-colors mode, .ply-texture gives a diagonal hatch, so filled areas stay apart without color.