D3 Examples - tweets with d3 nesting

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%;}
  </style>
</head>
​
<body>
  <svg />
  <script>
    var width = 600;
    var height = 300;
    var margin = {top: 20, bottom:20, left:20, right:20};
    
    d3.json("tweets.json", (err, data) => {
      if (err) {
        console.log("Error: ", err);
      } else {
        dataViz(data.tweets);
      } 
    });
    
    function dataViz(incomingData) {
      
      var nestedTweets = d3.nest()
        .key(d => d.user)
        .entries(incomingData);
      
      nestedTweets.forEach(d => {
        d.numTweets = d.values.length;
      });
      
      var maxTweets = d3.max(nestedTweets, d => d.numTweets);
      var yScale = d3.scaleLinear()
        .domain([0, maxTweets])
        .range([margin.bottom, height - margin.top]);
      
      
      d3.select("svg").selectAll("rect")
        .data(nestedTweets)
        .enter()
        .append("rect")
        .attr("width", 50)
        .attr("height", d => yScale(d.numTweets))
        .attr("x", (d, i) => margin.left + i * 60)
        .attr("y", d => height - yScale(d.numTweets))
        .style("fill",   "#FE9922")
        .style("stroke", "#9A8B7A")
        .style("stroke-width", "1px");
    };
    
    
​
  </script>
</body>
​
    