Instantly share code, notes, and snippets.

Embed
What would you like to do?
Github's Calendar Grid
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<style>
/* Cal-HeatMap CSS */
.graph
{
clear: both;
display: block;
margin-top: 10px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}
.graph-label
{
fill: #999;
font-size: 10px
}
.neutral {
background-color: #eee;
fill: #eee;
shape-rendering: crispedges;
}
.green
{
background-color: #00A550;
fill: #00A550;
}
.red {
background-color: #ED1C24;
fill: #ED1C24;
}
.neutral:hover, .green:hover, .red:hover
{
stroke: #000;
stroke-width: 1px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Add your site or application content here -->
<div id='svg'></div>
<script src='//cdnjs.cloudflare.com/ajax/libs/d3/3.1.6/d3.min.js'></script>
<script>
d3.select("#svg").append("svg")
.attr("class", "graph");
var w = function(d) {
return 10;
};
// Compute the height of the domain block
var h = function(d) {
return 130;
};
var domainsWidth = [], width = 0;
var positionX = function(i) {
return width === 0 ? domainsWidth[i] : domainsWidth[i+1];
};
var d = new Date();
d.setFullYear(d.getFullYear() - 1);
var weekStart;
if (d.getDay() === 1) {
weekStart = new Date(d.getFullYear(), d.getMonth(), d.getDate());
} else if (d.getDay() === 0) {
weekStart = new Date(d.getFullYear(), d.getMonth(), d.getDate());
weekStart.setDate(weekStart.getDate() - 6);
} else {
weekStart = new Date(d.getFullYear(), d.getMonth(), d.getDate()-d.getDay()+1);
}
var endDate = new Date(weekStart);
var stop = new Date(endDate.setDate(endDate.getDate() + 52 * 7));
var eachWeek = d3.time.sundays(Math.min(weekStart, stop), Math.max(weekStart, stop));
// Painting all the domains
var domainSvg = d3.select("#svg .graph")
.attr("height", 130)
.selectAll("svg")
.data(eachWeek);
var tempWidth = 0;
var tempLastDomainWidth = 0;
var svg = domainSvg
.enter()
.insert("svg:svg")
.attr("width", function(d){
var wd = w(d) + 2;
tempWidth += tempLastDomainWidth = wd + 5;
if (width === 0) {
domainsWidth.push(tempWidth - tempLastDomainWidth);
} else {
domainsWidth.push(width);
}
return wd;
})
.attr("height", function(d) { return h(d);})
.attr("x", function(d, i){ return positionX(i); })
;
var legendFormat = d3.time.format('%b');
// Appending a label to each domain
var label = d3.select("#svg .graph").selectAll("text")
.data(eachWeek, function(d) { return d;});
label
.enter().insert("text")
.attr("y", 113)
.attr("x", function(d, i){ return positionX(i) - 10; })
.attr("class", "graph-label")
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.text(function(d) {
var date = new Date(d);
if(date.getDate() <= 7)
return legendFormat(date);
});
function getDayDomain(d) {
var start = new Date(d.getFullYear(), d.getMonth(), d.getDate());
var stop = new Date(start);
stop = new Date(stop.setDate(stop.getDate() + 7));
return d3.time.days(Math.min(start, stop), Math.max(start, stop));
}
// Drawing the sudomain inside each domain
var rect = domainSvg.selectAll("rect")
.data(function(d) { return getDayDomain(d); })
.enter().append("svg:rect")
.attr("class", "graph-rect")
.attr("class", "neutral")
.attr("width", 10)
.attr("height", 10)
.attr("x", function(d) { return 1; })
.attr("y", function(d, i) { return i * 15 + 1; })
.on('click', function() {
d3.select(this).attr('class', 'green');
});
;
// Appeding a title to each subdomain
rect.append("svg:title").text(function(d){ return d3.time.format('%x')(d); });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment