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: 20px; font-size: 24px; margin-bottom: 5px; } .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; } .bouton{ padding: 2px 150px 2px 150px; margin-bottom: 50px; background-color: #f2f2f2; margin-right: 5px; } .bouton:hover{ background-color:#d6d6d6; } .bouton.high { background-color:#d6d6d6; } .label { font-size: 0; } .label.labfocus{ font-size: 14px; fill: black; } .axistitle{ font-size: 12px; } .bar2010{ fill: #fed0e7;} .bar2013{ fill: #ff0082;} .focus{ fill:#add8e6;} a { text-decoration: none; color: black;} a:hover{color: blue;} </style> </head> <body> <div class="graph"> <h2>The social cost of austerity measures in Greece between 2010 and 2013</h2> <p>Click on a country you want to highlight and see the evolution of the three indicators by clicking on 2013 or 2010.</p> <div><span id="but10" class="bouton high">2010</span><span id="but13" class="bouton">2013</span></div> <br> <svg id="svg1"></svg> <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 = 700; // Width for the actual graph H = 500; padding = [10, 0, 30, 50]; // bottom and left only RightC = 200; // ... plus some space for the rest. Hdenom = 2.5; var focusCountry = "Greece"; var svg1 = d3.select("#svg1"); svg1.attr("width", W + RightC).attr("height", H); // Scales var Wscale = d3.scale.linear() .range([padding[3], W - padding[3]]); var Hscale = d3.scale.linear() .range([padding[0], H - padding[2]]); //Axis var xAxis = d3.svg.axis() .scale(Wscale) .orient("bottom") .tickFormat(function(d) { return d + "%"; }); var yAxis = d3.svg.axis() .scale(Hscale) .orient("left"); d3.csv("greece-dataset.csv", function(data) { // Graph 1 data.sort(function(a, b) { return d3.descending(+a.materialDeprived13, +b.materialDeprived13); }); Wscale.domain([0, d3.max([ d3.max(data, function(d){return +d.materialDeprived10;}), d3.max(data, function(d){return +d.materialDeprived13;}) ])]); Hscale.domain([d3.max([ d3.max(data, function(d){return +d.medianIncome10;}), d3.max(data, function(d){return +d.medianIncome13;}) ]), 0]); dataLeg = [ // Some data to position the legend. {diam: 30, pos: 70}, {diam: 20, pos: 120}, {diam: 10, pos: 150} ]; svg1.selectAll("circle") .data(dataLeg) .enter() .append("circle") .attr("r", function(d){return d.diam;}) .attr("cy", function(d){return d.pos;}) .attr("cx", W+20) .attr("stroke", "black") .attr("fill", "white"); svg1.selectAll("text") .data(dataLeg) .enter() .append("text") .attr("class", "axistitle") .attr("x", W+60) .attr("y", function(d){return d.pos+5;}) .text(function(d){return d.diam + " %"}); svg1.append("text") .attr("class", "axistitle") .attr("x", W-20) .attr("y", 30) .text("Unemployment rate"); svg1.append("text") .attr("class", "axistitle") .attr("text-anchor", "end") .attr("x", W-padding[3]) .attr("y", H - 35) .text("Proportion of severely deprived people"); svg1.append("text") .attr("class", "axistitle") .attr("text-anchor", "end") .attr("y", padding[2] + 30) .attr("x", -padding[2]) .attr("transform", "rotate(-90)") .text("Yearly median income (in €)"); svg1.append("g") .attr("transform", "translate(0, " + (H - padding[2]) +")") .attr("class", "x axis") .call(xAxis); svg1.append("g") .attr("transform", "translate(" + padding[3] + ", 0)") .attr("class", "y axis") .call(yAxis); var points = svg1.selectAll(".materialDeprived10") .data(data) .enter() .append("g"); points.attr("transform", function(d){ return "translate(" + Wscale(d.materialDeprived10) + ", " + Hscale(d.medianIncome10) + ")"; }) .attr("class", function(d){ if(d.country==focusCountry){return "focus";} }); var circles = points.append("circle").attr("class", function(d){ if(d.country==focusCountry){return "bar2010 focus";} else{return "bar2010";} }) .attr("r", function(d) { return d.unemploymentRate10; }) .attr("title", function(d){return d.country;}); var labels = points.append("text") .attr("class", "label") .classed("labfocus", function(d){ if(d.country==focusCountry){return true;} }) .attr({x:20, y:0}) .text(function(d){return d.country;}); //Interactions and transitions //This is to highlight certain circles points.on("mousedown", function(d){ //d3.selectAll(".focus").classed("focus", false); var ca = d3.select(this); if(ca.attr("class")!="focus"){ ca.classed("focus", true).select("circle").classed("focus", true); ca.select("text").classed("labfocus", true); ca.select("circle").attr("stroke", null); } else{ ca.classed("focus", false).select("circle").classed("focus", false); ca.select("text").classed("labfocus", false); } focusCountry = d.country; }); points.on("mouseover", function(d){ d3.select(this).select("text").style("font-size", "14px"); d3.select(this).select("circle").attr("stroke", "black"); }).on("mouseout", function(d){ if(d3.select(this).attr("class")!="focus"){ d3.select(this).select("text").style("font-size", "0"); d3.select(this).select("circle").attr("stroke", null); } else {d3.select(this).select("circle").attr("stroke", null);} }); //And this is to show the data for a particular year. d3.select("#but10").on("mousedown", function(){ d3.select(this).classed("high", true); d3.select("#but13").classed("high", false); points.transition(2000).duration(1000).attr("transform", function(d){ return "translate(" + Wscale(d.materialDeprived10) + ", " + Hscale(d.medianIncome10) + ")"; }).select("circle").attr("r", function(d) { return d.unemploymentRate10; }); }); d3.select("#but13").on("mousedown", function(){ d3.select(this).classed("high", true); d3.select("#but10").classed("high", false); points.transition(2000).duration(1000).attr("transform", function(d){ return "translate(" + Wscale(d.materialDeprived13) + ", " + Hscale(d.medianIncome13) + ")"; }).select("circle").attr("r", function(d) { return d.unemploymentRate13; }); }); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js