D3 Examples - Heatmap YearHour Calendar 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;
}
.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) )+ ")";} ) ;
​
var rect = svg.selectAll(".day")
    .data(function(d) { return d3.timeHours(new Date(year, d, 1, 00 ), new Date(year,d + 1, 1,23)); })
  .enter().append("rect")
    .attr("class", "day")
    .attr("width", cellSize)
    .attr("height", cellSize)
    .attr("x", function(d) { return (d.getHours() * cellSize)+ (border_margin*4); })
    .attr("y", function(d) { return (d.getDate() * cellSize) + y_hour_rect; })
    .datum(dformat);
​
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>
    