How can I make a heatmap

I would like to make a heatmap calendar showing the number of entries from a table fo a given day of the year. Github shows a calendar heatmap to show user contributions and is useful to get a year overview in a quick graph.

Here is an example:

ref: Tutorial: Building a D3.js Calendar Heatmap (to visualize StackOverflow Usage Data) - RisingStack Engineering

This was the closest I could get using the Advanced Charts custom widget: Heatmap - Grist

Couldn’t figure out getting the proper Y-axis ordering or X-axis month labels, so it doesn’t quite work, but maybe it’s a start?

1 Like

Hi,
My 2 cents :

  • to get the day ordering, add a formula column with a dictionary returning a number according to the day of week and sort against this column (We could have use the %w of the strftime but Sunday is 0 instead of Monday)
  • the size can be reduced using the subplots parameter in the Structure menu
  • we can add vertical and horizontal gaps between the square
  • add the month which make some week double because across 2 months

Something like this : Heatmap (github commit style) - Grist

And visually looking :

2 Likes

This heatmap looks quite workable. I see that it is a custom widget but I don’t see what custom wiget was chosen. Isn’t there a URL needed for a custom widget?

How would I duplicate this widget in my own document?

It’s the wonderfull “Advanced charts” based on the marvelous Plotly.
:pray: Thanks both team :star_struck:

Either :