Skip to content

Instantly share code, notes, and snippets.

@sdbernard

sdbernard/betterlifeindex.csv

Created October 27, 2015 23:55
Show Gist options
  • Save sdbernard/df7aa7ee4c656e75fc14 to your computer and use it in GitHub Desktop.
Save sdbernard/df7aa7ee4c656e75fc14 to your computer and use it in GitHub Desktop.
Download ZIP
d3 intermediate module 1
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
Russia 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
Slovakia 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
UK 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
US 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>Does money buy happiness?</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:100normal,200normal,300normal,400normal,500normal,600normal,700normal,800normal,900normal|Open+Sans:400normal|Lato:400normal|Roboto:400normal|Oswald:400normal|Droid+Sans:400normal|Droid+Serif:400normal|Lobster:400normal|PT+Sans:400normal|Ubuntu:400normal|Playfair+Display:400normal&amp;subset=all" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #fff1e0;
font-family: 'Raleway', sans-serif;
font-weight: 400;
margin-top: 3em;
}
.content-holder {
background: #fff9f1;
padding: 20px 20px 14px;
width: 760px;
box-sizing: border-box;
margin: 0 auto;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
}
h1 {
font-weight: 300;
font-size: 36px;
color: #333333;
margin-top: 0;
margin-bottom: 0;
margin-left: -2px;
}
h6 {
font-size: 12px;
margin-bottom: 0.2em;
margin-top: 6px;
font-weight: 800;
text-transform: uppercase;
color: #2bbbbf;
}
form {
margin-left: 40px;
font-weight: 400;
font-size: 12px;
color: #74736c;
position: relative;
float: right;
top: 16px;
}
p {
margin-bottom: 4px;
}
.chart-holder {
margin-top: 8px;
}
circle {
fill: #2bbbbf;
cursor: pointer;
transition: fill 0.3s;
}
circle:hover {
fill: #ff7f8a;
transition: fill 0s;
}
.y.axis path,
.x.axis path {
fill: none;
}
.axis line {
fill: none;
stroke: #e9decf;
stroke-dasharray:2,1;
shape-rendering: crispEdges;
}
.axis text {
font-size: 12px;
fill: #74736c;
}
.axislabel {
font-size: 13px;
fill: #74736c;
}
.subtitle {
font-size: 15px;
color: #74736c;
display: inline-block;
}
.source,
.note {
font-size: 12px;
}
a {
text-decoration: none;
color: #27757b;
transition: color 0.3s;
}
a:hover {
color: #000;
transition: color 0s;
}
.tooltip{
padding: 6px;
background-color: #fff;
border-radius: 4px;
position: absolute;
font-size: 13px;
line-height: 18px;
visibility: hidden;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
font-weight: 300;
}
.country{
font-weight: 600;
font-size: 14px;
/*margin-bottom: -8px;
display: block;*/
}
.dataNum{
font-weight: 600;
/*font-family: arial;*/
}
.cLabel{
font-size: 11px;
font-weight: 500;
pointer-events: none;
opacity: 0;
}
.labelsOn {
opacity: 1;
transition: opacity 0.3s;
}
.labelsOff {
opacity: 0;
transition: opacity 0.3s;
}
</style>
</head>
<body>
<div class="tooltip"></div>
<div class="content-holder">
<h6>Wealth & wellbeing</h6>
<h1>Does money buy happiness?</h1>
<p>The question itself is a cliché, but is there any truth in the old saying? Let’s find out by comparing household wealth with life satisfaction</p>
<p class="subtitle">Better Life Index &ldquo;Life Satisfaction&rdquo; vs Household Financial Wealth</p>
<form>
<input id="cb_0" type="checkbox" class="myCB" name="vehicle" value="states"/>
<label id="cbLabel" for="cb_0">Show country labels</label>
</form>
<div class="chart-holder"></div>
<p class="note">* Average total value of a household’s financial assets (savings, stocks) minus their liabilities (loans)</p>
<p class="source">Source: <a href="http://stats.oecd.org/Index.aspx?DataSetCode=BLI">OECD</a>, 2014</p>
</div>
<script type="text/javascript">
var margin = { top: 10, right: 10, bottom: 14, left: 45 },
width = 720 - margin.left - margin.right,
height = 640 - margin.top - margin.bottom;
var divisor = 1000;
var numFormat = d3.format(',')
var svg = d3.select('.chart-holder').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
svg.append('text')
.text('Life satisfaction index')
.attr('transform', function(d) {
return 'rotate(-90,0,293)'
})
.attr('x', 0)
.attr('y', height/2)
.attr('text-anchor', 'middle')
.attr('class', 'y axislabel')
.attr('opacity', 0)
.transition().attr('opacity', 1).ease('quad').duration(500);
svg.append('text')
.text('Household net financial wealth ($’000)*')
.attr('x', (width + margin.left + margin.right)/2)
.attr('y', height + 18 )
.attr('text-anchor', 'middle')
.attr('class', 'x axislabel')
.attr('opacity', 0)
.transition().attr('opacity', 1).ease('quad').duration(500);
var xScale = d3.scale.linear()
.range([0, width]);
var yScale = d3.scale.linear()
.range([height-margin.top - margin.bottom, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.tickSize(-height)
.ticks(5)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(yScale)
.tickSize(-width)
.ticks(10)
.orient('left');
d3.csv('betterlifeindex.csv', function(data) {
data.sort(function (a,b) {return d3.descending(+a.householdNetFinancialWealth, +b.householdNetFinancialWealth); });
var maxX = d3.max(data, function(d) { return +d.householdNetFinancialWealth +10000; })
var minX = 0
var maxY = d3.max(data, function(d) { return +d.lifeSatisfaction +1; })
var minY = d3.min(data, function(d) { return +d.lifeSatisfaction -1; })
console.log(minY);
xScale.domain([minX / divisor, maxX / divisor]);
yScale.domain([minY, maxY]);
svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + (height - margin.bottom ) + ')')
.attr('class', 'x axis')
.call(xAxis)
.attr('opacity', 0)
.transition().attr('opacity', 1).ease('quad').duration(500);
svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('class', 'y axis')
.call(yAxis)
.attr('opacity', 0)
.transition().attr('opacity', 1).ease('quad').duration(500);
var chart = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var circlegroups = chart.selectAll('g')
.data(data)
.enter()
.append('g')
var circles = circlegroups.append('circle')
.attr({
'r': 8,
'cx': 0,
'cy': height-margin.bottom-margin.top,
'opacity': 0
});
circles.transition().delay(function(d, i) { return (i * 30) + 300; }).attr({
'cx': function(d) { return xScale(d.householdNetFinancialWealth / divisor); },
'cy': function(d) { return yScale(d.lifeSatisfaction); },
'opacity': 1
}).ease('quad').duration(500);
circlegroups.append('text')
.attr({
'class': 'cLabel',
'x': function(d) { return xScale(d.householdNetFinancialWealth / divisor); },
'y': function(d) { return yScale(d.lifeSatisfaction); },
'dx': 8,
'dy': -8
})
.text(function(d) { return d.country; });
circles.style('cursor', 'pointer')
circles.on('mouseover', function(d) {
d3.select(this)
.classed('hover', true)
.transition()
.duration(50)
.attr('r', 10)
tt = d3.select('.tooltip');
tt.html('<span class="country">' + d.country + '</span><br/>' + 'Wealth: <span class="dataNum">$' + numFormat(d.householdNetFinancialWealth) + '</span><br/>Life satisfaction: <span class="dataNum">' + d.lifeSatisfaction + '</span>')
.style('top', d3.event.pageY - 12 + 'px')
.style('visibility', 'visible')
})
circles.on('mouseout', function() {
d3.select(this)
.classed('hover', false)
.transition()
.duration(50)
.attr('r', 8)
tt.style('visibility', 'hidden')
})
circles.on('mousemove', function (d) {
var toolW = d3.select('.tooltip').node().getBoundingClientRect().width;
if(d3.event.pageX > (width - toolW)) {
tt.style('left', d3.event.pageX - toolW - 12 + 'px')
} else {
tt.style('left', d3.event.pageX + 12 + 'px')
}
})
d3.select('.myCB').on('click', function() {
if (this.checked) {
d3.selectAll('.cLabel')
.classed('labelsOn', true)
.classed('labelsOff', false)
}
else {
d3.selectAll('.cLabel')
.classed('labelsOff', true)
.classed('labelsOn', false)
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment