Last active
November 5, 2015 09:48
-
-
Save MarthaAnne/750728c8c429ad65ce33 to your computer and use it in GitHub Desktop.
module-1-project
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> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Scatter Chart</title> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
<script type="text/javascript" src="script.js"></script> | |
<link rel="stylesheet" type="text/css" href="styling.css"></link> | |
</head> | |
<body> | |
<div id = "contentContainer"> | |
<h1>money / health</h1><div class = "divider"></div> | |
<p>Is there a correlation between our perception of personal health and the money we have free to spend on it?</p> | |
<p>Hover over each datapoint to see which country it represents.</p> | |
<p>Source: <a href="http://stats.oecd.org/Index.aspx?DataSetCode=BLI">OECD, 2014</a></p> | |
<div id = "svgContainer"></div> | |
</div> | |
</body> | |
</html> |
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
window.onload = function () { | |
init (); | |
} | |
function init () { | |
var w = 500; | |
var h = 500; | |
var variable1 = "personalEarnings"; | |
var variable2 = "selfReportedHealth"; | |
var padding = {top: 10, bottom: 60, left: 50, right: 10}; | |
var xScale = d3.scale.linear() | |
.range([ 0, w - padding.left - padding.right ]); | |
var yScale = d3.scale.linear() | |
.range([ h - padding.top - padding.bottom, 0 ]); | |
/*var yScale = d3.scale.linear() | |
.range([ h - padding.top - padding.bottom, 0 ]);*/ | |
var svg = d3.select("#svgContainer") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
d3.csv("betterlifeindex.csv", function(data) { | |
//console.log(data) | |
data.sort(function(a, b) { | |
return d3.ascending(+a[variable1], +b[variable1]); | |
}); | |
xScale.domain([ 0, d3.max(data, function(d) { | |
return +d[variable1]; | |
}) ]); | |
yScale.domain([ 0, d3.max(data, function(d) { | |
return +d[variable2]; | |
}) ]); | |
var yLines = svg.selectAll(".yline") | |
.data(yScale.ticks()) | |
.enter() | |
.append("line") | |
.attr("class", "yline") | |
.attr("x1", padding.left) | |
.attr("y1", function (d){ | |
console.log(d, yScale(d)) | |
return yScale(d)+padding.top; | |
}) | |
.attr("x2", w-padding.right) | |
.attr("y2", function (d){ | |
return yScale(d)+padding.top; | |
}) | |
.attr("stroke-width", 1) | |
.attr("stroke", "#eeeeee") | |
.attr("shape-rendering", "crispEdges"); | |
var xLines = svg.selectAll(".xline") | |
.data(xScale.ticks()) | |
.enter() | |
.append("line") | |
.attr("class", "xline") | |
.attr("x1", function (d){ | |
return xScale(d)+padding.left; | |
}) | |
.attr("y1", padding.top) | |
.attr("x2", function (d){ | |
return xScale(d)+padding.left; | |
}) | |
.attr("y2", h-padding.bottom) | |
.attr("stroke-width", 1) | |
.attr("stroke", "#eeeeee") | |
.attr("shape-rendering", "crispEdges"); | |
var groups = svg.selectAll("g") | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("class", "dataPoint"); | |
var circs = groups.append("circle") | |
.attr("cx", function (d) {return padding.left + xScale(d[variable1]);}) | |
.attr("cy", function(d) {return padding.top + yScale(d[variable2]);}) | |
.attr("r", 0) | |
.attr("fill", "#1b8fa7") | |
.on("mouseover", function(d, i){ | |
var text = this.parentNode.childNodes[1]; | |
text.style.display = "block"; | |
d3.select(this).transition() | |
.duration(300) | |
.ease("cubic-in-out") | |
.attr("r", 6); | |
}) | |
.on("mouseout", function(d, i){ | |
var text = this.parentNode.childNodes[1]; | |
text.style.display = "none"; | |
d3.select(this).transition() | |
.duration(300) | |
.ease("cubic-in-out") | |
.attr("r", 4); | |
}); | |
circs.transition() | |
.delay(function(d, i) { | |
return i * 50; | |
}) | |
.duration(500) | |
.ease("cubic-in-out") | |
.attr("r", 6) | |
.transition() | |
.attr("r", 4); | |
var text = groups.append("text") | |
.attr("x", function (d) {return padding.left + xScale(d[variable1]) - 8;}) | |
.attr("y", function(d) {return padding.top + yScale(d[variable2])+3;}) | |
.text(function(d) { | |
return d.country | |
}) | |
.attr("text-anchor", "end") | |
.attr("display", "none") | |
.attr("opacity", 1); | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left"); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate("+padding.left+","+(h-padding.bottom)+")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate("+padding.left+","+padding.top+")") | |
.call(yAxis); | |
svg.append("text") | |
.attr("x", padding.left + (w - padding.left - padding.right)/2 ) | |
.attr("y", h - padding.bottom + 40) | |
.style("text-anchor", "middle") | |
.text("disposable household income ($)"); | |
svg.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("x", -(padding.top + (h-padding.top-padding.bottom)/2)) | |
.attr("y", (padding.left-35)) | |
.style("text-anchor", "middle") | |
.text("self reported health (%)"); | |
}) | |
} |
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
body { | |
background-color: #eeeeee; | |
} | |
h1 { | |
font-family: sans-serif; | |
font-size: 24px; | |
text-transform: uppercase; | |
letter-spacing: 5px; | |
padding: none; | |
margin: 0 0 5px 0; | |
} | |
p{ | |
font-family: sans-serif; | |
font-size: 14px; | |
margin: 0 0 10px 0; | |
color: #777777; | |
} | |
text { | |
font-family: sans-serif; | |
font-size: 12px; | |
} | |
circle:hover { | |
fill: #fa6900; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #aaaaaa; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 10px; | |
} | |
#contentContainer { | |
width: 540px; | |
padding: 20px; | |
margin-left: auto; | |
margin-right: auto; | |
background-color: white; | |
} | |
#svgContainer { | |
margin: 20px 0 0 0; | |
} | |
.divider { | |
padding: none; | |
border-top: 3px #9fccd5 solid; | |
width: auto; | |
height: 0px; | |
margin: 0 0 10px 0; | |
} | |
a { | |
color: #fa6900; | |
text-decoration: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment