Heatmap - Basic
heatmap-basicA table whose cells, where rows and columns meet, are tinted by the size of their value. Use it to find the high and low spots where two dimensions meet, like hour × weekday.
Judgment built in (4)
- Only one color, orange, in varying depth. The smallest value is the lightest, and a depth bar spanning the card's width above the table, with the two end values, serves as the legend.
- When values split around zero, like a profit margin or a growth rate, the good side is shaded green and the bad side red from the zero boundary (the same colors as the KPI badge). In one orange, a loss and a small profit would both be equally pale cells. Both sides share one scale set by the larger absolute value, so depth compares size, and a metric where lower is better flips the colors with
"better": "down". - Cells 48px or wider also carry the number; narrower cells do not, so the color pattern is seen first. Values appear in a tooltip on hover, or by focusing the table and moving between cells with the arrow keys (left and right in reading order, up and down within a column), and a screen reader reads the number in every cell.
- The initial order is as written; click a column heading, like a weekday, to sort by that column, largest first. When rows differ so much in size that only the large rows get dark,
"scale": "row"shades each row on its own scale to show the highs and lows within a row.