Greece - scatter

<!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;
                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