block by jmuyskens 4fec60116f5eb5f81edd4380786f8fca

data-storytelling-d3-workshop-6

Full Screen

Built with blockbuilder.org

forked from jmuyskens‘s block: data-storytelling-d3-workshop-1

forked from jmuyskens‘s block: data-storytelling-d3-workshop-3

forked from jmuyskens‘s block: data-storytelling-d3-workshop-4

forked from jmuyskens‘s block: data-storytelling-d3-workshop-4

forked from jmuyskens‘s block: data-storytelling-d3-workshop-5

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    svg {
     	background: silver;
    }
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var margin = {'top': 20, 'right': 20, 'bottom': 20, 'left': 20};
    var width = 200 - margin.right - margin.left;
    var height = 200 - margin.top - margin.bottom;
    
    function translate(x, y) {
      return 'translate(' + x + ',' + y + ')';
    }
    
    var svg = d3.select('body').append('svg')
    	.attr('width', width + margin.right + margin.left)
    	.attr('height', height + margin.top + margin.bottom)
    	.append('g')
    	.attr('transform', translate(margin.left, margin.top));
    
    d3.csv('oecd.csv', function(data) {
			var usa = data.filter(function(d) { 
        return d.LOCATION === "USA"; })
      
      var year2010 = data.filter(function(d) {
        return d.TIME === "2010";
      });
      
      var lifeExpectancies = year2010.map(function(d) {
        return +d.LIFEEXP;
      });
      
      console.log('max', d3.max(lifeExpectancies));
      console.log('min', d3.min(lifeExpectancies));
      console.log('mean', d3.mean(lifeExpectancies));
      console.log('median', d3.median(lifeExpectancies));
      console.log(d3.extent(lifeExpectancies));
    })
  </script>
</body>