SC Heatmap

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <svg height = "500" width = "960" id = "heatmap"> </svg>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    
    var svg = d3.select("#heatmap"),
    margin = {top: 40, right: 80, bottom: 20, left: 60},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var color = d3.scaleSequential(d3.interpolateBlues).domain([0,20]);
    var boxWidth = width/5, boxHeight = height/22;
    var x_o = boxWidth/3, y_o = -5;
    //9 to 5 = 18 half hours, 5 days

g.append("rect")
    	.attr("width",width)
    	.attr("height",height)
    	.attr("x",0)
    	.attr("y",0)
    	.style("fill","lightgrey");
    
    g.append("text")
    	.attr("x",x_o)
    	.attr("y",y_o)
    	.text("Monday");
    
    g.append("text")
    	.attr("x",x_o + boxWidth)
    	.attr("y",y_o)
    	.text("Tuesday");
    
    g.append("text")
    .attr("x",x_o + boxWidth*2)
    	.attr("y",y_o)
    	.text("Wednesday");
    
    g.append("text")
    .attr("x",x_o + boxWidth*3)
    	.attr("y",y_o)
    	.text("Thursday");
    
    g.append("text")
    .attr("x",x_o + boxWidth*4)
    	.attr("y",y_o)
    	.text("Friday");
    
    
    var days = ["Mon","Tues","Wed","Thurs","Fri"];
    
    d3.csv("heatmap_data.csv",function(e,d){
      if (e) { throw e; }
      
      for (i = 0 ; i < 22 ; ++i ) {
        
        g.append("rect")
          .attr("width",boxWidth)
          .attr("height",boxHeight)
          .attr("x", 0)
          .attr("y",boxHeight*i)
          .attr("fill",color(d[i].Mon));
        
        g.append("rect")
          .attr("width",boxWidth)
          .attr("height",boxHeight)
          .attr("x", boxWidth)
          .attr("y",boxHeight*i)
          .attr("fill",color(d[i].Tues));
        
        g.append("rect")
          .attr("width",boxWidth)
          .attr("height",boxHeight)
          .attr("x", boxWidth*2)
          .attr("y",boxHeight*i)
          .attr("fill",color(d[i].Wed));
        
        g.append("rect")
          .attr("width",boxWidth)
          .attr("height",boxHeight)
          .attr("x", boxWidth*3)
          .attr("y",boxHeight*i)
          .attr("fill",color(d[i].Thurs));
        
        g.append("rect")
          .attr("width",boxWidth)
          .attr("height",boxHeight)
          .attr("x", boxWidth*4)
          .attr("y",boxHeight*i)
          .attr("fill",color(d[i].Fri));
      }
    })

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js