Built with blockbuilder.org
xxxxxxxxxx
<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