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; } 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: 400px; 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; } </style> </head> <body> <div class="graph"> <h2>Severely materially deprived people (% of population)</h2> <svg id="svg1" width="500" height="500"></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">Source : Eurostat</p> </div> <div class="graph"> <h2>Median equivalized income (in €)</h2> <svg id="svg2" width="500" height="500"></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">Source: Eurostat</p> </div> <div class="graph"> <h2>Unemployment rate (in %)</h2> <svg id="svg3" width="500" height="500"></svg> <div class="comment"><p>A more common indicator, the unemployment rate suffered from an even more dramatic increase. In Greece between 2010 and 2013, it boomed from 12.7 to 27.5 %.</p></div> <div class="clear"></div> <p class="source">Source: Eurostat</p> </div> <script type="text/javascript"> var svg1 = d3.select("#svg1"); var svg2 = d3.select("#svg2"); var svg3 = d3.select("#svg3"); //A few variables for the layout barH = 5; barP = 2; legendW = 20; legendH = 10; d3.csv("greece-dataset.csv", function(data) { // Graph 1 data.sort(function(a, b) { return d3.descending(+a.materialDeprived10, +b.materialDeprived10); }); svg1.append("rect").attr({ class: "legend", x: function(){return 500 - legendW;}, y: 0, height: legendH, width: legendW, fill: "lightblue"}); svg1.append("rect").attr({ class: "legend", x: function(){return 500 - legendW;}, y: 12, height: legendH, width: legendW, fill: "blue"}); svg1.append("text").attr({x: function(){return 500 - legendW - 40;}, y: 10}).text("2010"); svg1.append("text").attr({x: function(){return 500 - legendW - 40;}, y: 22}).text("2013"); 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", "materialDeprived10") .attr("x", 0) .attr("y", function(d, i) { return i * 2 * (barH + barP) + i * 10; }) .attr("width", function(d) { return d.materialDeprived10 * 10; }) .attr("height", barH) .attr("fill", "lightblue"); G1rects2013.attr("class", "materialDeprived13") .attr("x", 0) .attr("y", function(d, i) { return (i * 2 + 1) * (barH + barP) + i * 10; }) .attr("width", function(d) { return d.materialDeprived13 * 10; }) .attr("height", barH) .attr("fill", "blue") .append("title").text(function(d) { return d.country; }); G1text1.attr("class", "countries") .attr("x", function(d) { return (d3.max([+d.materialDeprived10, +d.materialDeprived13]) * 10) + 10; }) .attr("y", function(d, i) { return i * 2 * (barH + barP) + barH + i * 10 + 5; }) .text(function(d) { return d.country; }); // Graph 2 data.sort(function(a, b) { return d3.descending(+a.medianIncome10, +b.medianIncome10); }); svg2.append("rect").attr({ class: "legend", x: function(){return 500 - legendW;}, y: 0, height: legendH, width: legendW, fill: "lightblue"}); svg2.append("rect").attr({ class: "legend", x: function(){return 500 - legendW;}, y: 12, height: legendH, width: legendW, fill: "blue"}); svg2.append("text").attr({x: function(){return 500 - legendW - 40;}, y: 10}).text("2010"); svg2.append("text").attr({x: function(){return 500 - legendW - 40;}, y: 22}).text("2013"); 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", "medianIncome10") .attr("x", 0) .attr("y", function(d, i) { return i * 2 * (barH + barP) + i * 10; }) .attr("width", function(d) { return d.medianIncome10 / 100; }) .attr("height", barH) .attr("fill", "lightblue"); G2rects2013.attr("class", "medianIncome13") .attr("x", 00) .attr("y", function(d, i) { return (i * 2 + 1) * (barH + barP) + i * 10; }) .attr("width", function(d) { return d.medianIncome13 / 100; }) .attr("height", barH) .attr("fill", "blue") .append("title").text(function(d) { return d.country; }); G2text1.attr("class", "countries") .attr("x", function(d) { return (d3.max([+d.medianIncome10, +d.medianIncome13]) / 100) + 10; }) .attr("y", function(d, i) { return i * 2 * (barH + barP) + barH + i * 10 + 5; }) .text(function(d) { return d.country; }); // Graph 3 data.sort(function(a, b) { return d3.descending(+a.unemploymentRate10, +b.unemploymentRate10); }); svg3.append("rect").attr({ class: "legend", x: function(){return 500 - legendW;}, y: 0, height: legendH, width: legendW, fill: "lightblue"}); svg3.append("rect").attr({ class: "legend", x: function(){return 500 - legendW;}, y: 12, height: legendH, width: legendW, fill: "blue"}); svg3.append("text").attr({x: function(){return 500 - legendW - 40;}, y: 10}).text("2010"); svg3.append("text").attr({x: function(){return 500 - legendW - 40;}, y: 22}).text("2013"); 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", "unemploymentRate10") .attr("x", 0) .attr("y", function(d, i) { return i * 2 * (barH + barP) + i * 10; }) .attr("width", function(d) { return d.unemploymentRate10 * 10; }) .attr("height", barH) .attr("fill", "lightblue"); G3rects2013.attr("class", "unemploymentRate13") .attr("x", 0) .attr("y", function(d, i) { return (i * 2 + 1) * (barH + barP) + i * 10; }) .attr("width", function(d) { return d.unemploymentRate13 * 10; }) .attr("height", barH) .attr("fill", "blue") .append("title").text(function(d) { return d.country; }); G3text1.attr("class", "countries") .attr("x", function(d) { return (d3.max([+d.unemploymentRate10, +d.unemploymentRate13]) * 10) + 10; }) .attr("y", function(d, i) { return i * 2 * (barH + barP) + barH + i * 10 + 5; }) .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