Election Results, Lower Austria, 1995 vs. 2015

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Election Results, Lower Austria, 1995 vs. 2015</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
text
{
font-size:10pt;
}
rect:hover
{
opacity:0.2;
}
</style>
</head>

var svg=d3.select("#chart").append("svg").attr("width",width).attr("height",height);

svg.append("line").attr("x1",offset).attr("y1",0).attr("x2",offset).attr("y2",height).attr("stroke","black").attr("stroke-width",0.5); //some sort of simple y-axis

d3.csv("data.csv", function(data)
{
for (i=0;i<data.length;i++)
{
data[i].oevp_change=+(data[i].oevp_votes_2015/data[i].valid_votes_2015*100-data[i].oevp_votes_1995/data[i].valid_votes_1995*100).toFixed(2); //calculating the difference in percentage points
data[i].spoe_change=+(data[i].spoe_votes_2015/data[i].valid_votes_2015*100-data[i].spoe_votes_1995/data[i].valid_votes_1995*100).toFixed(2);
}

barheight=height/data.length;
data.sort(function(a,b){return d3.descending(a.oevp_change,b.oevp_change);})

d3.select("#switch").selectAll("input").data(Object.keys(colors)).enter().append("label").text(function(d){return d.toUpperCase();}).append("input").attr("type","radio").attr("name","party").attr("value",function(d){return d;}).attr("onChange",function(d){return "draw('"+d+"')";}); //add the radio buttons, depending on the number of available parties

rect=svg.selectAll("rect").data(data).enter().append("rect");
rect.attr("x",function(d){return d.oevp_change<0 ? xscale2(d.oevp_change) : offset;}).attr("y",function(d,i){return barheight*i;}).attr("height", function(d,i){return barheight-2;}).attr("width",function(d){return d.oevp_change<0 ? offset-xscale2(d.oevp_change) : xscale(d.oevp_change);}).attr("fill",colors.oevp).append("title").text(function(d){return d.name+": "+d.oevp_change;});

cap=svg.selectAll("text").data(data).enter().append("text");
cap.attr("x",function(d){return d.oevp_change<0 ? xscale2(d.oevp_change)-40 : xscale(d.oevp_change)+offset+10;}).attr("y", function(d,i){return barheight+barheight*i-10;}).text(function(d){return d.oevp_change;});
});

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js