A Heatmap of Over 900 Days of Writing Data from My Google Docs Writing Tracker

A few days ago, I mentioned that I was looking to add a Github-style heatmap feature to the Google Docs Writing Tracker code. Well, I’ve got something to show for it. Keep in mind that I am still experimenting, and none of this code has been checked into the Google Docs Writing Tracker repo as of yet. But, here is what all of my writing data looks like going back over 900 days:

For each year represented above, the rows are days of the week (top row is Sundays, bottom row is Saturdays), and the columns are weeks of the years.

The scale goes from 0-250 words (the lightest green) to 1,500+ words (the darkest green). You’ll also note that in July 2013, there are two white cells. Those are the only days that I had no writing. The last day, July 21, 2013, was 770 days ago. I have not missed a day since then.

This was relatively easy to do thanks to the Cal-heatmap JavaScript library. After installing the library files, I exported my writing data (dates and words counts) to a JSON file. Once the JSON file was created, the rest was easy. The entire rendering of the heat maps looks like this:

The bulk of the code is customizing how I want the heatmaps to look. Now that I have the look I want there is only one more thing to do, and that is to automate the process of generating the JSON file from the Google Docs Writing Tracker spreadsheet. With that done, anyone who uses the Google Docs Writing Tracker will be able to render a heatmap like the one above.

You can see my writing heatmap in action. If you hover over the cells, you’ll get the word count for that day. Check it out, play around with it. Let me know what you think.

ETA (8/31 @ 1:30 pm): I managed to automate the process of generating the JSON file from the Google Docs Writing Tracker spreadsheet. In the near future, I’ll post the code to a new repo on Github since it isn’t directly related to the code for the Google Docs Writing Tracker itself.