Scatter Plot for tweets

Size of the bubble is based on number of retweets and favorites

color scale from light blue to dark blue where light shade being less impactful and darker shade being more impactful

location of the bubble on the x axis is based on timestamp of the tweet and y axis is impact of the tweet

<!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>
  <script>
    var width = 960;
    var height = 500;
    var margin = {top: 40, bottom:40, left:40, right:40};
    
    d3.json("tweets.json", (err, data) => {
      if (err) {
        console.log("Error: ",err);
      } else {
        dataViz(data.tweets);
      }
    });
    
    function dataViz(incomingData) {
      
      incomingData.forEach(d => {
        d.impact = d.retweets.length + d.favorites.length;
        d.tweetTime = new Date(d.timestamp);
//         console.log(d.tweetTime);
      })
      
      var maxImpact = d3.max(incomingData, d => d.impact);
      var startEnd = d3.extent(incomingData, d => d.tweetTime);
      var timeRamp = d3.scaleTime()
      		.domain(startEnd)
      		.range([margin.left, width - margin.right]);
      var yScale = d3.scaleLinear()
                  .domain([0, maxImpact])
      						.range([margin.bottom, height - margin.top]);
      
      var radiusScale = d3.scaleLinear()
      										.domain([0, maxImpact])
      										.range([0,20]);
      var colorScale = d3.scaleLinear()
      										.domain([0, maxImpact])
      										.range(["#B3E5FC", "#01579B"]);
      
      var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .selectAll("g")
      .data(incomingData)
      .enter()
      .append("g")
      .attr("transform", d =>
           "translate(" + 
           				timeRamp(d.tweetTime) + "," + (height - yScale(d.impact))
           + ")"
           );
      
      svg.selectAll("circle")
      		.data(incomingData)
      		.enter()
      		.append("circle")
      		.attr("r", d => radiusScale(d.impact))
//       		.attr("cx", d => timeRamp(d.tweetTime))
//       		.attr("cy", d => height - yScale(d.impact))
      		.attr("fill", d => colorScale(d.impact))
      		.attr("stroke", "#7C8B9A")
      		.attr("stroke-width", "1px");
      svg.append("text")
      	.text(d => d.user + "-" + d.tweetTime.getHours());
    };
  </script>
</body>

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