D3 Examples - Animation Scatter Plot

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