D3 Examples - Heatmap Calendar ( Vertical )

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#calendar {
  margin: 20px;
}
.month {
  margin-right: 8px;
}
.month-name {
  font-size: 85%;
  fill: #777;
  font-family: Arial, Helvetica;
}
​
  .day-title {
    font-size: 75%;
     fill: #777;
    font-family: Arial, Helvetica;
  }
  
.day.hover {
  stroke: #6d6E70;
  stroke-width: 2;
}
.day.focus {
  stroke: #ffff33;
  stroke-width: 2;
}
</style>
<body>
​
<div id="calendar"></div>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
​
function drawCalendar(myData) {
  
  var calendarRows = function(month) {
    var m = d3.timeMonth.floor(month);
    return d3.timeWeeks(d3.timeWeek.floor(m), d3.timeMonth.offset(m,1)).length;
  }
​
  var minDate = d3.min(myData, function(d) { return new Date(d.submissionTime); });
  var maxDate = d3.max(myData, function(d) { return new Date(d.submissionTime); });
​
  // CELL SIZE
  var cellMargin = 2,
      cellSize = 20;
  
  // top of calendar days away from Title
  var dayTopMargin = 50;
​
  var day = d3.timeFormat("%w"),
      week = d3.timeFormat("%U"),
      format = d3.timeFormat("%Y-%m-%d"),
      titleFormat = d3.utcFormat("%a, %d-%b"),
      monthName = d3.timeFormat("%B"),
      months= d3.timeMonth.range(d3.timeMonth.floor(minDate), maxDate);
  
//   console.log(months);
  
  for(var i=0; i<myData.length; i++){
    myData[i].today =  myData[i].submissionTime.slice(0,10);
  }
​
  console.log(d3.select("#calendar").selectAll("svg"));
  
  // EACH MONTH BLOCK
    var svg = d3.select("#calendar").selectAll("svg")
    .data(months)
    .enter().append("svg")
      .attr("class", "month")
      .attr("width", (cellSize * 7) + (cellMargin * 8) )
      .attr("height", function(d) {
        var rows = calendarRows(d);
        return (cellSize * rows) + (cellMargin * (rows + 1)) + dayTopMargin; // the 20 is for the month labels
      })
    .append("g");
​
  
  // MONTH NAME
  svg.append("text")
    .attr("class", "month-name")
    .attr("x", ((cellSize * 7) + (cellMargin * 8)) / 2 )
    .attr("y", 15)
    .attr("text-anchor", "middle")
    .text(function(d) { return monthName(d); })
  
  // DAY TITLES
  var dayTitles = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
//   console.log(dayTitles);
  
  svg
    .selectAll("text.day-title")
    .data(dayTitles)
    .enter()
    .append("text") 
    .attr("class", "day-title")
    .attr("width", cellSize)
    .attr("height", cellSize)
    .attr("x", function(d, i) {
      return i * (cellSize + cellMargin) + 12;
    })
    .attr("y", 45)
    .attr("text-anchor", "middle")
    .text(function(d) { 
      return d; })
 
​
  // EACH DAY BLOCK
  var rect = svg.selectAll("rect.day")
    .data(function(d, i) {
      return d3.timeDays(d, new Date(d.getFullYear(), d.getMonth()+1, 1));
    })
    .enter().append("rect")
      .attr("class", "day")
      .attr("width", cellSize)
      .attr("height", cellSize)
      .attr("rx", 3).attr("ry", 3) // rounded corners
      .attr("fill", '#ccc') // default light grey fill
      .attr("x", function(d) {
        return (day(d) * cellSize) + (day(d) * cellMargin) + cellMargin;
      })
      .attr("y", function(d) {
        return ((week(d) - week(new Date(d.getFullYear(),d.getMonth(),1))) * cellSize) +
               ((week(d) - week(new Date(d.getFullYear(),d.getMonth(),1))) * cellMargin) +
               cellMargin + dayTopMargin;
       })
      .on("mouseover", function(d) {
        d3.select(this).classed('hover', true);
      })
      .on("mouseout", function(d) {
        d3.select(this).classed('hover', false);
      })
      .datum(format);
​
  rect.append("title")
    .text(function(d) { return titleFormat(new Date(d)); });
​
  var lookup = d3.nest()
    .key(function(d) { return d.today; })
    .rollup(function(leaves) { return leaves.length; })
    .object(myData);
  
//   console.log(lookup); 
​
  count = d3.nest()
    .key(function(d) { return d.today; })
    .rollup(function(leaves) { return leaves.length; })
    .entries(myData);
  
//   console.log(count); 
  
  var colourRangeStart = '#fae9e9',
            colourRangeEnd = '#d62728';
  
  var colour = d3.scaleLinear()
                                    .domain(d3.extent(count, function(d) { return d.value; }))
                    .range([colourRangeStart, colourRangeEnd]);
​
  scale = d3.scaleLinear()
    .domain(d3.extent(count, function(d) { return d.value; }))
    .range([0,1]); // the interpolate used for color expects a number in the range [0,1] but i don't want the lightest part of the color scheme
​
  rect.filter(function(d) { return d in lookup; })
//     .style("fill", function(d) { console.log(colour(lookup[d])); return d3.interpolatePuBu(colour(lookup[d])); })
  .style("fill", function(d) {  return colour(lookup[d]); })
    .classed("clickable", true)
    .on("click", function(d){
      if(d3.select(this).classed('focus')){
        d3.select(this).classed('focus', false);
      } else {
        d3.select(this).classed('focus', true)
      }
      // doSomething();
    })
    .select("title")
      .text(function(d) { return titleFormat(new Date(d)) + ":  " + lookup[d]; });
​
}
​
d3.csv("submissions.csv", function(response) {
  drawCalendar(response);
})
​
</script>
</body>
    