D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Sokrates86
Full window
Github gist
Fertility and life expectancy
Built with
blockbuilder.org
<!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>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js