Austerity in Greece - Mk3

<!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: #ededed;
                font-family: Calibri;
                width: 960px;
                margin: 0 auto;
			}

svg {
				background-color: #ededed;
			}
            .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;
			}
            .y.axis path, .y.axis line {
                opacity: 0;
            }
            .bar2010{
                fill: #b2ffe4;}
            .bar2013{
                fill: #ffa6d4;}
            .greece10{
                fill:#00ffa7;}
            .greece13{
                fill:#ff0082;}
            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, 130]; // bottom and left only
            RightC = 200; // ... plus some space for the rest.
            Hdenom = 2.5;
            Legcolors = {'others':["#b2ffe4", "#ffa6d4"],'greece': ["#00ffa7", "#ff0082"]};

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; });
              
            // Graph 2
                data.sort(function(a, b) {
					return d3.descending(+a.medianIncome13, +b.medianIncome13);
				});
                Wscale.domain([0, d3.max([
                    d3.max(data, function(d){return +d.medianIncome10;}),
                    d3.max(data, function(d){return +d.medianIncome13;})
                ])]);
                Hscale.domain(data.map(function(d) { return d.country; } ));
                svg2.append("rect").attr({
                                        class: "legend",
                                        x: W + RightC - legendW,
                                        y: 0,
                                        height: legendH,
                                        width: legendW/2,
                                        fill: Legcolors.others[0]});
                svg2.append("rect").attr({
                                        class: "legend",
                                        x: W + RightC - legendW,
                                        y: 12,
                                        height: legendH,
                                        width: legendW/2,
                                        fill: Legcolors.others[1]});
                svg2.append("rect").attr({
                                        class: "legend",
                                        x: W + RightC - legendW/2,
                                        y: 0,
                                        height: legendH,
                                        width: legendW/2,
                                        fill: Legcolors.greece[0]});
                svg2.append("rect").attr({
                                        class: "legend",
                                        x: W + RightC - legendW/2,
                                        y: 12,
                                        height: legendH,
                                        width: legendW/2,
                                        fill: Legcolors.greece[1]});
                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);
                svg2.append("g")
                        .attr("transform", "translate(" + padding[1] + ", 0)")
                        .attr("class", "y axis")
                        .call(yAxis);
                                        
				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; });
                
            // Graph 3
                data.sort(function(a, b) {
					return d3.descending(+a.unemploymentRate13, +b.unemploymentRate13);
				});
                Wscale.domain([0, d3.max([
                    d3.max(data, function(d){return +d.unemploymentRate10;}),
                    d3.max(data, function(d){return +d.unemploymentRate13;})
                ])]);
                Hscale.domain(data.map(function(d) { return d.country; } ));
                svg3.append("rect").attr({
                                        class: "legend",
                                        x: W + RightC - legendW,
                                        y: 0,
                                        height: legendH,
                                        width: legendW/2,
                                        fill: Legcolors.others[0]});
                svg3.append("rect").attr({
                                        class: "legend",
                                        x: W + RightC - legendW,
                                        y: 12,
                                        height: legendH,
                                        width: legendW/2,
                                        fill: Legcolors.others[1]});
                svg3.append("rect").attr({
                                        class: "legend",
                                        x: W + RightC - legendW/2,
                                        y: 0,
                                        height: legendH,
                                        width: legendW/2,
                                        fill: Legcolors.greece[0]});
                svg3.append("rect").attr({
                                        class: "legend",
                                        x: W + RightC - legendW/2,
                                        y: 12,
                                        height: legendH,
                                        width: legendW/2,
                                        fill: Legcolors.greece[1]});
                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);
                svg3.append("g")
                        .attr("transform", "translate(" + padding[1] + ", 0)")
                        .attr("class", "y axis")
                        .call(yAxis);
                                        
				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; });
                
			});

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js