Calendar-YearHour view

<!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;
}
.monthborder{
 fill: none;
  stroke: #CCC;
  stroke-width: 1px; 
}
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var width = 400,
    height = 450,
    noHour = 24,
    cellSize = 12, // cell size
    border_margin=5,
    y_month_name = 15,
    y_hour_legend = 30,
    y_hour_rect = 25;

var year = 2017;

var months=['JAN','FEB','MAR','APR','MAY','JUN','JULY','AUG','SEP','OCT','NOV','DEC']

var percent = d3.format(".1%"),
    format = d3.timeFormat("%Y-%m-%d");
    dformat = d3.timeFormat("%Y-%m-%d %H")  ;
    formattime =d3.timeFormat("%H")  ;

var svg = d3.select("body").selectAll("svg")
    .data(d3.range(0, 12))
    .enter().append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "RdYlGn")
    .append("g")
    .attr("transform", function(d, i) {return 'translate(20,10)';});

//border
svg.append("rect")
    .attr("width", width - 20)
    .attr("height", height - 20)
    .attr("class", "monthborder")
    .attr("x",2)
    .attr("y",2)
    .attr("transform", "translate(-6,1)");

// Month Name Label
svg.append("text")
    .attr("transform", "translate("+ (width/2)+","+ y_month_name+")")
    .style("text-anchor", "middle")
    .text(function(d) { return months[d]; });

//Legend  Hours
svg.append("g")
        .selectAll("hLegend")        
        .data(d3.range(0,24))
        .enter()
        .append("text")
        .text(function(d){ console.log("text hour: "+d);return d;})
        .attr("transform",  function(d,i){ return "translate( "+ (20 + (d * cellSize) )+ ","+ y_hour_legend+")";} )
        ;
 //Legend   Date
svg.append("g")
        .selectAll("hLegend")            
        .data(function(d) { return d3.timeDays(new Date(year, d, 1), new Date(year,d + 1, 1)); })
        .enter()
        .append("text")
        .text(function(d){ console.log("text hour: "+d);return d.getDate();})
        .attr("transform",  function(d,i){ console.log(d +" :xx: " +i); return "translate(5, "+ (( y_hour_rect + cellSize) + (d.getDate() * cellSize) )+ ")";} ) ;

rect.append("title")
    .text(function(d) { return d; });

</script>

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