Skip to content

Instantly share code, notes, and snippets.

@scotthmurray

scotthmurray/betterlifeindex.csv

Created September 7, 2015 21:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save scotthmurray/cba7154b876aa2fd2e10 to your computer and use it in GitHub Desktop.
Save scotthmurray/cba7154b876aa2fd2e10 to your computer and use it in GitHub Desktop.
Download ZIP
module1project
Raw
betterlifeindex.csv
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
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bar Chart, Framed</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 {
margin: 0;
background-color: lightGray;
font-family: Helvetica, Arial, sans-serif;
}
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 50px;
background-color: white;
box-shadow: 3px 3px 5px 6px #ccc;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 15px 0 10px 0;
}
a:link {
text-decoration: none;
color: gray;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: gray;
}
a:active {
color: steelBlue;
}
svg {
background-color: white;
}
g.bar text {
font-size: 11px;
font-weight: bold;
text-anchor: end;
opacity: 0;
}
g.bar:hover rect {
fill: orange;
}
g.bar:hover text {
opacity: 1;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<div id="container">
<h1>Not All Countries are Equally Satisfied</h1>
<p>The OECD&rsquo;s Better Life Index assigns each country a &ldquo;Life Satisfaction&rdquo; score. <strong>Source:</strong> <a href="http://stats.oecd.org/Index.aspx?DataSetCode=BLI">OECD, 2014</a></p>
</div>
<script type="text/javascript">
var w = 700;
var h = 600;
var padding = [ 20, 10, 30, 120 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
//Now SVG goes into #container instead of body
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("betterlifeindex.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.lifeSatisfaction;
}) ]);
heightScale.domain(data.map(function(d) { return d.country; } ));
//Bind data to groups (not bars directly)
var groups = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("class", "bar");
//Add a rect to each group
var rects = groups.append("rect")
.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.country);
})
.attr("width", 0)
.attr("height", heightScale.rangeBand())
.attr("fill", "steelblue");
//Add a text element to each group
groups.append("text")
.attr("x", function(d) {
return padding[3] + widthScale(d.lifeSatisfaction) - 3;
})
.attr("y", function(d) {
return heightScale(d.country) + 11;
})
.text(function(d) {
return d.lifeSatisfaction;
});
rects.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("width", function(d) {
return widthScale(d.lifeSatisfaction);
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment