5 ms·

D3 heatmap representing time series data similar to GitHub's contribution chart

128 points by sebg 11y ago

harlanlewis 11y ago
How does this compare with cal-heatmap? http://cal-heatmap.com http://cal-heatmap.com
- trengrj 11y ago
  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.html http://trengrj.net/2015/04/05/visualising-location-activity..... Really enjoy these types of github-like charts.
BinaryIdiot 11y ago
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 11y ago
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 11y ago
  That's really nice! Highlighting the month's data on hover is a cool feature
dsilver 11y ago
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
dmourati 11y ago
See also Google's Calendar Chart. https://developers.google.com/chart/interactive/docs/gallery/calendar#a-simple-example https://developers.google.com/chart/interactive/docs/gallery...
aurelianito 11y ago
I think it would be much better fit for d3 if it received a D3 selection instead of a selector.
clukic 11y ago
Another to add to the list, this one for my run tracking website. http://smashrun.com/chris.lukic http://smashrun.com/chris.lukic
darkir 11y ago
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!
gdulli 11y ago
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.

128 points by sebg 11y ago

harlanlewis 11y ago

How does this compare with cal-heatmap? http://cal-heatmap.com http://cal-heatmap.com

trengrj 11y ago
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.html http://trengrj.net/2015/04/05/visualising-location-activity..... Really enjoy these types of github-like charts.

BinaryIdiot 11y ago

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 11y ago

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 11y ago
That's really nice! Highlighting the month's data on hover is a cool feature

dsilver 11y ago

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

dmourati 11y ago

See also Google's Calendar Chart. https://developers.google.com/chart/interactive/docs/gallery/calendar#a-simple-example https://developers.google.com/chart/interactive/docs/gallery...

aurelianito 11y ago

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

clukic 11y ago

Another to add to the list, this one for my run tracking website. http://smashrun.com/chris.lukic http://smashrun.com/chris.lukic

darkir 11y ago

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!

gdulli 11y ago

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.