D3 Examples - Health and Wealth from Scratch

xxxxxxxxxx
 
<!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>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
​
    var incomeScale = d3.scaleLog()
                                        .domain([100,200000])
                                        .range([0,960])
    
    var lifeScale = d3.scaleLinear()
                                        .domain([0,80])
                                        .range([500,0])
    
    var popScale = d3.scaleSqrt()
                                        .domain([0,100000000])
                                        .range([3,60])
    
    var incomeAxis = d3.axisBottom()
                            .scale(incomeScale)
                            .ticks(12, d3.format(",d"))
        
    var lifeAxis = d3.axisLeft()
                            .scale(lifeScale)
​
    svg.append('g')
         .attr("class", "axis")
         .attr("transform", "translate(20,480)")
         .call(incomeAxis);
    
      svg.append('g')
         .attr("class", "axis")
         .attr("transform", "translate(20,-20)")
         .call(lifeAxis);
    
    d3.json("nations.json",main)
    
    function main(error,nations){
      //console.log(nations)
     var year = 1950
     
     animate()
     function animate(){
       year = year+1
       if (year > 1955){
         return
       }
       
       var dots = svg.selectAll('circle')
            .data(countries(year),d=>d.name)
​
       var new_dots = dots.enter()
​
       var orphan_dots = dots.exit()
            .remove()
​
       dots = new_dots.merge(dots)
            .append('circle')
            .attr("cx",d=>incomeScale(d.income))
            .attr("cy",d=>lifeScale(d.lifeExpectancy))
            .attr("r",d=>popScale(d.population))
                .transition()
                .duration(1000)
                .delay(1000)
            
                
     }
      
      function countries(year){
        var out = nations.map(country => {
​
          var name = country
                                    .name;
          
          var region = country
                                    .region;
          
          var income = country
                                    .income
                                    .find(function(d){return d[0] === year;});
          
          var lifeExpectancy = country
                                    .lifeExpectancy
                                    .find(d => {return d[0] === year;});
          
          var population = country
                                    .population
                                    .find(d => {return d[0] === year;});
​
          if ([income,lifeExpectancy,population].every(d=>d!=null)){
              return {
                "year":year,
                "name":name,
                "region":region,
                "income": income[1],
                "lifeExpectancy":lifeExpectancy[1],
                "population":population[1]}
              }
          })
        return out.filter(function(n){ return n != undefined });
        }
​
    }
    
    
​
  </script>
</body>
​
    