The cost of austerity in Greece

<!DOCTYPE html>
<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