Skip to content

Instantly share code, notes, and snippets.

@qazwsxedc121

qazwsxedc121/index.html

Last active February 2, 2017 12:29
Show Gist options
  • Save qazwsxedc121/10259234 to your computer and use it in GitHub Desktop.
Save qazwsxedc121/10259234 to your computer and use it in GitHub Desktop.
Download ZIP
implement of github commit calender graph using d3.js
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body>
<svg id="svg" width="800" height="86">
</svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
function show_calendar_graph(){
var dataset = [[0,10,20,10,30,10,30],[10,40,50,50,10]];
var svg = d3.select("#svg");
svg.style("border","solid 1px black");
var g = svg.selectAll("g");
var g1 = g.data(dataset).enter().append("g");
g1.attr("transform",function(d, i) { return "translate("+(i * 12 + 2)+",0)"});
var rect = g1.selectAll("rect");
var rect_each = rect.data(function(d){ return d;})
.enter().append("rect");
rect_each.style("fill",function(d){
var p = Math.floor( 80 * (50 - d) / 50) ;
return "hsl(120,80%,"+ (p + 15) +"%)";
}).attr("width","10").attr("height","10")
.attr("transform",function(d,i){ return "translate(0," + (i * 12 + 2) + ")"}).text(function(d){return d;})
.on("mouseover",function(d){
d3.select(this).transition().style("stroke","black");
}).on("mouseout",function(d,i){
d3.select(this).transition().style("stroke","");
});
}
document.ready = function(){
show_calendar_graph();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment