xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>The cost of austerity</title> <script type="text/javascript" src="https://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="https://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="https://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="https://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> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js