D3 heatmap json

by ckissi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://fonts.googleapis.com/css?family=Open+Sans:300,400"></script>
<div id="pdmCheckins"></div>

JavaScript

///////////////////////////////////////////////////////////////////////////
//////////////////// Set up and initiate svg containers ///////////////////
///////////////////////////////////////////////////////////////////////////	


d3.json("http://www.wearatoms.dev/analytics/mailchimp/heatmapsjson", function(error, checkins) {
  if (error) throw error;
  
var days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
  times = d3.range(24);

var margin = {
  top: 170,
  right: 50,
  bottom: 70,
  left: 50
};

var width = Math.max(Math.min(window.innerWidth, 1000), 500) - margin.left - margin.right - 20,
  gridSize = Math.floor(width / times.length),
  height = gridSize * (days.length + 2);

//SVG container
var svg = d3.select('#pdmCheckins')
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//Reset the overall font size
var newFontSize = width * 62.5 / 900;
d3.select("html").style("font-size", newFontSize + "%");

///////////////////////////////////////////////////////////////////////////
//////////////////////////// Draw Heatmap /////////////////////////////////
///////////////////////////////////////////////////////////////////////////

//Based on the heatmap example of: http://blockbuilder.org/milroc/7014412

var colorScale = d3.scale.linear()
  .domain([0, d3.max(checkins, function(d) {
    return d.count;
  }) / 2, d3.max(checkins, function(d) {
    return d.count;
  })])
  .range(["#FFFFDD", "#3E9583", "#1F2D86"])
  //.interpolate(d3.interpolateHcl);

var dayLabels = svg.selectAll(".dayLabel")
  .data(days)
  .enter().append("text")
  .text(function(d) {
    return d;
  })
  .attr("x", 0)
  .attr("y", function(d, i) {
    return i * gridSize;
  })
  .style("text-anchor", "end")
  .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
  .attr("class", function(d, i) {
    return ((i >= 0 && i <= 4) ?...