There is a wonderful contributions chart that github.com came with.
Does anybody know if they use some kind of library or gem?
If it is open source, I would like to use it my project as well. It looks great!
Asked
Active
Viewed 1.2k times
56
-
4I'm sure they would tell you if you ask them. – Felix Kling Jan 24 '13 at 18:04
-
How am I supposed to ask? Do they have some kind of Q&A? I couldn't find. – Alex Smolov Jan 24 '13 at 18:30
-
1https://github.com/support – Felix Kling Jan 24 '13 at 18:31
-
1See also https://github.com/k4rthik/git-cal, that I reference in http://stackoverflow.com/a/15988356/6309 – VonC Sep 27 '13 at 06:59
-
Check out Cal-heatmap – Ihab Shoully Feb 28 '15 at 22:02
-
if you use react, here's a react component for it: http://patientslikeme.github.io/react-calendar-heatmap/ – Kevin Qi May 22 '16 at 03:18
-
this might be what you're looking for: https://github.com/2016rshah/githubchart-api which has the gem and you can display the chart pointing to your own repo within an img tag without installing anything – headwinds Jan 20 '17 at 14:48
2 Answers
49
Not exactly the same style, but I think it's done using the calendar example of D3.js.
If you do a "View Source" on GitHub's page, you'll see that they're using D3 for rendering their calendar.
A similar look is achieved by js-chart-widgets.
Mesut Tasci
- 2,970
- 1
- 30
- 36
Ismael Ghalimi
- 3,515
- 2
- 22
- 25
-
24I just put together a d3.js plugin for that : https://github.com/kamisama/cal-heatmap. Still in beta and some quirks in Firefox, but it has some nice features – Wa0x6e Mar 07 '13 at 05:15
-
@Kamisama Thanks.Your plugin will save me countless hours. – Akshat Jiwan Sharma Apr 10 '13 at 10:26
-
@Kamisama brilliant work and excellent documentation! Just as a side note, would like to add, that would be awesome if you could add functionality that picks the start date (let's say 15th of September 2016) and calendar is populated from that day till 15 of September 2017). So you would have ranges 15 - 31 in first block, and 1 - 14 in the last block (all of this assumes 1 year date range and month/day as domain/subdomain) – Arthur S. Sep 01 '16 at 18:00
2
The Github Contributions calendar is using D3. If you inspect your network traffic you'll see the request for the JS and you can look through the source yourself.
EDIT: I've removed the source link as the CDN url is likely to change over time. It should still be locatable if you take a look with your web inspector.
Tyler Hughes
- 469
- 2
- 5
-
Broken URL - maybe update it to something that will not break based on CDN changes? – karlbecker_com Jan 21 '14 at 15:54