Day/Hour PageView Heatmap for Keen.io

<!DOCTYPE html>
<html>
  <head>
    <title>PageView Grid</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
    <script>
      var Keen=Keen||{configure:function(e){this._cf=e},addEvent:function(e,t,n,i){this._eq=this._eq||[],this._eq.push([e,t,n,i])},setGlobalProperties:function(e){this._gp=e},onChartsReady:function(e){this._ocrq=this._ocrq||[],this._ocrq.push(e)}};(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"https://")+"dc8na2hxrj29i.cloudfront.net/code/keen-2.1.0-min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
      Keen.configure({
        projectId: "<your-projectId>",
        readKey: "<your-readKey>"
      });
      
      Keen.onChartsReady(function() {
        var pageViews_hourly = new Keen.Series("pageView", {
          analysisType: "count",
          timeframe: "this_7_days",
          interval: "hourly"
        });
        pageViews_hourly.getResponse(function(data){
          stackedTimeline(data);
        });
      });
      
      var stackedTimeline = function(data){

// data.result.value
        // data.result.timeframe.start
        // data.result.timeframe.end

var unit = 35
          , width = 960
          , height = 400;

var days = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
        var day = d3.time.format('%w')
          , hour = d3.time.format('%H')
          , time = d3.time.format('%I:%M')
          , format = d3.time.format.utc('%Y-%m-%dT%H:%M:%S.%LZ');

// Scale activity for Opacity
        var heat = d3.scale.quantize()
          .domain([0, d3.max(data.result, function(d){ return d.value; })])
          .range(d3.range(100).map(function(d) { return d/100; }));

// Convert dates and scale activity
        data.result.forEach(function(d){
          var now = new Date();
          var then = new Date(d.timeframe.start);
          var iso = then.toISOString();
          d.date = format.parse(iso);

var first_day = d3.min(data.result, function(d) { return d.date })
          , timeframe = _.rest(days, day(first_day))
          , offset = days.length - timeframe.length
          , remainder = days.slice(0,offset)
          , date_range = timeframe.concat(remainder);
          // console.log(date_range);

var svg = d3.select("#pageview_grid")
          .append("svg")
          .attr('width', width)
          .attr('height', height)

var intervals = svg.append("g")
          .attr('class', 'intervals')
          .attr('transform', 'translate(' + unit + ',' + (unit/2) + ')')

var date_label = intervals.selectAll('g.dates')
          .data(date_range)
          .enter().append('g')
          .attr('class', 'dates')
          .attr('transform', function(d,i){ return 'translate(' + -1*unit + ',' + (i*unit) + ')' })
          .append('text')
            .attr('dy', unit/2*1.3)
            .attr('dx', unit/2)
            .attr('font-size', unit/2*1.2)
            .attr('font-weight', 'bold')
            .attr('text-anchor', 'middle')
            .text(function(d){ return d })

var time_label = intervals.selectAll('g.times')
          .data(['12a', '3a', '6a', '9a', '12p', '3p', '6p', '9p'])
          .enter().append('g')
          .attr('class', 'times')
          .attr('transform', function(d,i){ return 'translate(' + (i*(unit*3)) + ',' + unit*7.5 + ')' })
          .append('text')
            .attr('dy', 0)
            .attr('dx', unit/2*.8)
            .attr('fill', '#808080')
            .attr('font-size', unit/2*1.1)
            .attr('font-weight', 'normal')
            .attr('text-anchor', 'middle')
            .text(function(d){ return d })

interval.append('svg:title').text(function(d){
          return time(d.date) + ' | ' + d.value; 
        });
      }
      
    </script>
    <style>
      body { font-family: Helvetica, Arial, sans-serif }
    </style>
  </head>
  <body>
    <div id="pageview_grid"></div>
  </body>
</html>

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

Modified http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js to a secure url

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

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js