EY health + wealth

forked from ElaineYu's block: EY health + wealth

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Skeleton file to explore data in Class 3">

<title>Data Reading &amp; Shaping</title>
  <style>

</style>
</head>
<body>
                <h4 id="counter"></h4>

// Define the margin object with properties for the four sides
     var margin = {top: 20, right: 20, bottom: 120, left: 70};
     // define width and height as the INNER dimensions of the chart area     
     var width = 960 - margin.left - margin.right;
     var height = 500 - margin.top - margin.bottom;
    
    var findByYear = function(data, year) {
      var resultArry = data.find(function(i) {
        return i[0] === year
      })
      if(resultArry) {
        return resultArry[1]
      }
    }

var buildNationForEachYear = function(nation, year) {
      var n = {
        name: nation.name,
        region: nation.region,
        income: findByYear(nation.income, year),
        population: findByYear(nation.population, year),
        lifeExpectancy: findByYear(nation.lifeExpectancy, year)
      }
      return n
    }
    
    var loadDomain = function(xValues, yValues, popValues, dataForYearX) {       
      return {
        x: d3.extent(xValues),
        y: d3.extent(yValues),
        pop: d3.extent(popValues),
        color: d3.nest().key(function(nation) {return nation.region}).object(dataForYearX)
      }
    }
    
    var loadRange = function() {
        return {
        x: [0 , width],
        y: [height, 0],
        pop: [0, 100], 
        color: ['red', 'orange', 'green', 'cyan', 'blue', 'purple']
          
      }
    }
    
    var loadScale = function(domain, range){
      return {
        x: d3.scaleLog().domain(domain.x).range(range.x),
        y: d3.scaleLinear().domain(domain.y).range(range.y),
        pop: d3.scaleSqrt().domain(domain.pop).range(range.pop),
        color: d3.scaleOrdinal().domain(domain.color).range(range.color)
      }
    }
    
    var loadAxis = function(scale) {
      return {
        x: d3.axisBottom().scale(scale.x),
        y: d3.axisLeft().scale(scale.y)
      }
    }

// Determine Min and Max for each       		
          var incomeMinMax = d3.extent(nation.income, function(i) {return i[0]})
          // [1800, 2009]
          var lifeMinMax = d3.extent(nation.lifeExpectancy, function(i) {return i[0]})
          // [1803, 2000]
          var popMinMax = d3.extent(nation.population, function(i) {return i[0]})
          // [1900, 2001]

// Merge the arrays         
          var allMinMax = d3.merge([incomeMinMax, lifeMinMax, popMinMax])

return d3.extent(allMinMax)
        })
        // nationYears = [1800, 2009, 1803, 2000, 1900, 2001]
        var yearMinMax = d3.extent(d3.merge(nationYears))
        //[1800, 2009]
        for(var year=yearMinMax[0]; year<=yearMinMax[1]; ++year) {
          endPoint[year] = [];
          nations.forEach(function(nation) {
            var newNation = buildNationForEachYear(nation, year)
            if (newNation.income) {
              allIncomeValues.push(newNation.income);
            }
            if (newNation.lifeExpectancy){
              allLifeExpectancyValues.push(newNation.lifeExpectancy);
            }
            if (newNation.population){
              allPopulationValues.push(newNation.population);
            }
            //  Remove undefined values         
            if (newNation.income && newNation.lifeExpectancy && newNation.population) {
              endPoint[year].push(newNation);
            }
          })
        }

// Newly structured data       
        console.log('endPoint 1800', endPoint[1800]); 
				
        var year = 1950;
        var newYear = year++;
        var domain = loadDomain(allIncomeValues, allLifeExpectancyValues, allPopulationValues, endPoint[newYear]);
        var range = loadRange();
        var scale = loadScale(domain, range);
        var axes = loadAxis(scale)
        var svg = drawSVG();
        appendAxes(svg, axes);
        appendXYLabels(svg);

window.svg = svg
        window.endPoint = endPoint
        window.scale = scale
       
        updateBubblesByYear(svg, endPoint, scale);

//           interval = window.setInterval(
//           function () {
//              updateBubblesByYear(svg, endPoint, scale);
//           // or whatever your update function is called
//        }, 100);

});
      
   
    
	// Update selection
    
  // Exit

// Enter
    
	// Enter + Update

</script>
</body>

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