calendar heatmap

This article is a stub. You can help the IndieWeb wiki by expanding it with relevant information.

calendar heatmap is a 2-dimensional calendar view that shows a value over time through color coding it, often with warmer colors indicating higher values (hence heatmap).

IndieWeb Examples

This section is a stub. You can help the IndieWeb wiki by expanding it.

Do you show a calendar heatmap or activity grid on your site like the ones below? Add yourself!

Naty S

Naty S has created an interactive GitHub-style calendar heatmap on her Hugo blog as of 2025-10-12

• https://burgeonlab.com/stats/

Screenshot:

Example calendar heatmap showing Naty's posts in 2025, with colour variance indicating word count

Details:

• Post data (as .JSON) is generated during Hugo build
  • Data includes date, title, permalink, wordcount
  • Use Hugo Go template conditionals to run on specific pages if required (e.g. ignore pages, only count posts)
• The calendar heatmap is generated using Apache ECharts (Open source Javascript visualisation library)
  • Calendars are separated into years—currently it is set up as buttons in a row above the calendar, but there is a drop-down version (a project repo with the full calendar heatmap code and docs site is in the works)
• To learn more, see How to Add a GitHub Style Hugo Calendar Heatmap Widget

First Last

Add yourself here… (see this for more details)

Silo Examples

GitHub

The contribution graph on Github user profiles uses light green to dark green to indicate level of contribution per day, on a 52x7 grid display of the most recent 52 weeks of contributions.

You can click on any of the squares and GitHub will show the contribution activity for that day below.

JetPack

The WordPress.com mobile app (utilizing JetPack for self-hosted sites) has an Insights section with a Posting Activity pane with data spanning two months to indicate how frequently one post to their website.

Tools

Decorative

• https://github.com/gelstudios/gitfiti is open source to create graffiti in a github commit history calendar, e.g.:

Brainstorming

open source

Open source libraries that may be of use to draw heatmaps on your own site:

• Cal-Heatmap
  • repo: https://github.com/wa0x6e/cal-heatmap
  • docs: https://cal-heatmap.com/

• Apache ECharts
  • repo: https://github.com/apache/echarts
  • docs: https://echarts.apache.org/handbook/en/get-started/

See Also

• posting graph
• visualization
• sparkline