D3 Examples - Fertility and life expectancy

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  <script>
    
//datasetti
var dataset = [{
    "cz": [
        { "year": 2002, "fertility": 1.17, "lifeexpectancy": 75.4 },
        { "year": 2003, "fertility": 1.18, "lifeexpectancy": 75.3 },
        { "year": 2004, "fertility": 1.23, "lifeexpectancy": 75.9 },
        { "year": 2005, "fertility": 1.29, "lifeexpectancy": 76.1 },
        { "year": 2006, "fertility": 1.34, "lifeexpectancy": 76.7 },
        { "year": 2007, "fertility": 1.45, "lifeexpectancy": 77 },
        { "year": 2008, "fertility": 1.51, "lifeexpectancy": 77.3 },
        { "year": 2009, "fertility": 1.51, "lifeexpectancy": 77.4 },
        { "year": 2010, "fertility": 1.51, "lifeexpectancy": 77.7 },
        { "year": 2011, "fertility": 1.43, "lifeexpectancy": 78 },
        { "year": 2012, "fertility": 1.45, "lifeexpectancy": 78.1 },
        { "year": 2013, "fertility": 1.46, "lifeexpectancy": 78.3 }
    ],
    "den": [
        { "year": 2002, "fertility": 1.72, "lifeexpectancy": 77.1 },
        { "year": 2003, "fertility": 1.76, "lifeexpectancy": 77.4 },
        { "year": 2004, "fertility": 1.78, "lifeexpectancy": 77.8 },
        { "year": 2005, "fertility": 1.8, "lifeexpectancy": 78.3 },
        { "year": 2006, "fertility": 1.85, "lifeexpectancy": 78.4 },
        { "year": 2007, "fertility": 1.84, "lifeexpectancy": 78.4 },
        { "year": 2008, "fertility": 1.89, "lifeexpectancy": 78.8 },
        { "year": 2009, "fertility": 1.84, "lifeexpectancy": 79 },
        { "year": 2010, "fertility": 1.87, "lifeexpectancy": 79.3 },
        { "year": 2011, "fertility": 1.75, "lifeexpectancy": 79.9 },
        { "year": 2012, "fertility": 1.73, "lifeexpectancy": 80.2 },
        { "year": 2013, "fertility": 1.67, "lifeexpectancy": 80.4 }
    ],  
    "ger": [
        { "year": 2002, "fertility": 1.34, "lifeexpectancy": 78.6 },
        { "year": 2003, "fertility": 1.34, "lifeexpectancy": 78.6 },
        { "year": 2004, "fertility": 1.36, "lifeexpectancy": 79.3 },
        { "year": 2005, "fertility": 1.34, "lifeexpectancy": 79.4 },
        { "year": 2006, "fertility": 1.33, "lifeexpectancy": 79.9 },
        { "year": 2007, "fertility": 1.37, "lifeexpectancy": 80.1 },
        { "year": 2008, "fertility": 1.38, "lifeexpectancy": 80.2 },
        { "year": 2009, "fertility": 1.36, "lifeexpectancy": 80.3 },
        { "year": 2010, "fertility": 1.39, "lifeexpectancy": 80.5 },
        { "year": 2011, "fertility": 1.36, "lifeexpectancy": 80.8 },
        { "year": 2012, "fertility": 1.38, "lifeexpectancy": 81 },
        { "year": 2013, "fertility": 1.4, "lifeexpectancy": 80.9 }
    ],  
    "ee": [
        { "year": 2002, "fertility": 1.36, "lifeexpectancy": 71.4 },
        { "year": 2003, "fertility": 1.37, "lifeexpectancy": 71.9 },
        { "year": 2004, "fertility": 1.47, "lifeexpectancy": 72.4 },
        { "year": 2005, "fertility": 1.52, "lifeexpectancy": 73 },
        { "year": 2006, "fertility": 1.58, "lifeexpectancy": 73.2 },
        { "year": 2007, "fertility": 1.69, "lifeexpectancy": 73.2 },
        { "year": 2008, "fertility": 1.72, "lifeexpectancy": 74.4 },
        { "year": 2009, "fertility": 1.7, "lifeexpectancy": 75.3 },
        { "year": 2010, "fertility": 1.72, "lifeexpectancy": 76 },
        { "year": 2011, "fertility": 1.61, "lifeexpectancy": 76.6 },
        { "year": 2012, "fertility": 1.56, "lifeexpectancy": 76.7 },
        { "year": 2013, "fertility": 1.52, "lifeexpectancy": 77.5 }
    ],  
    "spa": [
        { "year": 2002, "fertility": 1.25, "lifeexpectancy": 79.8 },
        { "year": 2003, "fertility": 1.3, "lifeexpectancy": 79.7 },
        { "year": 2004, "fertility": 1.31, "lifeexpectancy": 80.4 },
        { "year": 2005, "fertility": 1.33, "lifeexpectancy": 80.3 },
        { "year": 2006, "fertility": 1.36, "lifeexpectancy": 81.1 },
        { "year": 2007, "fertility": 1.38, "lifeexpectancy": 81.1 },
        { "year": 2008, "fertility": 1.45, "lifeexpectancy": 81.5 },
        { "year": 2009, "fertility": 1.38, "lifeexpectancy": 81.9 },
        { "year": 2010, "fertility": 1.37, "lifeexpectancy": 82.4 },
        { "year": 2011, "fertility": 1.34, "lifeexpectancy": 82.6 },
        { "year": 2012, "fertility": 1.32, "lifeexpectancy": 82.5 },
        { "year": 2013, "fertility": 1.27, "lifeexpectancy": 83.2 }
    ],  
    "mal": [
        { "year": 2002, "fertility": 1.45, "lifeexpectancy": 78.8 },
        { "year": 2003, "fertility": 1.48, "lifeexpectancy": 78.7 },
        { "year": 2004, "fertility": 1.4, "lifeexpectancy": 79.4 },
        { "year": 2005, "fertility": 1.38, "lifeexpectancy": 79.4 },
        { "year": 2006, "fertility": 1.36, "lifeexpectancy": 79.5 },
        { "year": 2007, "fertility": 1.35, "lifeexpectancy": 79.9 },
        { "year": 2008, "fertility": 1.43, "lifeexpectancy": 79.7 },
        { "year": 2009, "fertility": 1.42, "lifeexpectancy": 80.4 },
        { "year": 2010, "fertility": 1.36, "lifeexpectancy": 81.5 },
        { "year": 2011, "fertility": 1.45, "lifeexpectancy": 80.9 },
        { "year": 2012, "fertility": 1.43, "lifeexpectancy": 80.9 },
        { "year": 2013, "fertility": 1.38, "lifeexpectancy": 81.9 }
    ],  
    "fin": [
        { "year": 2002, "fertility": 1.72, "lifeexpectancy": 78.3 },
        { "year": 2003, "fertility": 1.76, "lifeexpectancy": 78.6 },
        { "year": 2004, "fertility": 1.8, "lifeexpectancy": 79 },
        { "year": 2005, "fertility": 1.8, "lifeexpectancy": 79.1 },
        { "year": 2006, "fertility": 1.84, "lifeexpectancy": 79.5 },
        { "year": 2007, "fertility": 1.83, "lifeexpectancy": 79.6 },
        { "year": 2008, "fertility": 1.85, "lifeexpectancy": 79.9 },
        { "year": 2009, "fertility": 1.86, "lifeexpectancy": 80.1 },
        { "year": 2010, "fertility": 1.87, "lifeexpectancy": 80.2 },
        { "year": 2011, "fertility": 1.83, "lifeexpectancy": 80.6 },
        { "year": 2012, "fertility": 1.8, "lifeexpectancy": 80.7 },
        { "year": 2013, "fertility": 1.75, "lifeexpectancy": 81.1 }
    ],  
    "swe": [
        { "year": 2002, "fertility": 1.65, "lifeexpectancy": 80 },
        { "year": 2003, "fertility": 1.71, "lifeexpectancy": 80.3 },
        { "year": 2004, "fertility": 1.75, "lifeexpectancy": 80.7 },
        { "year": 2005, "fertility": 1.77, "lifeexpectancy": 80.7 },
        { "year": 2006, "fertility": 1.85, "lifeexpectancy": 81 },
        { "year": 2007, "fertility": 1.88, "lifeexpectancy": 81.1 },
        { "year": 2008, "fertility": 1.91, "lifeexpectancy": 81.3 },
        { "year": 2009, "fertility": 1.94, "lifeexpectancy": 81.5 },
        { "year": 2010, "fertility": 1.98, "lifeexpectancy": 81.6 },
        { "year": 2011, "fertility": 1.9, "lifeexpectancy": 81.9 },
        { "year": 2012, "fertility": 1.91, "lifeexpectancy": 81.8 },
        { "year": 2013, "fertility": 1.89, "lifeexpectancy": 82 }
    ],  
    "uk": [
        { "year": 2002, "fertility": 1.63, "lifeexpectancy": 78.3 },
        { "year": 2003, "fertility": 1.7, "lifeexpectancy": 78.4 },
        { "year": 2004, "fertility": 1.75, "lifeexpectancy": 79 },
        { "year": 2005, "fertility": 1.76, "lifeexpectancy": 79.2 },
        { "year": 2006, "fertility": 1.82, "lifeexpectancy": 79.5 },
        { "year": 2007, "fertility": 1.86, "lifeexpectancy": 79.7 },
        { "year": 2008, "fertility": 1.91, "lifeexpectancy": 79.8 },
        { "year": 2009, "fertility": 1.89, "lifeexpectancy": 80.4 },
        { "year": 2010, "fertility": 1.92, "lifeexpectancy": 80.6 },
        { "year": 2011, "fertility": 1.91, "lifeexpectancy": 81 },
        { "year": 2012, "fertility": 1.92, "lifeexpectancy": 81 },
        { "year": 2013, "fertility": 1.83, "lifeexpectancy": 81.1 }
    ],  
    "nor": [
        { "year": 2002, "fertility": 1.75, "lifeexpectancy": 79 },
        { "year": 2003, "fertility": 1.8, "lifeexpectancy": 79.6 },
        { "year": 2004, "fertility": 1.83, "lifeexpectancy": 80.1 },
        { "year": 2005, "fertility": 1.84, "lifeexpectancy": 80.3 },
        { "year": 2006, "fertility": 1.9, "lifeexpectancy": 80.6 },
        { "year": 2007, "fertility": 1.9, "lifeexpectancy": 80.6 },
        { "year": 2008, "fertility": 1.96, "lifeexpectancy": 80.8 },
        { "year": 2009, "fertility": 1.98, "lifeexpectancy": 81 },
        { "year": 2010, "fertility": 1.95, "lifeexpectancy": 81.2 },
        { "year": 2011, "fertility": 1.88, "lifeexpectancy": 81.4 },
        { "year": 2012, "fertility": 1.85, "lifeexpectancy": 81.5 },
        { "year": 2013, "fertility": 1.78, "lifeexpectancy": 81.8 }
    ]
    }];
    
//tausta-asetukset
var margin = {top: 30, right: 20, bottom: 30, left: 30},
    w = 900 - margin.left - margin.right
    h = 500 - margin.top - margin.bottom;
    
var svg = d3.select("body")
  .append("svg")
  .attr("width", w + margin.left + margin.right)
  .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
//Tee ympyrä
    
svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) { return d.nor.lifeexpectancy; } )
    .attr("cy", function(d) { return d.nor.fertility*1000; } )
    .attr("r", 8)
    .attr("fill", "black");
    
  </script>
</body>
​
    