D3 Examples - Calendar-Month/Hour view

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font: 10px sans-serif;
  shape-rendering: crispEdges;
}
​
.day {
  fill: #fff;
  stroke: #ccc;
}
​
.month {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}
​
​
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
​
var width = 960,
    height = 136,
    cellSize = 17; // cell size
var  hour_no= 7,
     day_no=53;
​
var percent = d3.format(".1%"),
    format = d3.timeFormat("%Y-%m-%d"),
    dformat = d3.timeFormat("%d %H")  ;
​
var dw=900,dh=900;
var ho = d3.select("body")
    .append("svg")
    .attr("width", dw)
    .attr("height", dh)
    .attr("background-color",'steelblue')
    .append("g")
    .attr("transform", "translate(" + ((width - cellSize * day_no) / 2) + "," + (height - cellSize * hour_no - 1) + ")");
​
    ho.append("text")
      .attr("transform", "translate(6," + cellSize * 3.5 + ")rotate(-90)")
      .text("xxx");
      //console.log(d3.timeHours(new Date(2017,0,1), new Date(2017,1,1)))
var hrect= ho.selectAll(".day") .data(function(d){ return d3.timeHours(new Date(2017,0,1), new Date(2017,1,1)); })
    .enter().append("rect")
​
    .attr("class", "day")
    .attr("width", cellSize)
    .attr("height", cellSize)
    .attr("y", function(d) { return  d.getDate() * cellSize; })
    .attr("x", function(d) {  return d.getHours() * cellSize; })
    .datum(dformat);
    hrect.append("title")
        .text(function(d){ return d;})
​
​
</script>
    