Elections, Lower Austria, changes in turnout and electorate

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Election Results, Lower Austria, 1995 vs. 2015</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="slope_text">
<h1>Voters and turnout</h1>
From 1995 to 2015, the number of eligible voters in Lower Austria has increased about 19 percent or 240,000 people. In the same period the number of actual voters did only rise about 4 percent or 35,000.<br /><br />While the electorate has grown in 521 out of 566 towns, the absolute number of votes cast in 2015 was acutally lower in 198 towns than in 1995.</div>
<div id="slope"></div>
<div id="region">Lower Austria is dominated by small municipalities. Only 11 towns have an electorate larger than 12,000 people, only 4 exceed 20,000*. Divided into its four main regions, the declining turnout is visible in each one of them. Small increases can only be found in towns with less than 2,500 eligible voters.<br /><span class="annotation">*These 11 towns are excluded from the following plots and shown separately below. There are also four so called Statuarstaedte which follow a different election calendar, therefore they are not included.</span>
<div id="regs">
<div id="reg1"></div>
<div id="reg2"></div>
<div id="reg3"></div>
<div id="reg4"></div>
</div>
</div>
<div id="lm">The turnout in the larger towns was also lower than 20 years ago. While the electorate has grown in all of those municipalities, the absolute number of votes cast in 2015 was actually lower in 8 out of the 11 displayed towns. The chart below compares the changes in turnout, eligible voters and votes cast in percent.
</div>
<div id="electorate"></div>

var slope_width=400;
var slope_height=200;
var svg_slope=d3.select("#slope").append("svg").attr("width",slope_width).attr("height",slope_height);

