D3 Examples - Vertical d3 Calendar

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>d3 Calendar</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
</head>
<body>  
   <!--<h1 id='calendar_view'>Calendar View</h1>-->
   
  <div class='gallery' id='chart'> </div><link href='calendar.css' rel='stylesheet' type='text/css' /><link href='colorbrewer.css' rel='stylesheet' type='text/css' />
    <script type='text/javascript'>
var m = [20, 20, 890, 19], // top right bottom left margin
    //w = 960 - m[1] - m[3], // width
    //h = 136 - m[0] - m[2], // height
    w = 650 - m[1] - m[3], // width
    h = 960 - m[0] - m[2], // height
    z = 11; // cell size
​
var day = d3.time.format("%w"),
    week = d3.time.format("%U"),
    percent = d3.format(".1%"),
    format = d3.time.format("%Y-%m-%d");
​
var color = d3.scale.quantize()
    .domain([5, 32])
    .range(d3.range(9));
​
    
var svg = d3.select("#chart").selectAll("svg")
    .data(d3.range(2007, 2008))
    .enter().append("svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
    .attr("class", "BuPu")
    
​
    .append("g")
    
    .attr("transform", "translate(" + (m[3] + (w - z * 53) / 2) + "," + (m[0] + (h - z * 7) / 2) + ")");
​
svg.append("text")
    .attr("transform", "translate(-6," + z * 3.5 + ")rotate(-90)")
    .attr("text-anchor", "middle")
    
    .text(String);
​
var rect = svg.selectAll("rect.day")
    .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
    .enter().append("rect")
    .attr("class", "day")
    .attr("width", z)   
    .attr("height", z)
    .attr("x", function(d) { return day(d) * z; })
    .attr("y", function(d) { return week(d) * z; })
    .datum(format);
​
rect.append("title")
    .text(function(d) { return d; });
​
svg.selectAll("path.month")
    .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
    .enter().append("path")
    .attr("class", "month")
    .attr("d", monthPath);
//read in csv data and map to svg
d3.csv("RSAtest.csv", function(csv) {
  var data = d3.nest()
    .key(function(d) { return d.date; })
    .rollup(function(d) { return d[0].total; })
    .map(csv);
  
        
​
  rect.filter(function(d) { return d in data; })
      .attr("class", function(d) { return "day q" + color(data[d]) + "-9"; })
      .select("title")
      .text(function(d) { return d + ": " + data[d]; });
});
​
function monthPath(t0) {
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
      d0 = +day(t0), w0 = +week(t0),
      d1 = +day(t1), w1 = +week(t1);
  return "M" + (d0) * z + "," + (w0 + 1) * z
      + "V" + w0 * z 
      + "H" + 7 * z
      + "V" + w1 * z 
      + "H" + (d1 + 1) * z
      + "V" + (w1 + 1) * z 
      + "H" + 0
      + "V" + (w0 + 1) * z 
      + "Z";
}
</script>
</body>
</html>
    