Health and Wealth (Andrew Dbelvins)

forked from andrewdblevins's block: Health and Wealth from Scratch

<!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) //(file name, callback)
    
    function main(error,nations){ //nations is what i'm calling the data
      if(error) throw error; //will let user know if reading the data file returned an error
      
      console.log(nations)
     var year = 1950
     
     animate() //calling the animate function
     function animate(){
       year = year+1
       if (year > 1955){
         return //this exits the function
       }
       
       var dots = svg.selectAll('circle')
            .data(countries(year),function(d){return d.name})

var new_dots = dots.enter()

var orphan_dots = dots.exit()
            .remove()

dots = new_dots.merge(dots) //redefining the dots variable by merging with enter and update (update = circles remaining w/ new data)
            .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(function(country){

if ([income,lifeExpectancy,population].every(d=>d!=null)){
              return {
                "year":year,
                "name":country.name,
                "region":region,
                "income": income[1],
                "lifeExpectancy":lifeExpectancy[1],
                "population":population[1]}
              }
          })
        return out.filter(function(n){ return n != undefined });
        }

}

</script>
</body>

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