d3 time based heatmap

by Matt Anderson

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<div id = "chartContainer"></div>

CSS

#chartContainer {
    width: 800px;
    height: 250px;
}


#chartContainer > div {
    border: 1px solid #ccc;
}

#chartContainer .background {
    stroke: #ccc;
    stroke-width: 1px;
    fill: white;
}

#chartContainer rect {
    shape-rendering: crispEdges;
    fill: rgb(10, 125, 10);
    stroke-width: 0;
    
}

#chartContainer text {
    font-size: 10px;
    font-family: "Arial";
    fill: black;
}

#chartContainer text.yTick {
    text-anchor: end;
    text-align: right;
}

#chartContainer text.xTick {
    text-anchor: middle;
}

#chartContainer rect.timeBlock:hover {
    stroke: black;
    stroke-opacity: .5;
    stroke-width: 1px;
}

JavaScript

console.clear();
$(function() {
    
    
    var data = [
   [
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":3
      },
      {
         "total":7
      },
      {
         "total":8
      },
      {
         "total":10
      },
      {
         "total":25
      },
      {
         "total":60
      },
      {
         "total":150
      },
      {
         "total":80
      },
      {
         "total":30
      },
      {
         "total":10
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      }
   ],
   [
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":3
      },
      {
         "total":10
      },
      {
         "total":25
      },
      {
         "total":40
      },
      {
         "total":53
      },
      {
         "total":62
      },
      {
         "total":75
      },
      {
         "total":185
      },
      {
         "total":56
      },
      {
         "total":32
      },
      {
         "total":10
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "total":0
      },
      {
         "1":0,
         "2":0,
         "3":0,
         "4":0,
         "5":0,
         "6":0,
         "total":0
      },
      {
         "1":0,
         "2":0,
         "3":0,
         "4":0,
         "5":0,
         "6":0,
        ...