d3.csv("data_turnout.csv", function(data)
{

for (i=0;i<data.length;i++)
{
data[i].turnout_change=+data[i].turnout_change;
data[i].votes_change=+data[i].votes_change;
data[i].voters_change=+data[i].voters_change;
data[i].voters_change_p=+data[i].voters_change_p;
data[i].votes_change_p=+data[i].votes_change_p;
data[i].idname=data[i].name.replace(/[\.,\s+]/g, ''); //to avoid spaces and dots in the class of the element for proper selection
}

tmin=d3.min(data,function(d){return d.turnout_change;});
tmax=d3.max(data,function(d){return d.turnout_change;});

if (tmax>tmin*(-1))
{
tmin=tmax*(-1);
}
else
{
tmax=tmin*(-1);
}
yscale.domain([tmin,tmax]);

vmin=d3.min(data,function(d){return +d.electorate_2015;});
vmax=d3.max(data.filter(function(d){return +d.electorate_2015<=12000;}),function(d){return +d.electorate_2015;});

var rscale=d3.scale.linear().domain([vmin,vmax]).range([4,8]); //another scale to adjust the circle-radius to the size of the electorate
xscale.domain([0,vmax]); //setting the domain for both scales

//slope graph
var pad_left=15;
var text_pad=140;

var yscale_abs=d3.scale.linear().domain([votes_1995,voters_2015]).range([slope_height-60,60]);

svg_slope.append("line").attr("x1",text_pad).attr("y1",yscale_abs(voters_1995)).attr("x2",slope_width-text_pad).attr("y2",yscale_abs(voters_2015)).style("stroke","#bb131a").attr("class","slope");
svg_slope.append("line").attr("x1",text_pad).attr("y1",yscale_abs(votes_1995)).attr("x2",slope_width-text_pad).attr("y2",yscale_abs(votes_2015)).style("stroke","#4d94b1").attr("class","slope");

svg_slope.selectAll(".labels").data(labels).enter().append("text").attr("x",0).attr("y",function(d,i){return i==0 ? yscale_abs(voters_1995) : yscale_abs(votes_1995);}).text(function(d){return d;}).style("text-anchor","start").attr("dy","0.3em");

svg_slope.selectAll(".values").data(labels).enter().append("text").attr("x",text_pad-5).attr("y",function(d,i){return i==0 ? yscale_abs(voters_1995) : yscale_abs(votes_1995);}).text(function(d,i){return i==0 ? d3.format(",")(voters_1995) : d3.format(",")(votes_1995);}).style("text-anchor","end").attr("dy","0.3em");

svg_slope.selectAll(".values").data(labels).enter().append("text").attr("x",slope_width-text_pad+60).attr("y",function(d,i){return i==0 ? yscale_abs(voters_2015) : yscale_abs(votes_2015);}).text(function(d,i){return i==0 ? d3.format(",")(voters_2015) : d3.format(",")(votes_2015);}).style("text-anchor","end").attr("dy","0.3em");

svg_slope.append("text").attr("x",110).attr("y",35).text("1995").attr("class","years").style("text-anchor","middle");
svg_slope.append("text").attr("x",slope_width-text_pad+30).attr("y",35).text("2015").attr("class","years").style("text-anchor","middle");

//scatter-plots for the regions
xscale.range([25,width/2-30]);
yscale.range([height/2-20,20]);

for (k=0;k<regions.length;k++)
{
var svg=d3.select("#reg"+(k+1)).append("svg").attr("width",width/2).attr("height",height/2);
svg.selectAll(".munic"+k).data(data.filter(function(d){return d.region==(k+1) && d.electorate_2015<=12000;})).enter()
  .append("circle")
  .attr("cx",function(d){return xscale(d.electorate_2015);})
  .attr("cy",function(d){return yscale(d.turnout_change);})
  .attr("r",function(d){return rscale(+d.electorate_2015);})
  .attr("class","munic")
  .append("title")
  .text(function(d){return d.name+": "+d3.format(",")(d.electorate_2015)+" Voters, "+(d.turnout_change)+" percentage points change in turnout in 2015";});

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(0,"+yscale(0)+")")
  .call(xaxis);

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate("+xscale(0)+",0)")
  .call(yaxis);
  
svg.append("text").attr("x",195).attr("y",30).style("text-anchor","middle").text(regions[k]);
}

//filtering the larger towns
var focus=data.filter(function(d){return d.electorate_2015>12000;});
focus=focus.sort(function(a,b){return d3.ascending(+a.voters_change_p,+b.voters_change_p);});

//bar-chart
var svg_electorate=d3.select("#electorate").append("svg").attr("width",width).attr("height",height/1.5);
var yscale_focus=d3.scale.ordinal().domain(focus.map(function(d){return d.name;})).rangeRoundBands([height/1.5-40,35],0.2);
var xscale_focus=d3.scale.linear().domain([-50,50]).range([0,width/2-5]);
var xaxis_focus=d3.svg.axis().scale(xscale_focus).orient("bottom").tickSize(0).ticks(5);
var sel;

svg_electorate.selectAll(".bg").data(focus).enter().append("rect")
  .attr("x",function(d){return xscale_focus(-50);})
  .attr("y",function(d,i){return yscale_focus(d.name);})
  .attr("width",width)
  .attr("height",yscale_focus.rangeBand())
  .style("fill","white")
  .attr("class",function(d,i){return "bg"+i;})
  .on("mouseover",function(d,i){
    d3.select(this).style("fill","lightgrey");
	svg_electorate.selectAll("text").filter(".val"+i).style("fill","#000000");
	})
  .on("mouseout",function(){
    d3.select(this).style("fill","white");
	svg_electorate.selectAll("text").filter(".values").style("fill","#d3d3d3");
	});
  
var rect1=svg_electorate.selectAll(".turnout_change").data(focus);

rect1.enter()
  .append("rect")
  .attr("x",function(d){return xscale_focus(d.turnout_change);})
  .attr("y",function(d,i){return yscale_focus(d.name);})
  .attr("width",function(d){return xscale_focus(0)-xscale_focus(d.turnout_change);})
  .attr("height",yscale_focus.rangeBand())
  .attr("fill","#bb131a")
  .attr("class",function(d){return d.idname;})
  .on("mouseover",function(d,i){
    d3.select(".bg"+i).style("fill","lightgrey");
	svg_electorate.selectAll("text").filter(".val"+i).style("fill","#000000");
	})
  .on("mouseout",function(d,i) {
    d3.select(".bg"+i).style("fill","white");
	svg_electorate.selectAll("text").filter(".values").style("fill","#d3d3d3");
	})
  .append("title")
  .text(function(d){return d.turnout_change+"% change in turnout in 2015";});

rect1.enter()
  .append("text")
  .attr("x",width/2)
  .attr("y",function(d,i){return yscale_focus(d.name);})
  .attr("dy","1.5em")
  .style("text-anchor","middle")
  .style("font-size","10pt")
  .attr("class",function(d){return d.idname;})
  .text(function(d){return d.name;})
  .on("mouseover",function(d,i){
    d3.select(".bg"+i).style("fill","lightgrey");
	svg_electorate.selectAll("text").filter(".val"+i).style("fill","#000000");
	})
  .on("mouseout",function(d,i) {
    d3.select(".bg"+i).style("fill","white");
	svg_electorate.selectAll("text").filter(".values").style("fill","#d3d3d3");
	})
	.classed("names",true);

rect1.enter()
  .append("text")
  .attr("x",xscale_focus(20))
  .attr("y",function(d,i){return yscale_focus(d.name);})
  .attr("dy","1.5em")
  .attr("transform","translate(40,0)")
  .style("text-anchor","end")
  .style("font-size","10pt")
  .text(function(d){return d.turnout_change;})
  .attr("class",function(d,i){return "val"+i;})
  .classed("values",true)
  .on("mouseover",function(d,i){
    d3.select(".bg"+i).style("fill","lightgrey");
	svg_electorate.selectAll("text").filter(".val"+i).style("fill","#000000");
	})
  .on("mouseout",function(d,i) {
    d3.select(".bg"+i).style("fill","white");
	svg_electorate.selectAll("text").filter(".values").style("fill","#d3d3d3");
	});

svg_electorate.append("g")
  .attr("class","axis")
  .attr("transform","translate(0,"+(yscale_focus(focus[0].name)+yscale_focus.rangeBand()+10)+")")
  .call(xaxis_focus);

svg_electorate.append("text")
  .attr("x",10)
  .attr("y",10)
  .attr("class","axis_anno")
  .text("change in turnout");
  
xscale_focus.range([0,width/2+5]);
var rect1=svg_electorate.selectAll(".votes_change").data(focus);
var rect2=svg_electorate.selectAll(".voters_change").data(focus);

rect1.enter()
  .append("rect")
  .attr("x",function(d){return d.votes_change_p<=0 ? xscale_focus(d.votes_change_p) : xscale_focus(0);})
  .attr("y",function(d,i){return yscale_focus(d.name);})
  .attr("width",function(d){return d.votes_change_p<=0 ? (xscale_focus(0)-xscale_focus(+d.votes_change_p)) : xscale_focus(+d.votes_change_p)-200;})
  .attr("height",yscale_focus.rangeBand()/2)
  .attr("fill","#bb131a")
  .attr("transform","translate("+(width/2+5)+",0)")
  .attr("class",function(d){return d.idname;})
  .on("mouseover",function(d,i){
    d3.select(".bg"+i).style("fill","lightgrey");
	svg_electorate.selectAll("text").filter(".val"+i).style("fill","#000000");
	})
  .on("mouseout",function(d,i) {
    d3.select(".bg"+i).style("fill","white");
	svg_electorate.selectAll("text").filter(".values").style("fill","#d3d3d3");
	})
  .append("title")
  .text(function(d){return d.votes_change_p<0 ? (d.votes_change_p+"% or "+d3.format(",")(d.votes_change)+" less votes cast 2015") : (d.votes_change_p+"% or "+d3.format(",")(d.votes_change)+" more votes cast 2015");});

rect2.enter()
  .append("rect")
  .attr("x",function(d){return d.voters_change_p<=0 ? xscale_focus(d.voters_change_p) : xscale_focus(0);})
  .attr("y",function(d,i){return yscale_focus(d.name)+yscale_focus.rangeBand()/2;})
  .attr("width",function(d){return d.voters_change_p<=0 ? (xscale_focus(0)-xscale_focus(+d.voters_change_p)) : xscale_focus(+d.voters_change_p)-200;})
  .attr("height",yscale_focus.rangeBand()/2)
  .attr("fill","#4d94b1")
  .attr("transform","translate("+(width/2+5)+",0)")
  .attr("class",function(d){return d.idname;})
  .on("mouseover",function(d,i){
    d3.select(".bg"+i).style("fill","lightgrey");
	svg_electorate.selectAll("text").filter(".val"+i).style("fill","#000000");
	})
  .on("mouseout",function(d,i) {
    d3.select(".bg"+i).style("fill","white");
	svg_electorate.selectAll("text").filter(".values").style("fill","#d3d3d3");
	})
  .append("title")
  .text(function(d){return d.voters_change_p + "% or "+d3.format(",")(d.voters_change)+" more eligible voters in 2015";});

rect1.enter()
  .append("text")
  .attr("x",xscale_focus(-20))
  .attr("y",function(d,i){return yscale_focus(d.name);})
  .attr("dy","1em")
  .attr("transform","translate("+(width/2+5)+",0)")
  .style("text-anchor","end")
  .style("font-size","10pt")
  .text(function(d){return d.votes_change_p;})
  .attr("class",function(d,i){return "val"+i;})
  .classed("values",true)
  .on("mouseover",function(d,i){
    d3.select(".bg"+i).style("fill","lightgrey");
	svg_electorate.selectAll("text").filter(".val"+i).style("fill","#000000");
	})
  .on("mouseout",function(d,i) {
    d3.select(".bg"+i).style("fill","white");
	svg_electorate.selectAll("text").filter(".values").style("fill","#d3d3d3");
	});

rect2.enter()
  .append("text")
  .attr("x",xscale_focus(-20))
  .attr("y",function(d,i){return yscale_focus(d.name)+yscale_focus.rangeBand()/2;})
  .attr("dy","1em")
  .attr("transform","translate("+(width/2+5)+",0)")
  .style("text-anchor","end")
  .style("font-size","10pt")
  .text(function(d){return d.voters_change_p;})
  .attr("class",function(d,i){return "val"+i;})
  .classed("values",true)
  .on("mouseover",function(d,i){
    d3.select(".bg"+i).style("fill","lightgrey");
	svg_electorate.selectAll("text").filter(".val"+i).style("fill","#000000");
	})
  .on("mouseout",function(d,i) {
    d3.select(".bg"+i).style("fill","white");
	svg_electorate.selectAll("text").filter(".values").style("fill","#d3d3d3");
	});

svg_electorate.append("g")
  .attr("class","axis")
  .attr("transform","translate("+(width/2+5)+","+(yscale_focus(focus[0].name)+yscale_focus.rangeBand()+10)+")")
  .call(xaxis_focus);

svg_electorate.append("text")
  .attr("x",width)
  .attr("y",25)
  .attr("class","axis_voters")
  .style("text-anchor","end")
  .text("change in eligible voters");
  
svg_electorate.append("text")
  .attr("x",width)
  .attr("y",10)
  .attr("class","axis_votes")
  .style("text-anchor","end")
  .text("change in votes cast");
});

</script>
</body>
</html>

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

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