Created
February 10, 2016 01:02
-
-
Save SHewitt95/e8a1a1384cdb617130c7 to your computer and use it in GitHub Desktop.
Week 5: Better Life Index Scatterplot
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 { | |
fill: steelblue; | |
} | |
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>Better Life Index Voter Turnout scores vs. Time Devoted To Leisure And Personal Care . 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 fullWidth = 700; | |
var fullHeight = 600; | |
var margin = {top:20, left:60, right:50, bottom: 50}; //Top, right, bottom, left | |
// what do you need to do to make the width and height for the chart? | |
var height = fullHeight - margin.top - margin.bottom; // minus what? | |
var width = fullWidth - margin.left - margin.right; // minus what? | |
var dotRadius = 4; // fix this to a nice value. | |
// fill in the margin values here. | |
var xScale = d3.scale.linear() | |
.range([ 0, width ]); | |
// top to bottom: | |
var yScale = d3.scale.linear() | |
.range([ height, 0 ]); | |
// Custom tick count if you want it. | |
// Create your axes here. | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(10); | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left"); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", fullWidth) | |
.attr("height", fullHeight) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
// X-Axis | |
svg.append("text") | |
.attr("class", "xlabel") | |
.attr("transform", "translate(" + (margin.left + width / 2) + " ," + (height + margin.bottom/2) + ")") | |
.style("text-anchor", "middle") | |
.attr("dy", "12") | |
.text("Voter Turnout (%)"); | |
// Y-Axis | |
svg.append("text") | |
.attr("class", "ylabel") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 0 - (margin.left)) // you may need to adjust this | |
.attr("x", 0 - (height / 2)) // you may need to adjust | |
//.attr("transform", "translate(" + (width) + " ," + (height) + ")") | |
.style("text-anchor", "middle") | |
.attr("dy", "12") | |
.text("Time Devoted To Leisure And Personal Care"); | |
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.voterTurnout; | |
})); | |
yScale.domain( | |
d3.extent(data, function(d) { | |
// pick a data value to plot for y axis | |
return +d.timeDevotedToLeisureAndPersonalCare; | |
})); | |
var circles = svg.selectAll("circle") | |
.data(data) | |
.enter() | |
.append("circle"); | |
// fill in the rest of the data, enter, append here. | |
// add a class to the circles - ".dots". | |
circles.classed("dots", true); | |
// Circles in SVG have cx, cy, and r attributes. x location, y location, radius. | |
circles.attr("cx", function(d) { | |
// return the value to use for your x scale here | |
return xScale(+d.voterTurnout); | |
}) | |
.attr("cy", function(d) { | |
// return the value to use for your y scale here | |
return yScale(+d.timeDevotedToLeisureAndPersonalCare); | |
}) | |
.attr("r", dotRadius) // you might want to increase your dotRadius | |
.style("fill", function(d) { | |
if (d.country === "Denmark") { | |
return "red"; | |
} else { | |
return "blue"; | |
} | |
}) // add a fill rule with a special case for one of the countries | |
.append("title") | |
.text(function(d) { | |
// fill in a text string here for your cheap tooltip | |
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(0," + height + ")") | |
.call(xAxis) // fill in the name of your xaxis function here ). | |
svg.append("g") | |
.attr("class", "y axis") | |
// .attr("transform", "translate(" + (padding[3]) + ",0)") | |
.call(yAxis) // 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