Last active
September 22, 2015 23:17
-
-
Save jowang0319/c326c7040819fad71d45 to your computer and use it in GitHub Desktop.
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: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>Does more years in education lead to a higher employment rate?</h1> | |
<p>Better Life Index “Years In Education” scores vs. “Employment Rate”. Source: <a href="http://stats.oecd.org/Index.aspx?DataSetCode=BLI">OECD</a>, 2014</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}; | |
// redo this with an object for the margin settings: var margin = {top...} | |
var dotRadius = 4; // fix this to a nice value. | |
// fill in the margin values here. | |
var xScale = d3.scale.linear() | |
.range([ margin.left, width - margin.right - margin.left ]); | |
// 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(6); // 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. | |
//yearsInEducation,employmentRate | |
xScale.domain( | |
d3.extent(data, function(d) { | |
// pick a data value to plot on x axis | |
return d.yearsInEducation; | |
})); | |
yScale.domain( | |
d3.extent(data, function(d) { | |
// pick a data value to plot for y axis | |
return d.employmentRate; | |
})); | |
var circles = svg.selectAll("circle") | |
// fill in the rest of the data, enter, append here. | |
.data(data) | |
.enter() | |
.append("circle"); | |
// add a class to the circles - ".dots". | |
circles.attr("class","dots") | |
// Circles in SVG have cx, cy, and r attributes. x location, y location, radius. | |
circles.attr("cx", function(d) { | |
return xScale(d.yearsInEducation); | |
// return the value to use for your x scale here | |
}) | |
.attr("cy", function(d) { | |
// return the value to use for your y scale here | |
return yScale(d.employmentRate); | |
}) | |
.attr("r", dotRadius) // you might want to increase your dotRadius | |
.attr("fill",function(d){ | |
if (d.country === "United States"){ | |
return "pink"; | |
} else { | |
return "green"; | |
} | |
})// add a fill rule with a special case for one of the countries | |
.append("title") | |
.text(function(d) { | |
return d.country + "'s years in education is" + d.yearsInEducation + ", and its employement rate is" + d.employmentRate; | |
// fill in a text string here for your cheap tooltip | |
}); | |
// fix these translates so they use your margin and height width as needed | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (height - margin.bottom) + ")") | |
.call(xAxis); // fill in the name of your xaxis function here ). | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + margin.left + ",0)") | |
.call(yAxis) | |
.selectAll("text") | |
.attr("transform","rotate(-50)") | |
.attr("dy","-.8em") | |
.attr("dx",".5em"); // fill in the name of your yaxis function here). | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment