Last active
February 10, 2016 02:29
-
-
Save CafeConVega/17bebb8a00ee606fd4b9 to your computer and use it in GitHub Desktop.
Week 5 - Scatterplot Fix
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 “Life Satisfaction” Household Net Financial Wealth 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: 70, | |
right: 50, | |
bottom: 70 | |
}; //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; | |
var width = fullwidth - margin.left - margin.right; | |
var dotRadius = 5; // 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); // 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", fullwidth) | |
.attr("height", fullheight) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
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) { | |
return +d.householdNetFinancialWealth; | |
})); | |
yScale.domain( | |
d3.extent(data, function (d) { | |
return +d.timeDevotedToLeisureAndPersonalCare; | |
})); | |
var circles = svg.selectAll("circle") | |
.data(data) | |
.enter() | |
.append("circle") | |
.classed("dots", true); | |
// Circles in SVG have cx, cy, and r attributes. x location, y location, radius. | |
circles.attr("cx", function (d) { | |
return xScale(+d.householdNetFinancialWealth); | |
}) | |
.attr("cy", function (d) { | |
return yScale(+d.timeDevotedToLeisureAndPersonalCare); | |
}) | |
.attr("r", dotRadius) // you might want to increase your dotRadius | |
.style("fill", function (d) { | |
if (d.country === "Belgium") { | |
return "red"; | |
} else { | |
return "grey"; | |
} | |
}) | |
.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(0," + height + ")") | |
.call(xAxis); | |
svg.append("text") | |
.attr("class", "xlabel") | |
.attr("transform", "translate(" + width/2 + " ," + | |
height + ")") | |
.style("text-anchor", "middle") | |
.attr("dy", "35") | |
.text("Household Net Financial Wealth"); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
svg.append("text") | |
.attr("class", "axis text") | |
.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("dy", "1em") | |
.style("text-anchor", "middle") | |
.text("Time Devoted To Leisure And Personal Care"); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment