Github Punchcard

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    text { font-family: verdana, 'sans-serif'; font-size: 14px } 
    .hours text { text-anchor: middle; font-size: 12px; }
    line { stroke: #c8c8c8; }
  </style>
</head>

<body>
  <script>
   
    var weekday=new Array(7);
    weekday[0]="Monday";
    weekday[1]="Tuesday";
    weekday[2]="Wednesday";
    weekday[3]="Thursday";
    weekday[4]="Friday";
    weekday[5]="Saturday";
    weekday[6]="Sunday";
    
    var sizeScale = d3.scale.linear().domain([0,1]).range([0,10]);
    var yScale = d3.scale.linear().domain([0, weekday.length - 1]).range([50,500]);
    var xScale = d3.scale.linear().domain([0,23]).range([140,900]);
        
    var hourRange = d3.range(0,24);
    var weekData = [];    
   	for (var d = 0; d<weekday.length; d++)
      {
        var hourData = hourRange.map(function(d) { 
          return {
            hour: d,
            intensity: Math.random()
          }});
        
        weekData.push({ 
          day: d,
          dayName: weekday[d],
          hours: hourData
        });
      }
    
    var offset = function(d,offset) { 
    	return offset + d*offset;
    }
    
    var svg = d3.select("body").append("svg");
    svg.selectAll(".day")
      .data(weekData)
      .enter()
    	.append("g").classed("day",true)
    	.each(function(dw)
      {
				d3.select(this).selectAll("circle").data(dw.hours).enter()
        	.append("circle")
          .attr({
              cx: function(d) { return xScale(d.hour); }, 
              cy: function(d) { return yScale(dw.day); }, 
              r: 0
            }).transition() 
        		.attr("r",function(d){ return sizeScale(d.intensity); } );
      
      	d3.select(this).append("text").attr({
          x: 10,
          y: function(d) { return sizeScale.range()[1]/2 + yScale(dw.day); }, 
        }).text(dw.dayName);
      
      d3.select(this).append("line").attr({
          x1: 10,
          x2: xScale(23),
        	y1: function(d) { return 30 + yScale(dw.day); },
        	y2: function(d) { return 30 + yScale(dw.day); }
        });
        
      	d3.select(this).selectAll(".tick").data(dw.hours).enter()
      	.append("line").classed("tick",true)
        .attr({
            x1: function(d) { return xScale(d.hour); },
            x2: function(d) { return xScale(d.hour); },
            y1: function(d) { return 20 + yScale(dw.day); }, 
            y2: function(d) { return 30 + yScale(dw.day); }
          });
    });
    
    var hours = svg.append("g")
    	.classed("hours", true)
      .selectAll("text").data(hourRange).enter()
      .append("text").attr({
        x: function(d) { return xScale(d); },
        y: function(d) { return 60 + yScale(weekday.length-1); }
    	}).text(function(d) { return d + "h";});
      
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js