D3 Examples - Election Results, Lower Austria, 1995 vs. 2015

xxxxxxxxxx
 
<!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>
​
<body>
<div id="switch"></div>
<div id="chart"></div>
​
<script type="text/javascript">
var width=800;
var height=700;
var offset=width/2;
var xscale=d3.scale.linear().domain([0,100]).range([0,offset]);
var xscale2=d3.scale.linear().domain([-100,0]).range([0,offset]);
var data, rect, barheight, cap;
var colors={"oevp":"black","spoe":"red"}; //the colors of the two parties, also used to generate the radio buttons
​
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;});
});
​
function draw(choice)
{
party=choice+"_change"; //construct the name of the object property based on the radio button
rect.transition().duration(500).attr("fill",colors[choice]).attr("x",function(d){return d[party]<0 ? xscale2(d[party]) : offset;}).attr("width", function(d){return d[party]<0 ? offset-xscale2(d[party]) : xscale(d[party]);}).select("title").text(function(d){return d.name+": "+d[party];}); //changing the values
cap.transition().attr("x",function(d){return d[party]<0 ? xscale2(d[party])-40 : xscale(d[party])+offset+10;}).attr("y", function(d,i){return barheight+barheight*i-10;}).text(function(d){return d[party];});
}
​
</script>
</body>
</html>
    