d3 | reusable heatmap calendar

Calendar heatmap adapted into a reusable chart for quick testing

loading of ~~CSV~~ json data, which is then quantized into a diverging color scale. The values are visualized as coloured cells per day. Days are arranged into columns by week, then grouped by month and years.

source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>d3 | reusable heatmap calendar</title> 
  <meta name="author" content="Sundar Singh | eesur.com">
  
  <link rel="stylesheet" href="main.css">
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js" charset="utf-8"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
</head>
<body>

// create chart
      var heatChart = d3.eesur.heatmap()
          .colourRangeStart('#FDBB30')
          .colourRangeEnd('#EE3124')
          .height(800)
          .startYear('2011')
          .endYear('2016')
          .on('_hover', function (d, i) {
              var f = d3.time.format('%B %d, %Y');
              d3.select('#info')
                  .text(function () {
                      return 'date: ' + f(d) + ' | value: ' + nestedData[d];
                  });
          });

// apply after nesting data
      d3.json('heatmap_data.json', function(error, data) {

if (error) return console.warn(error);
        
          nestedData = d3.nest()
              .key(function (d) { return parseDate(d.date.split(' ')[0]); })
              .rollup(function (n) { 
                  return d3.sum(n, function (d) { 
                      return d.amount; // key
                  }); 
              })
              .map(data);

// console.log(nestedData);

// render chart
          d3.select('#heatmap')
              .datum(nestedData)
              .call(heatChart);

});

}());

d3.select(self.frameElement).style('height', '900px');

</script>

</body>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js