Animation Scatter Plot

Transition and update scattor plot

data source: Renewable Energy Projects from world bank

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style type = "text/css">
    svg{
      border: 1px solid rgb(93,39,200)
      text{
    font-size: 14px
    }
    circle {
  fill-opacity: 0.8;
}
  </style>
</head>

<body>
  <script type="text/javascript">
		var xdim = "investmen_Loan",
    ydim = "investment_approved",
    colordim = "Sector";

var margin = { top: 15, right: 12, bottom: 33, left: 50 },
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var data;
    var xScale = d3.scaleLinear();
    var yScale = d3.scaleLinear();
    var duration = 1500;
    var year = 2002;

var chart = d3.select("body")
        .append("div")

var header = chart.append("h2")
    // .datum(nested[3]); // add data to the chart

var svg = 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] + ")");

function update(){
      var filteredData = data.filter(function(d){
        return d.year === year;
      });

var headers = header.text(year)

headers.exit()
        .transition().duration(duration)
      .remove();

var header_enter = headers
          .enter().append('h2')

header_enter.transition()
          .delay(function(d, i) {console.log(i, d); return i * 100})
          .duration(duration)

headers.transition()
          .duration(duration)

// already know what data we have        )

// circles are the update selction
      var circles = svg.selectAll('circle')
          .data(filteredData, function(d) {
            return d.sector + d.investmen_Loan
          });
    //remove exit selection
      circles.exit()
        .transition().duration(duration)
        .attr('r', 0)
      .remove();

// create enter
    var enter = circles
        .enter().append('circle')
        .attr('cx', function(d) { return xScale(d.investmen_Loan); });
    enter.transition()
      .delay(function(d, i) {console.log(i, d); return i * 100})
      .duration(duration)
      .attr('r', 10)
      .attr('cy', function(d) {return yScale(d.investment_approved);})
      .attr('cx', function(d) {return xScale(d.investmen_Loan);})
      .attr('fill', function(d) {return colorScale(d.Sector);});

circles.transition()
        .duration(duration)
        .attr('r', 10)
        .attr('cy', function(d) {return yScale(d.investment_approved);})
        .attr('cx', function(d) {return xScale(d.investmen_Loan);})
        .attr('fill', function(d) {return colorScale(d.Sector);});

//  console.log(filteredData)
      };

setInterval(function(){
     year = year + 1;
     if (year > 2016) {
       year = 2002;
     }
     update();
   }, duration * 2);

d3.csv("Renwable_clean.csv", function(error, response) {
  if (error) console.log(error);
    console.log(response.year)

// coerce the data to a number
  		response.forEach(function(d) {
    	d[xdim] = +d[xdim];
    	d[ydim] = +d[ydim];
      d.year = +d.year;
  	});

yScale
    .range([height, 0])
    .domain([0, d3.max(response, function(d) { return d[ydim]; })]);
    // .round(true);

xScale
    .range([0, width])
    .domain([0, d3.max(response, function(d) { return d[xdim]; })]);

var xAxis = d3.axisBottom()
    .scale(xScale);

var yAxis = d3.axisLeft()
    .scale(yScale);

svg.append("g")
    .attr("class", "y--axis")
    .call(yAxis)

svg.append("g")
    .attr("class", "x--axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
		
     svg.append("text")
     .attr("text-anchor", "middle")  // this makes it easy to centre the text as the transform is applied to the anchor
		 .attr("transform", "translate("+(- margin.left/1.5)+", "+(height/2)+")rotate(-90)")  // text is drawn off the screen top left, move down and out and rotate
     .text("Value");

svg.append("text")
     .attr("text-anchor", "middle")  // this makes it easy to centre the text as the transform is applied to the anchor
    .attr("transform", "translate("+ (width/2) +"," + (height + margin.bottom -3) + ")")  // centre below axis
    .text("Google");

colorScale = d3.scaleOrdinal(d3.schemeCategory20);

data = response;
});

</script>
</body>

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