Last active
October 22, 2015 18:05
-
-
Save yan2014/3b65c3c8a307558d1206 to your computer and use it in GitHub Desktop.
Week 5: X-Life satisfaction; Y-Years in education
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
country | dwellingsWithoutBasicFacilities | housingExpenditure | roomsPerPerson | householdNetAdjustedDisposableIncome | householdNetFinancialWealth | employmentRate | jobSecurity | longTermUnemploymentRate | personalEarnings | qualityOfSupportNetwork | educationalAttainment | studentSkills | yearsInEducation | airPollution | waterQuality | consultationOnRuleMaking | voterTurnout | lifeExpectancy | selfReportedHealth | lifeSatisfaction | assaultRate | homicideRate | employeesWorkingVeryLongHours | timeDevotedToLeisureAndPersonalCare | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Australia | 1.1 | 20 | 2.3 | 31197 | 38482 | 72 | 4.4 | 1.06 | 46585 | 93 | 74 | 512 | 18.8 | 13 | 93 | 10.5 | 93 | 82 | 85 | 7.4 | 2.1 | 0.8 | 14.23 | 14.41 | |
Austria | 1 | 21 | 1.6 | 29256 | 48125 | 73 | 3.4 | 1.07 | 43837 | 95 | 82 | 500 | 16.9 | 27 | 95 | 7.1 | 75 | 81.1 | 69 | 7.5 | 3.4 | 0.5 | 8.61 | 14.46 | |
Belgium | 1.9 | 20 | 2.3 | 27811 | 78368 | 62 | 4.5 | 3.37 | 47276 | 91 | 71 | 509 | 18.8 | 21 | 84 | 4.5 | 89 | 80.5 | 74 | 7.1 | 6.6 | 1.2 | 4.41 | 15.71 | |
Brazil | 6.7 | 21 | 1.4 | 10310 | 6875 | 67 | 4.8 | 2.17 | 7909 | 90 | 43 | 402 | 16.3 | 18 | 67 | 4 | 79 | 73.4 | 69 | 7.2 | 7.9 | 25.5 | 10.74 | 14.97 | |
Canada | 0.2 | 22 | 2.5 | 30212 | 63261 | 72 | 6.6 | 0.9 | 44017 | 94 | 89 | 522 | 17 | 15 | 90 | 10.5 | 61 | 81 | 88 | 7.6 | 1.3 | 1.7 | 3.98 | 14.25 | |
Chile | 9.4 | 19 | 1.3 | 13762 | 18141 | 62 | 4.7 | 2.01 | 15438 | 85 | 72 | 436 | 16.4 | 46 | 79 | 2 | 88 | 78.3 | 59 | 6.6 | 6.9 | 5.2 | 15.42 | 14.41 | |
Czech Republic | 0.9 | 25 | 1.4 | 17262 | 17875 | 67 | 4.2 | 3.03 | 20645 | 87 | 92 | 500 | 17.9 | 16 | 81 | 6.8 | 59 | 78 | 60 | 6.7 | 2.8 | 0.8 | 7.14 | 14.98 | |
Denmark | 0.4 | 24 | 2 | 25172 | 39951 | 73 | 5.8 | 2.11 | 45642 | 96 | 77 | 498 | 19.2 | 15 | 95 | 7 | 88 | 79.9 | 71 | 7.6 | 3.9 | 0.8 | 2.06 | 16.06 | |
Estonia | 8.6 | 20 | 1.6 | 14382 | 7843 | 67 | 5.3 | 5.46 | 17488 | 89 | 89 | 526 | 17.5 | 9 | 80 | 3.3 | 64 | 76.3 | 52 | 5.4 | 5.5 | 4.7 | 3.59 | 14.9 | |
Finland | 0.6 | 22 | 1.9 | 26904 | 20190 | 70 | 6.4 | 1.65 | 38976 | 93 | 84 | 529 | 19.7 | 15 | 95 | 9 | 69 | 80.6 | 69 | 7.4 | 2.4 | 1.8 | 3.7 | 14.89 | |
France | 0.5 | 21 | 1.8 | 29322 | 47668 | 64 | 6.5 | 3.98 | 38625 | 91 | 72 | 500 | 16.5 | 12 | 85 | 3.5 | 80 | 82.2 | 68 | 6.7 | 5 | 0.8 | 8.71 | 15.33 | |
Germany | 0.9 | 21 | 1.8 | 30721 | 49484 | 73 | 3.2 | 2.52 | 41782 | 93 | 86 | 515 | 18.1 | 16 | 94 | 4.5 | 72 | 80.8 | 65 | 7 | 3.6 | 0.5 | 5.6 | 15.31 | |
Greece | 0.5 | 27 | 1.2 | 19095 | 14004 | 51 | 12 | 14.37 | 27434 | 68 | 67 | 466 | 18.6 | 27 | 66 | 6.5 | 62 | 80.8 | 76 | 4.7 | 3.7 | 1.4 | 5.65 | 14.91 | |
Hungary | 4.8 | 21 | 1 | 15240 | 13652 | 57 | 6.7 | 5.05 | 20514 | 87 | 82 | 487 | 17.5 | 15 | 77 | 7.9 | 64 | 75 | 56 | 4.9 | 3.6 | 1.5 | 2.92 | 15.04 | |
Iceland | 0.4 | 21 | 1.6 | 22415 | 43045 | 80 | 4.3 | 1.68 | 39433 | 96 | 71 | 484 | 19.5 | 18 | 97 | 5.1 | 81 | 82.4 | 78 | 7.5 | 2.7 | 1.3 | 13.73 | 14.61 | |
Ireland | 0.2 | 20 | 2.1 | 23721 | 28099 | 59 | 6.4 | 9.24 | 50853 | 95 | 73 | 516 | 17.5 | 13 | 84 | 9 | 70 | 80.6 | 83 | 6.8 | 2.6 | 0.8 | 4.17 | 15.19 | |
Israel | 3.8 | 21 | 1.1 | 20434 | 55932 | 67 | 6.5 | 0.91 | 27577 | 89 | 83 | 474 | 15.7 | 21 | 66 | 2.5 | 68 | 81.8 | 82 | 7.1 | 6.4 | 2.2 | 18.77 | 14.48 | |
Italy | 0.5 | 23 | 1.4 | 24724 | 54147 | 58 | 5.5 | 5.67 | 33571 | 91 | 56 | 490 | 17 | 21 | 80 | 5 | 75 | 82.7 | 65 | 6 | 4.7 | 0.7 | 3.7 | 14.98 | |
Japan | 6.4 | 22 | 1.8 | 25066 | 85309 | 71 | 2.9 | 1.67 | 36039 | 90 | 93 | 540 | 16.2 | 24 | 86 | 7.3 | 59 | 82.7 | 30 | 6 | 1.4 | 0.3 | 22.62 | 14.93 | |
Korea | 4.2 | 16 | 1.4 | 18035 | 28290 | 64 | 3 | 0.01 | 34056 | 77 | 81 | 542 | 17.5 | 30 | 78 | 10.4 | 76 | 81.1 | 37 | 6 | 2.1 | 1.1 | 27.13 | 14.63 | |
Luxembourg | 0.7 | 23 | 2 | 35635 | 57159 | 66 | 4 | 1.56 | 52542 | 88 | 77 | 490 | 14.1 | 12 | 81 | 6 | 91 | 81.1 | 73 | 7.1 | 4.3 | 2.1 | 3.18 | 15.12 | |
Mexico | 4.2 | 21 | 1 | 12850 | 10449 | 61 | 4.7 | 0.09 | 14653 | 74 | 36 | 417 | 15.2 | 30 | 68 | 9 | 63 | 74.4 | 66 | 7.4 | 12.8 | 23.4 | 28.77 | 13.89 | |
Netherlands | 0 | 21 | 2 | 25697 | 71073 | 75 | 3.6 | 1.78 | 45362 | 92 | 72 | 519 | 18.6 | 30 | 94 | 6.1 | 75 | 81.3 | 76 | 7.4 | 4.9 | 0.9 | 0.59 | 15.44 | |
New Zealand | 0.2 | 25 | 2.3 | 21773 | 7480 | 72 | 5.8 | 0.91 | 31394 | 96 | 74 | 509 | 18.1 | 11 | 89 | 10.3 | 74 | 81.2 | 89 | 7.3 | 2.2 | 1.9 | 13.07 | 14.87 | |
Norway | 0.3 | 17 | 2 | 32093 | 8365 | 76 | 2.9 | 0.28 | 46618 | 93 | 82 | 496 | 17.9 | 16 | 96 | 8.1 | 78 | 81.4 | 73 | 7.7 | 3.3 | 2.3 | 3.1 | 15.56 | |
Poland | 3.5 | 23 | 1 | 16234 | 10406 | 60 | 7.3 | 3.51 | 21140 | 89 | 89 | 521 | 18.3 | 33 | 77 | 10.8 | 55 | 76.9 | 58 | 5.7 | 1.4 | 1 | 7.58 | 14.2 | |
Portugal | 0.9 | 18 | 1.6 | 18806 | 29640 | 62 | 9.1 | 7.62 | 23419 | 85 | 35 | 488 | 17.8 | 18 | 87 | 6.5 | 58 | 80.8 | 50 | 5.2 | 5.7 | 0.9 | 9.31 | 14.95 | |
Russian Federation | 15.1 | 11 | 0.9 | 17230 | 3331 | 69 | 4 | 1.69 | 21311 | 84 | 94 | 481 | 15.8 | 15 | 44 | 2.5 | 65 | 69 | 37 | 5.5 | 3.8 | 12.8 | 0.17 | 14.97 | |
Slovak Republic | 1.1 | 25 | 1.2 | 17228 | 9651 | 60 | 5.8 | 8.89 | 20428 | 88 | 91 | 472 | 16.4 | 13 | 82 | 6.6 | 59 | 76.1 | 63 | 5.9 | 3 | 1.2 | 6.48 | 14.99 | |
Slovenia | 0.4 | 20 | 1.4 | 19692 | 18912 | 64 | 5 | 4.23 | 33040 | 93 | 84 | 499 | 18.3 | 26 | 90 | 10.3 | 66 | 80.1 | 61 | 6 | 3.9 | 0.4 | 5.72 | 14.62 | |
Spain | 0 | 20 | 1.9 | 22799 | 23920 | 56 | 17.7 | 11.13 | 34747 | 92 | 54 | 490 | 17.6 | 24 | 75 | 7.3 | 69 | 82.4 | 75 | 6.2 | 4.2 | 0.7 | 5.95 | 16.06 | |
Sweden | 0 | 21 | 1.7 | 27546 | 55301 | 74 | 6.5 | 1.4 | 38789 | 91 | 87 | 482 | 19.2 | 10 | 97 | 10.9 | 85 | 81.9 | 80 | 7.4 | 5.1 | 1 | 1.14 | 15.11 | |
Switzerland | 0.1 | 23 | 1.9 | 30745 | 100812 | 79 | 2.8 | 1.48 | 52307 | 94 | 86 | 518 | 17.1 | 20 | 95 | 8.4 | 49 | 82.8 | 81 | 7.8 | 4.2 | 0.5 | 7.3 | 14.98 | |
Turkey | 12.7 | 21 | 1.1 | 13794 | 3317 | 49 | 7.8 | 2.29 | 17460 | 79 | 32 | 462 | 16 | 35 | 60 | 5.5 | 88 | 74.6 | 67 | 4.9 | 5 | 3.3 | 43.29 | 13.42 | |
United Kingdom | 0.3 | 24 | 1.9 | 25828 | 60065 | 71 | 5.6 | 2.75 | 40649 | 94 | 77 | 502 | 16.6 | 13 | 92 | 11.5 | 66 | 81.1 | 78 | 6.9 | 1.9 | 0.3 | 12.27 | 14.83 | |
United States | 0.1 | 19 | 2.3 | 39531 | 132822 | 67 | 6.3 | 2.36 | 54214 | 90 | 89 | 492 | 17.1 | 18 | 87 | 8.3 | 67 | 78.7 | 90 | 7 | 1.5 | 5.2 | 11.44 | 14.27 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!-- A modified example from Scott Murray's Knight d3 course. --> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Formatting Ticks</title> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
<style type="text/css"> | |
body { | |
background-color: white; | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
h1 { | |
font-size: 24px; | |
margin: 0; | |
} | |
p { | |
font-size: 14px; | |
margin: 10px 0 0 0; | |
} | |
svg { | |
background-color: white; | |
} | |
circle.dots{ | |
} | |
circle:hover { | |
fill: orange; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 11px; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Life Satisfaction</h1> | |
<p>X:Life expectation; Y: Years in education. Source: <a href="http://stats.oecd.org/Index.aspx?DataSetCode=BLI">OECD</a>, 2014</p> | |
<p>It seems that there is no strong correlation between life expectation and years in education.</p> | |
<script type="text/javascript"> | |
// Scott is "cheating" and not using the full pattern for margins. | |
// It is better to use the object style with margin.top, margin.right, etc. | |
var width = 700; | |
var height = 600; | |
var margin ={top:20, right:10,bottom:50,left:50}; //Top, right, bottom, left | |
// redo this with an object for the margin settings: var margin = {top...} | |
var dotRadius = 5; // fix this to a nice value. | |
// fill in the margin values here. | |
var xScale = d3.scale.linear() | |
.range([ margin.left+7, width - margin.right - margin.left+7 ]); | |
// top to bottom: | |
var yScale = d3.scale.linear() | |
.range([ height - margin.bottom, margin.top ]); | |
// Custom tick count if you want it. | |
// Create your axes here. | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(20); // fix this to a good number of ticks for your scale later. | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left"); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
d3.csv("betterlifeindex.csv", function(data) { | |
// look at the data file and pick 2 columns to contrast with each other. | |
xScale.domain( | |
d3.extent(data, function(d) { | |
// pick a data value to plot on x axis | |
return +d.lifeExpectancy; | |
})); | |
yScale.domain( | |
d3.extent(data, function(d) { | |
// pick a data value to plot for y axis | |
return +d.yearsInEducation; | |
})); | |
// fill in the rest of the data, enter, append here. | |
// add a class to the circles - ".dots". | |
// Circles in SVG have cx, cy, and r attributes. x location, y location, radius. | |
var circles = svg.selectAll("circle") | |
.data(data) | |
.enter() | |
.append("circle"); | |
circles.attr("class","dots"); | |
circles.attr("cx", function(d) { | |
// return the value to use for your x scale here | |
return xScale(d.lifeExpectancy); | |
}) | |
.attr("cy", function(d) { | |
// return the value to use for your y scale here | |
return yScale(d.yearsInEducation); | |
}) | |
.attr("r", dotRadius) // you might want to increase your dotRadius | |
.attr("fill",function(d){ | |
if(d.country==="Japan") {return "green";} else{return "orange";} | |
})// add a fill rule with a special case for one of the countries | |
.append("title") | |
.text(function(d) { | |
return d.country; | |
}); | |
// fix these translates so they use your margin and height width as needed | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(-7," + (height - margin.bottom+20) + ")") | |
.call( xAxis) | |
.append("text") | |
.attr("x", width) | |
.attr("y", -5) | |
.style("text-anchor", "end") | |
.text("Life Satisfaction"); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + margin.left + ",20)") | |
.call(yAxis) | |
.selectAll("text") | |
.attr("transform", function(d) { | |
return "rotate(-20)" | |
}); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + margin.left + ",20)") | |
.append("text") | |
.attr("x",50) | |
.attr("y", 10) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("Years in Education"); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment