scatterPlot

<!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; }
  </style>
</head>

<body>
  <svg></svg>
  <script>
    d3.json('tweets.json',function(err,data){
            dataViz(data.tweets);
            });

function dataViz(incomingData) {
incomingData.forEach(d => {
d.impact = d.favorites.length + d.retweets.length; 
d.tweetTime = new Date(d.timestamp); 
})
var maxImpact = d3.max(incomingData, d =>d.impact);
var startEnd = d3.extent(incomingData, d => d.tweetTime); 
var timeRamp = d3.scaleTime().domain(startEnd).range([20,480]); 
var yScale = d3.scaleLinear().domain([0,maxImpact]).range([0,460]);
var radiusScale = d3.scaleLinear()
.domain([0,maxImpact]).range([1,20]);
var colorScale = d3.scaleLinear()
.domain([0,maxImpact]).range(["white","#75739F"]); 
d3.select("svg")
.selectAll("circle")
.data(incomingData)
.enter()
.append("circle")
.attr("r", d =>radiusScale(d.impact)) 
.attr("cx", d =>timeRamp(d.tweetTime))
.attr("cy", d =>480 - yScale(d.impact))
.style("fill", d =>colorScale(d.impact))
.style("stroke", "black")
.style("stroke-width", "1px");
};
  </script>
</body>

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