Widget Tricks - Heatmaps with CSS Grid

We consider the usage of ods-adv-analysis as a prerequisite of this resource. Documentation available here

Did you see ? Heatmaps with Vega-lite

If Vega-lite does not satisfy your needs, for advanced usages, you can create heatmaps by hand with only HTML and CSS Grid.

Keep in mind that, for heatmaps or bubblemaps, you’ll need to adapt the display depending on the values, axis, and legends.

For example, if the aggregation is too large to be displayed in cells, using ods-tooltip could be a nice way to display the value while hovering with the cursor. Legends might also be a concern as they can overlap if they are too long.

Heatmap with static scale

The colors are static, and set in the ng-class of the cell, with a simple condition and static thresholds. The code is therefore much simpler than dynamic RGB computation.

But keep in mind that if the order of size of the aggregation changes, you’ll then need to adapt your thresholds, and therefore the page.

Bubblemap with static scale

X and Y CSS axis might need to be adapted depending on the value and its length.

Heatmap with dynamic color scale

Custom heatmaps or bubblemaps are made of a CSS grid, an ods-adv-analysis and several computations to get the colors and the axis.

  • ods-adv-analysis returns the list of values for each axis. You need to adapt the axis id in toObject filter.
  • The min and max of all aggregation are computed to get the boundaries and will be useful for colors computations.
  • To display the grid, three computations are needed: the x-axis value positions, the y-axis value positions and the color values.

Colors are RGB codes, computed of the aggregation value within the range of all values. Low and high colors values are set into variables object at the beginning of the code.

The toggle button, and the legend are independent of the grid and can be removed.

Note: It’s much easier to deal with dates with Vega-Lite as it can split by day, day of the week, month with the labels and the correct ordering. We then strongly advice to go for Vega-Lite heatmaps in that case.

Bubblemap with dynamic color scale

Same analysis and display as before. Only cells get an extra style with expression to compute the size of the cells based on the aggregation value within the range of all values.

Heatmap with larger text in legends

Sometimes, the Y legend will need more than 1 column in the grid to display correctly. The yLegendWidth = 2 option in this example set 2 column width for Y legend values.

The X legend can be centered, and a slight rotation can give some space and visibility. Two CSS classes are proposed to achieve this : x-axis-centered and x-axis-rotate to set on the X axis loop (HTML side).