
D3 heatmap representing time series data similar to GitHub's contribution chart - sebg
https://github.com/DKirwan/calendar-heatmap
======
dsilver
Another similar visualization to add to the list. This one by Mike Bostock,
the D3 author. The month outlines are a nice addition.

[http://bl.ocks.org/mbostock/4063318](http://bl.ocks.org/mbostock/4063318)

------
darkir
Thanks, sebg, for submitting this! The main difference between this and some
other heatmap charts is the UI design, and the fact that is a 1 year moving
window of day aggregated data. Thanks for sharing all of the other heatmap
examples in the comments, many of which I haven't seen before.

This is still in the early stages so if you have any questions or suggested
improvements, just comment them here - I'd love to hear them!

------
dmourati
See also Google's Calendar Chart.

[https://developers.google.com/chart/interactive/docs/gallery...](https://developers.google.com/chart/interactive/docs/gallery/calendar#a-simple-
example)

------
harlanlewis
How does this compare with cal-heatmap? [http://cal-heatmap.com](http://cal-
heatmap.com)

~~~
trengrj
This project seems to just be for daily data while cal-heatmap can do
different levels of aggregation. I guess the flipside is that this project
looks a bit easier to call and is probably lighter.

I used cal-heatmap to track at what time I was exercising
[http://trengrj.net/2015/04/05/visualising-location-
activity....](http://trengrj.net/2015/04/05/visualising-location-
activity.html). Really enjoy these types of github-like charts.

------
BinaryIdiot
This is nice! I once attempted my own heat map type control that didn't use
d3. It didn't look too bad but it fails pretty hard at the edge cases of
having too many labels, etc and it doesn't look the prettiest. I think my next
attempt will use d3.

BoPattern.js if anyone is interested in seeing my meh attempt
[https://github.com/immuta/bopattern.js](https://github.com/immuta/bopattern.js)

------
BinaryIdiot
Oh I feel I should mention there is yet another d3 based heatmap that I'm
actually working on using right now. Plottable.js. Here are its examples:
[http://plottablejs.org/examples/calendar/](http://plottablejs.org/examples/calendar/)

~~~
darkir
That's really nice! Highlighting the month's data on hover is a cool feature

------
gdulli
I like this and had just started to integrate it into my project when I saw
that in Firefox it doesn't render completely. The month and day of week labels
are cut off: [http://i.imgur.com/CrZyEUt.png](http://i.imgur.com/CrZyEUt.png)
(that's the example code from the github project.) I like the simplicity of it
compared to the other options.

------
aurelianito
I think it would be much better fit for d3 if it received a D3 selection
instead of a selector.

------
clukic
Another to add to the list, this one for my run tracking website.
[http://smashrun.com/chris.lukic](http://smashrun.com/chris.lukic)

