Skip to content

Instantly share code, notes, and snippets.

@Mavromatika

Mavromatika/greece-dataset.csv Secret

Created September 9, 2015 21:00
Show Gist options
  • Save Mavromatika/ea0060d93ca6d04f2c7d to your computer and use it in GitHub Desktop.
Save Mavromatika/ea0060d93ca6d04f2c7d to your computer and use it in GitHub Desktop.
Download ZIP
Austerity in Greece - axis
Raw
greece-dataset.csv
country materialDeprived10 materialDeprived13 medianIncome10 medianIncome13 unemploymentRate10 unemploymentRate13
Austria 4.3 4.2 21058 22073 4.8 5.4
Belgium 5.9 5.1 19464 21483 8.3 8.4
Cyprus 11.2 16.1 16180 15873 6.3 15.9
Estonia 9 7.6 5727 6579 16.7 8.6
Euro area (18 countries) 5.9 7.5 17165 17382 10.1 12
Finland 2.8 2.5 21349 23272 8.4 8.2
France 5.8 5.1 19960 20954 9.3 10.3
Germany 4.5 5.4 18797 19582 7 5.2
Greece 11.6 20.3 11963 8371 12.7 27.5
Ireland 5.7 9.9 20512 19065 13.9 13.1
Italy 6.9 12.4 15937 15733 8.4 12.1
Latvia 27.6 24 4488 4666 19.5 11.9
Lithuania 19.9 16 4030 4698 17.8 11.8
Luxembourg 0.5 1.8 32333 33301 4.6 5.9
Malta 6.5 9.5 10435 12093 6.9 6.4
Netherlands 2.2 2.5 20292 20839 5 7.3
Portugal 9 10.9 8678 8177 12 16.4
Slovakia 11.4 10.2 6117 6737 14.5 14.2
Slovenia 5.9 6.7 11736 11852 7.3 10.1
Spain 4.9 6.2 14605 13524 19.9 26.1
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The cost of austerity</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Calibri;
width: 960px;
margin: 0 auto;
}
svg {
background-color: white;
}
.graph {
position: relative;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
svg { float: left;}
.comment {
position: absolute;
top: 60px;
left: 550px;
margin: 30px;
padding: 5px;
width: 200px;
text-align: justify;
}
.clear{ clear: both;}
h2 {
margin-top: 0;
font-size: 18px;
}
.source {
font-style: italic;
margin-top: 0;
margin-bottom: 0;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.bar2010{
fill: #fed0e7;}
.bar2013{
fill: #ff0082;}
.greece10{
fill:#add8e6;}
.greece13{
fill:#0000ff;}
a {
text-decoration: none;
color: black;}
a:hover{color: blue;}
</style>
</head>
<body>
<h1>The social cost of austerity measures in Greece between 2010 and 2013</h1>
<div class="graph">
<h2>Severely materially deprived people (% of population)</h2>
<svg id="svg1"></svg>
<div class="comment"><p>At the onset of the austerity measures in 2010, Greece had the 3rd largest percentage of people living in extremely precarious conditions.</p>
<p>Three years later, this proportion had increased dramatically, with Greece now ranking 2nd.</p></div>
<div class="clear"></div>
<p class="source"><a href="http://ec.europa.eu/eurostat/data/database">Source : Eurostat</a></p>
</div>
<div class="graph">
<h2>Median equivalized income (in € per year)</h2>
<svg id="svg2"></svg>
<div class="comment"><p>The median income, expressed in Euros per year, represents the value which splits the population in half : 50 % of the population earns either more, or less. It is less sensitive to outlying values (i.e. to a few extremely rich individuals in the population) and is thus more representative of the "average" yearly income.</p>
<p>The Greeks were among the poorest in the Eurozone in 2010 (ranking 13/19), and were even poorer in 2013 (15/19).</p>
</div>
<div class="clear"></div>
<p class="source"><a href="http://ec.europa.eu/eurostat/data/database">Source : Eurostat</a></p>
</div>
<div class="graph">
<h2>Unemployment rate (in % of active population)</h2>
<svg id="svg3"></svg>
<div class="comment"><p>A more common indicator, the unemployment rate increased even more dramatically. In Greece between 2010 and 2013, it boomed from 12.7 to 27.5 %.</p></div>
<div class="clear"></div>
<p class="source"><a href="http://ec.europa.eu/eurostat/data/database">Source : Eurostat</a></p>
</div>
<script type="text/javascript">
//A few variables for the layout
barH = 5;
barP = 2;
legendW = 20;
legendH = 10;
W = 500; // Width for the actual graph
H = 500;
padding = [30, 10]; // bottom and left only
RightC = 200; // ... plus some space for the rest.
Hdenom = 4;
var svg1 = d3.select("#svg1");
var svg2 = d3.select("#svg2");
var svg3 = d3.select("#svg3");
svg1.attr("width", W + RightC).attr("height", H);
svg2.attr("width", W + RightC).attr("height", H);
svg3.attr("width", W + RightC).attr("height", H);
// Scales
var Wscale = d3.scale.linear()
.range([0, W - padding[1]]);
var Hscale = d3.scale.ordinal()
.rangeRoundBands([0, H - padding[0]]);
//Axis
var xAxis = d3.svg.axis()
.scale(Wscale)
.orient("bottom");
d3.csv("greece-dataset.csv", function(data) {
// Graph 1
data.sort(function(a, b) {
return d3.descending(+a.materialDeprived10, +b.materialDeprived10);
});
Wscale.domain([0, d3.max([
d3.max(data, function(d){return +d.materialDeprived10;}),
d3.max(data, function(d){return +d.materialDeprived13;})
])]);
Hscale.domain(d3.range(data.length));
svg1.append("rect").attr({
class: "legend",
x: W + RightC - legendW,
y: 0,
height: legendH,
width: legendW/2,
fill: "lightblue"});
svg1.append("rect").attr({
class: "legend",
x: W + RightC - legendW,
y: 12,
height: legendH,
width: legendW/2,
fill: "blue"});
svg1.append("rect").attr({
class: "legend",
x: W + RightC - legendW/2,
y: 0,
height: legendH,
width: legendW/2,
fill: "#fed0e7"});
svg1.append("rect").attr({
class: "legend",
x: W + RightC - legendW/2,
y: 12,
height: legendH,
width: legendW/2,
fill: "#ff0082"});
svg1.append("text").attr({x: W + RightC - legendW - 40,
y: 10}).text("2010");
svg1.append("text").attr({x: W + RightC - legendW - 40,
y: 22}).text("2013");
svg1.append("g")
.attr("transform", "translate(" + padding[1] + ", " + (H - padding[0]) +")")
.attr("class", "x axis")
.call(xAxis);
var G1rects2010 = svg1.selectAll(".materialDeprived10")
.data(data)
.enter()
.append("rect");
var G1rects2013 = svg1.selectAll(".materialDeprived13")
.data(data)
.enter()
.append("rect");
var G1text1 = svg1.selectAll(".countries")
.data(data)
.enter()
.append("text");
G1rects2010.attr("class", function(d){
if(d.country=="Greece"){return "bar2010 materialDeprived13 greece10";}
else{return "bar2010 materialDeprived13";}
})
.attr("x", padding[1])
.attr("y", function(d, i) {
return i * Hscale.rangeBand();
})
.attr("width", function(d) {
return Wscale(d.materialDeprived10);
})
.attr("height", Hscale.rangeBand() / Hdenom);
G1rects2013.attr("class", function(d){
if(d.country=="Greece"){return "bar2013 materialDeprived13 greece13";}
else{return "bar2013 materialDeprived13";}
})
.attr("x", padding[1])
.attr("y", function(d, i) {
return i * Hscale.rangeBand() + Hscale.rangeBand() / Hdenom;
})
.attr("width", function(d) {
return Wscale(d.materialDeprived13);
})
.attr("height", Hscale.rangeBand() / Hdenom)
.append("title").text(function(d) { return d.country; });
G1text1.attr("class", "countries")
.attr("x", function(d) {
return Wscale(d3.max([+d.materialDeprived10, +d.materialDeprived13])) + 10 + padding[1];
})
.attr("y", function(d, i) {
return i * Hscale.rangeBand() + (Hscale.rangeBand()/Hdenom)*2;
})
.text(function(d) {
return d.country;
});
// Graph 2
data.sort(function(a, b) {
return d3.descending(+a.medianIncome10, +b.medianIncome10);
});
Wscale.domain([0, d3.max([
d3.max(data, function(d){return +d.medianIncome10;}),
d3.max(data, function(d){return +d.medianIncome13;})
])]);
Hscale.domain(d3.range(data.length));
svg2.append("rect").attr({
class: "legend",
x: W + RightC - legendW,
y: 0,
height: legendH,
width: legendW/2,
fill: "lightblue"});
svg2.append("rect").attr({
class: "legend",
x: W + RightC - legendW,
y: 12,
height: legendH,
width: legendW/2,
fill: "blue"});
svg2.append("rect").attr({
class: "legend",
x: W + RightC - legendW/2,
y: 0,
height: legendH,
width: legendW/2,
fill: "#fed0e7"});
svg2.append("rect").attr({
class: "legend",
x: W + RightC - legendW/2,
y: 12,
height: legendH,
width: legendW/2,
fill: "#ff0082"});
svg2.append("text").attr({x: W + RightC - legendW - 40,
y: 10}).text("2010");
svg2.append("text").attr({x: W + RightC - legendW - 40,
y: 22}).text("2013");
svg2.append("g")
.attr("transform", "translate(" + padding[1] + ", " + (H - padding[0]) +")")
.attr("class", "x axis")
.call(xAxis);
var G2rects2010 = svg2.selectAll(".medianIncome10")
.data(data)
.enter()
.append("rect");
var G2rects2013 = svg2.selectAll(".medianIncome13")
.data(data)
.enter()
.append("rect");
var G2text1 = svg2.selectAll(".countries")
.data(data)
.enter()
.append("text");
G2rects2010.attr("class", function(d){
if(d.country=="Greece"){return "bar2010 medianIncome10 greece10";}
else{return "bar2010 medianIncome10";}
})
.attr("x", padding[1])
.attr("y", function(d, i) {
return i * Hscale.rangeBand();
})
.attr("width", function(d) {
return Wscale(d.medianIncome10);
})
.attr("height", Hscale.rangeBand() / Hdenom);
G2rects2013.attr("class", function(d){
if(d.country=="Greece"){return "bar2013 medianIncome13 greece13";}
else{return "bar2013 medianIncome13";}
})
.attr("x", padding[1])
.attr("y", function(d, i) {
return i * Hscale.rangeBand() + Hscale.rangeBand() / Hdenom;
})
.attr("width", function(d) {
return Wscale(d.medianIncome13);
})
.attr("height", Hscale.rangeBand() / Hdenom)
.append("title").text(function(d) { return d.country; });
G2text1.attr("class", "countries")
.attr("x", function(d) {
return Wscale(d3.max([+d.medianIncome10, +d.medianIncome13])) + 10 + padding[1];
})
.attr("y", function(d, i) {
return i * Hscale.rangeBand() + (Hscale.rangeBand()/Hdenom)*2;
})
.text(function(d) {
return d.country;
});
// Graph 3
data.sort(function(a, b) {
return d3.descending(+a.unemploymentRate10, +b.unemploymentRate10);
});
Wscale.domain([0, d3.max([
d3.max(data, function(d){return +d.unemploymentRate10;}),
d3.max(data, function(d){return +d.unemploymentRate13;})
])]);
Hscale.domain(d3.range(data.length));
svg3.append("rect").attr({
class: "legend",
x: W + RightC - legendW,
y: 0,
height: legendH,
width: legendW/2,
fill: "lightblue"});
svg3.append("rect").attr({
class: "legend",
x: W + RightC - legendW,
y: 12,
height: legendH,
width: legendW/2,
fill: "blue"});
svg3.append("rect").attr({
class: "legend",
x: W + RightC - legendW/2,
y: 0,
height: legendH,
width: legendW/2,
fill: "#fed0e7"});
svg3.append("rect").attr({
class: "legend",
x: W + RightC - legendW/2,
y: 12,
height: legendH,
width: legendW/2,
fill: "#ff0082"});
svg3.append("text").attr({x: W + RightC - legendW - 40,
y: 10}).text("2010");
svg3.append("text").attr({x: W + RightC - legendW - 40,
y: 22}).text("2013");
svg3.append("g")
.attr("transform", "translate(" + padding[1] + ", " + (H - padding[0]) +")")
.attr("class", "x axis")
.call(xAxis);
var G3rects2010 = svg3.selectAll(".unemploymentRate10")
.data(data)
.enter()
.append("rect");
var G3rects2013 = svg3.selectAll(".unemploymentRate13")
.data(data)
.enter()
.append("rect");
var G3text1 = svg3.selectAll(".countries")
.data(data)
.enter()
.append("text");
G3rects2010.attr("class", function(d){
if(d.country=="Greece"){return "bar2010 unemploymentRate10 greece10";}
else{return "bar2010 unemploymentRate10";}
})
.attr("x", padding[1])
.attr("y", function(d, i) {
return i * Hscale.rangeBand();
})
.attr("width", function(d) {
return Wscale(d.unemploymentRate10);
})
.attr("height", Hscale.rangeBand() / Hdenom);
G3rects2013.attr("class", function(d){
if(d.country=="Greece"){return "bar2013 unemploymentRate13 greece13";}
else{return "bar2013 unemploymentRate13";}
})
.attr("x", padding[1])
.attr("y", function(d, i) {
return i * Hscale.rangeBand() + Hscale.rangeBand() / Hdenom;
})
.attr("width", function(d) {
return Wscale(d.unemploymentRate13);
})
.attr("height", Hscale.rangeBand() / Hdenom)
.append("title").text(function(d) { return d.country; });
G3text1.attr("class", "countries")
.attr("x", function(d) {
return Wscale(d3.max([+d.unemploymentRate10, +d.unemploymentRate13])) + 10 + padding[1];
})
.attr("y", function(d, i) {
return i * Hscale.rangeBand() + (Hscale.rangeBand()/Hdenom)*2;
})
.text(function(d) {
return d.country;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment