D3 heatmap representing time series data similar to GitHub's contribution chart | Hacker News Reader

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

github.com

128 pointssebg11 comments

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

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!

See also Google's Calendar Chart.

https://developers.google.com/chart/interactive/docs/gallery...

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

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..... Really enjoy these types of github-like charts.

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

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/

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

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 (that's the example code from the github project.) I like the simplicity of it compared to the other options.

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

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

Reply on news.ycombinator.com