tweets with d3 nesting

Using tweets.json data to visualize by author

Used the d3 nesting to group data by authors

<!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>

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