538 Tweet Activity Heatmap

Heatmap of activity of the Twitter activity of FiveThirtyEight and its employees. Note that majority activity takes place during working hours.

Inspired by Trulia Trends and this block.

forked from xaranke's block: 538 Tweet Activity Heatmap

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>
      rect.bordered {
        stroke: #E6E6E6;
        stroke-width:2px;   
      }

text.mono {
        font-size: 9pt;
        font-family: Consolas, courier;
        fill: #aaa;
      }

text.axis-workweek {
        fill: #000;
      }

text.axis-worktime {
        fill: #000;
      }
    </style>
    <script src="https://d3js.org/d3.v3.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script type="text/javascript">
      var margin = { top: 50, right: 0, bottom: 100, left: 30 },
          width = 960 - margin.left - margin.right,
          height = 430 - margin.top - margin.bottom,
          gridSize = Math.floor(width / 24),
          legendElementWidth = gridSize*2,
          buckets = 9,
          colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"],
          days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
          times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"];
          datasets = ["hours.csv", "data2.tsv"];

var svg = d3.select("#chart").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 + ")");

var cards = svg.selectAll(".hour")
              .data(data, function(d) {return d.day+':'+d.hour;});

cards.append("title");

cards.enter().append("rect")
              .attr("x", function(d) { return (d.hour - 1) * gridSize; })
              .attr("y", function(d) { return (d.day - 1) * gridSize; })
              .attr("rx", 4)
              .attr("ry", 4)
              .attr("class", "hour bordered")
              .attr("width", gridSize)
              .attr("height", gridSize)
              .style("fill", colors[0]);

cards.transition().duration(1000)
              .style("fill", function(d) { return colorScale(d.value); });

cards.select("title").text(function(d) { return d.value; });
          
          cards.exit().remove();

var legend = svg.selectAll(".legend")
              .data([0].concat(colorScale.quantiles()), function(d) { return d; });

legend.enter().append("g")
              .attr("class", "legend");

legend.append("rect")
            .attr("x", function(d, i) { return legendElementWidth * i; })
            .attr("y", height)
            .attr("width", legendElementWidth)
            .attr("height", gridSize / 2)
            .style("fill", function(d, i) { return colors[i]; });

legend.append("text")
            .attr("class", "mono")
            .text(function(d) { 
            	if (Math.round(d) === 0) { return "≥ 0"; }; return "≥ " + Math.round(d) + "00"; })
            .attr("x", function(d, i) { return legendElementWidth * i; })
            .attr("y", height + gridSize);

legend.exit().remove();

});  
      };

heatmapChart(datasets[0]);
      
    </script>
  </body>
</html>

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

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