d3-returntimemap

Timemaps of my latest tweets with d3-returntimemap. Plain version and heatmap version with d3-heatmap.

The peak around the 8 hour mark is due to my use of Buffer.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/fabid/d3-heatmap/heatmap.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/fabid/d3-returntimemap/returntimemap.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:50%; height: 100% }
    line {stroke-width: 1px; stroke: black;}
    path {stroke-width: 1px;}
  </style>
</head>

d3.csv('tweets.csv', function(error, data){
      var margin = {
        top: 20,
        right: 20,
        bottom: 80,
        left: 80
      };
      var dim = 480;
      var width = dim - margin.left - margin.right;
      var height = dim - margin.top - margin.bottom;
      var format = d3.time.format("%Y-%m-%d %H:%M:%S");
      var dateAccessor = function (d) {return format.parse(d.date)};

var timemap = d3.returntimemap()
      								.values(dateAccessor);
      
      var timemapData = timemap(data);
 
      var svg = d3.select('body')
        .append('svg')
        .attr('width', dim)
        .attr('height', dim);
      
      var scatter = svg.append('g');

svg.append("text")
            .attr("text-anchor", "middle")
            .attr("transform", "translate("+ (margin.left/5) +","+(3*height/4)+")rotate(-90)")
      			.style('font-family', 'sans-serif')
            .text("Time after event");
      svg.append("text")
            .attr("text-anchor", "middle")
            .attr("transform", "translate("+ (width/2) +","+(height + margin.top + margin.bottom/2)+")")
      			.style('font-family', 'sans-serif')
            .text("Time before event"); 
           
      var size = 5;
      var heatmap = d3.heatmap()
        .std(2)
      	.x(function(d) { return xScale(d.x); })
        .y(function(d) { return yScale(d.y); })
        .dx(size)
        .dy(size);
      
      // the result of the heatmap layout
      var heatmapData = heatmap(timemapData);

})
  </script>
</body>

Updated missing url https://cdn.rawgit.com/fabid/d3-heatmap/master/heatmap.js to https://cdn.jsdelivr.net/gh/fabid/d3-heatmap/heatmap.js

Updated missing url https://cdn.rawgit.com/fabid/d3-returntimemap/master/returntimemap.js to https://cdn.jsdelivr.net/gh/fabid/d3-returntimemap/returntimemap.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdn.rawgit.com/fabid/d3-heatmap/master/heatmap.js

https://cdn.rawgit.com/fabid/d3-returntimemap/master/returntimemap.js

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