-
-
Save Mavromatika/ea0060d93ca6d04f2c7d to your computer and use it in GitHub Desktop.
Austerity in Greece - axis
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 | 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 |
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>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