Heatmap YearHour Calendar 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 src="https://d3js.org/d3-scale-chromatic.v1.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 = 2014;
var fileName = "data"+year+".csv";

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("%d/%m/%Y %H")  ;
    formattime =d3.timeFormat("%H")  ;

/*var color = d3.scaleQuantize()
    .domain([0, 150])
    .range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));

*/
var color = d3.scaleLinear()
  .domain([0,100])
  .range([ "rgb(255,255,255)","rgb(0, 0, 255)"]);

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] + ' ' + year ; });

//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; });

d3.csv(fileName, function(error, csv) {
  if (error) throw error;

var data = d3.nest()
    .key(function(d) { return d.THEHOUR; })
    .rollup(function(d) { return +d[0].PER; })
    .map(csv);
  console.log("data", data)

rect.filter(function(d) {
    var key = "$" + d;
    //console.log("filter:"+key);
    return key in data; 
  })
     // .attr("class", function(d) { console.log("color" + data["$"+d] +"data:"+ color(data["$"+d])); return "day " + color(data["$"+d]); })
    .style('fill', function(d){ return color(data["$"+d]);})
    .select("title")
      .text(function(d) { return d + ": " + data["$"+d]; });
});
</script>

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

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