Interactive Calendar Heatmaps

Year Heatmap

Quick-Pick Years

Activity-Day to Heatmap Coverage

Want to count weekdays only? Try Weekdays Between Dates.

The Bucket Formula

No saved snapshots yet. Tap "Save Snapshot" after pasting data.

How to Build a Calendar Heatmap

1. Pick the year you want to visualise. Year picker accepts 1900-2099.
2. Paste ISO dates (yyyy-mm-dd) into the textarea, one per line. Add a comma + count for weighted entries.
3. Click Apply. The heatmap recomputes with relative intensity buckets.
4. Hover any cell to see the date and count in the tooltip. Switch years to compare.
5. Copy CSV to export, or Save Snapshot for the history panel.

A Brief History of the Calendar Heatmap

In 2026, an open-source maintainer of a 600-star Rust crate wants a visual record of every commit landed since the first release in March 2022. The format that has become the lingua franca of contribution graphs is the calendar heatmap — a 7-row, 53-column grid of small colored squares, one per day, with intensity buckets reflecting the count of events on that day. GitHub introduced the format on user profiles in 2013, designed by Coby Chapple, and Bitbucket, GitLab, and Sourcehut adopted variants within two years.

The visualisation traces to John Tukey's exploratory data analysis (1977), where calendar plots were used to surface seasonal patterns in time-series. Heer, Bostock, and Ogievetsky's 2010 D3.js library shipped a calendar-heatmap example that became the most-forked block on bl.ocks.org; that block is the structural ancestor of the GitHub contribution graph. The 5-bucket green palette — empty, light, medium-light, medium, high — was chosen for colorblind accessibility (#ebedf0 to #216e39, tested against deuteranopia and protanopia).

The ISO 8601 week-numbering system, codified in 1988, anchors the heatmap's 53-column layout. ISO weeks start on Monday; weeks 1-53 are numbered with week 1 containing the first Thursday of the calendar year. A year has 53 ISO weeks when January 1 falls on Thursday (or on Wednesday in a leap year). GitHub's heatmap follows a US-style Sunday-starts-the-week convention but renders 53 columns regardless, with the leading and trailing partial weeks displayed as grayed-out cells.

Heatmaps are a particularly effective visualisation for self-quantification — Quantified Self, the movement founded by Gary Wolf and Kevin Kelly at Wired in 2007, drove the format into habit-tracking apps like Streaks, Habitica, and HabitShare. The 365-day single-page view makes longitudinal patterns visible at a glance: weekend dips, vacation gaps, monthly cycles, sustained streaks. The cognitive load is low — humans parse 2D color intensity faster than line charts (Cleveland and McGill, 'Graphical Perception', 1984).

Streak computation — the longest run of consecutive days with at least one event — turns the heatmap into a gamified record. GitHub removed the current-streak counter in 2018 to discourage burnout, but the longest-streak metric remains a quotable personal best. The widget surfaces both: longest streak across the dataset and current streak (if the year selector matches the current year), with the streak ending at today's date.

Browser-side rendering of heatmaps via SVG (instead of canvas or WebGL) keeps the markup accessible — each cell is a discrete rect with a tooltip-friendly data attribute. The widget on this page renders 371 rects (53 × 7), tracks pointer events for hover tooltips, and recomputes buckets when new dates are pasted. localStorage persists the data per-year so users can flip between 2024 and 2026 without re-pasting.

Calendar heatmaps have spread beyond contribution graphs to fitness (Strava heatmaps), medication adherence (Quantified Self trackers like Bearable), language learning (Duolingo streak), and finance (transaction frequency in Mint, YNAB, Lunch Money). The format is also the backbone of public-health dashboards — COVID-19 case-report heatmaps on the John Hopkins dashboard during 2020-2022 used the same 53-week layout to show epidemic waves at country granularity.