Skip to content

Instantly share code, notes, and snippets.

@suneric1

suneric1/betterlifeindex.csv

Created February 10, 2016 02:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save suneric1/13ab02c75b11c9a2e299 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save suneric1/13ab02c75b11c9a2e299 to your computer and use it in GitHub Desktop.
Download ZIP
Week 5: Scatterplot Made in Class
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>
<!-- 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;
transition: 0.2s;
}
circle:hover {
fill: orange;
stroke: rgba(255, 165, 0, 0.5);
stroke-width: 6px;
}
.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 &ldquo;Life Satisfaction&rdquo; scores vs. percentage of population reporting good or better health. 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:80, 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 = 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(8); // 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.yearsInEducation;
// pick a data value to plot on x axis
}));
yScale.domain(
d3.extent(data, function(d) {
return +d.personalEarnings;
// pick a data value to plot for y axis
}));
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.classed("dots", true);
// fill in the rest of the data, enter, append here.
// add a class to the circles - ".dots".
// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.
circles.attr("cx", function(d) {
return xScale(+d.yearsInEducation);
// return the value to use for your x scale here
})
.attr("cy", function(d) {
return yScale(+d.personalEarnings);
// return the value to use for your y scale here
})
.attr("r", dotRadius) // you might want to increase your dotRadius
.style("fill", function(d){
if(d.country === "United States"){
return "red";
}
}) // add a fill rule with a special case for one of the countries
.append("title")
.text(function(d) {
return d.country;
// fill in a text string here for your cheap tooltip
});
// 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("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("text")
.attr("dy",45)
.attr("transform","translate(" + width/2 + "," + height + ")")
.classed("xLabel",true)
.style("text-anchor","middle")
.text("Years In Education");
svg.append("text")
//.attr("x", 0 - height/2)
//.attr("y", 0)
.attr("dy",-60)
.attr("transform","rotate(-90) translate(" + (-height/2) + "," + "0)")
.classed("yLabel",true)
.style("text-anchor","middle")
.text("Personal Earnings");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment