A Heatmap Calendar for My Site

Over the weekend I built a new page on this site: the Heatcal. It’s just a simple visualization of the posts I’ve made as a heat map on a calendar grid. Darker dates have more posts. Clicking on a date can show you the posts on that day.

I missed the full date index that I used to have in a previous version of this site, where I could scroll through the full timeline of things I’ve written. And this visual display is super easy to scan - most of what I get as I scroll down the page is a sense of my creative output waxing and waning over time. I’ve come to embrace that more and more this last year.

Using this in tandem with the On This Day page has been a very nice way to reinforce my memory each morning.

Technical Details

The page uses the same JSON index of posts that the Search and Random and Insight pages use to pull in and index all posts. Then it reduces them to a list of dates and passes that to an instance of Cal-Heatmap that has been loaded onto the page. Annoyingly, I found that the docs for that JavaScript library are kind of misleading: I had to configure all options (even some of the ones that say they have a default) to get the library to render correctly.

It’s not incredibly performant to load all the posts on the page - without pagination - but today’s pocket computers are fast and I really value the simple vertical scrolling.