D3 Examples - Calendar-YearHour 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>
​
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) )+ ")";} ) ;
​
var rect = svg.selectAll(".day")
    .data(function(d) { return d3.timeHours(new Date(2017, d, 1, 00 ), new Date(2017,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(formattime);
​
rect.append("title")
    .text(function(d) { return d; });
​
</script>
    