Bird Swing Graph for Elections

Bird Swing Graph

A graph for showing how close election results are for a particular political party in a set of constituencies.

The green bars represent seats that the party has won (or is leading in), and the black bars represent the seats that the party has lost (or is trailing in).

The bars are further color coded according to the party's performance last time.

Dark green bars represent constituencies in which the party lost the last time (swing seats)
Solid black bars represent constituencies in which the party won the last time (swing seats)

Useful for

Showing Live Election Results in a close election (where just the number of leads/trails is not enough information)
Showing how close the elections after the results have been declared

This visualization was used for the 2014 General elections in India at www.electioncharts.com. The github repo for that site can be found at https://github.com/mickeykedia/electioncharts

Built with blockbuilder.org

<!DOCTYPE html>
<html lang="en">

<head>

<title>Bird Swing Graph</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<style>

.bar.postive {
        fill:steelblue;
    }

.bar.negative {
        fill:brown;
    }
    .axis text {
        font: 10px sans-serif;
    }
    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

rect:hover {
        opacity: 0.5;
    }

.gridStyle {
        border: 1px solid rgb(212,212,212);
        width: 100%; 
        height: 400px;
    }

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
    <script src="https://d3js.org/queue.v1.min.js"></script>
    
    <script   src="https://code.jquery.com/jquery-1.12.3.min.js"   integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   	<script type="text/javascript">

// Finally we have data and now and we are going to do something with it ! 
        function drawMap(error, data, results){
            var margin = {top:40,right:10,bottom:10,left:50};
            
            var svg = d3.select('.container').append("svg");

// Adding the total number of constituencies which 
            // in which the party is leading/winning 
            i = results.wins + results.leads;
            // last index of total data length
            j = data.length-i;

var height = 400 - margin.top - margin.bottom,
                // Finding the width of the first element and using that as the default width for responsiveness
                width = 900 - margin.left - margin.right,

// square root scale for the leads
                yScale = d3.scale.pow().exponent(0.5)
                    .domain(d3.extent(data,function(d){
                            return d.lead;
                    }))
                    .range([height,0]).clamp(true),
                // ordinal scale for individual constituencies 
                xScale= d3.scale.ordinal()
                    .domain(data.map(function(d){
                        return d.constituency_id+":"+d.candidate_name;
                    })).rangeBands([0,width],0.15,0.05);

console.log(results);
            // defining colours to use for each bar
            var  colour_swing = "#006600",
                colour ="#4D944D",
                colourTrail="#7D7D7E",
                colourTrail_swing="#000000";

// minimum lead (prolly a large negative number )
            var min = d3.min(data,function(d){
                return d.lead;
            })

/**
             * find the first candidate with a lead, first candidate with a trail and the first candidate.
             * Figure out the x axis position of those three points and draw lines and write text
             * on the SVG. Text must count the number of wins/leads and trails as well.
             * Add (lead %)
             */

svg.attr('height',height + margin.top + margin.bottom)
                .attr('width',width + margin.left + margin.right)
                .attr("border",1);

// Adding a 'g' element to the SVG 
            var svgG = svg.append("g")
                .attr("transform","translate("+margin.left+","+margin.top+")");

console.log(svg);
            var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

svgG.selectAll('.bar')
                .data(data)
                .enter()
                .append('rect')
                .attr("class",function(d){
                    return "bar";
                })
                .attr('width',xScale.rangeBand())
                .attr('y',function(d){
                    return yScale(Math.max(0, d.lead));
                })
                .attr('x',function(d){
                    return xScale(d.constituency_id+":"+d.candidate_name);
                })
                .attr('fill',function(d){
                    if(d.status=="TRAIL" || d.status=="LOST"){
                        if(d.party_id == d.last_time_party_id){
                            return colourTrail_swing;
                        }else {
                            return colourTrail;
                        }
                    }else {
                        if(d.party_id != d.last_time_party_id){

return colour_swing;
                        }else {
                            return colour;

}
                    }
                })
                .attr('title',function(d){
                    var str = d.constituency_name+" ("+d.status+")";
                    if(d.party_id == d.last_time_party_id){
                        if(d.status =="TRAIL" || d.status =="LOST"){
                            str=str+"  | <b>SWING SEAT</b><br/>";
                        }
                    }else {
                        if(d.status =="WIN" || d.status =="LEAD"){
                            str=str+"  | <b>SWING SEAT</b><br/>";
                        }
                    }
                    return str;
                })
                .attr('data-content',function(d){
                    var str = "Candidate : "+ d.candidate_name+"<br/>";
                    /**
                     * Put commas in the numbers,
                     * difficult to read them or else.
                     * @type {string}
                     */
                    if(d.status=="TRAIL"){
                        str = str+"Trail by: "+(-d.lead).toLocaleString()+"<br/>";
                        str = str+"Total Votes : "+ d.votes.toLocaleString()+"<br/>";
                        str = str+"Winning Party: "+ d.winning_party_name+"<br/>";
                    }else if (d.status=="LEAD"){
                        str = str+"Lead by : "+ d.lead.toLocaleString()+"<br/>";
                        str = str+"Total Votes : "+ d.votes.toLocaleString()+"<br/>";
                        str = str+"Runner-up Party: "+ d.loosing_party_name+"<br/>";
                    }else if(d.status=="LOST"){
                        str=str+"Lost by : "+ (-d.lead).toLocaleString()+"<br/>";
                        str = str+"Total Votes : "+ d.votes.toLocaleString()+"<br/>";
                        str = str+"Winning Party: "+ d.winning_party_name+"<br/>";
                    }else {
                        str = str+"Won by :"+ d.lead.toLocaleString()+"<br/>";
                        str = str+"Total Votes : "+ d.votes.toLocaleString()+"<br/>";
                        str = str+"Runner-up Party: "+ d.loosing_party_name+"<br/>";
                    };
                    return str;
                })
                .attr('data-toggle', 'popover')
                .attr('leads',function(d){
                    return d.lead;
                })
                .transition()
                .duration(1000)
                .attr('height', function (d) {
                    return Math.abs(yScale(d.lead) - yScale(0));
                });

$(function () {
                  $('[data-toggle="popover"]').popover({trigger:"hover", content:"content", container:"body", html:true})
                });

/**
             * Adding a line to demarcate the trailing/leading line.
             * also a text which says - constituency in the right place on the graph.
             */
            if (i>0 & i < data.length){
                // i represents the number of winning/lead seats and that's why the line is drawn there (?)
                var trailLineX = xScale(data[i].constituency_id+":"+ data[i].candidate_name);
                svgG.append("line")
                    .attr("x1",trailLineX)
                    .attr("y1",0)
                    .attr("x2",trailLineX)
                    .attr("y2",height)
                    .attr("stroke","black")
                    .attr("stroke-dasharray","5,5");

if(trailLineX < width/4){
                    svgG.append('text')
                        .attr('x',trailLineX+margin.left)
                        .attr('y',yScale(0)-margin.top)
                        .attr('font-style','italic')
                        .text('Constituency');
                }else {
                    svgG.append('text')
                        .attr('x',trailLineX-(2*margin.left+margin.right))
                        .attr('y',yScale(0)+margin.top)
                        .attr('font-style','italic')
                        .text('Constituency');
                }

}

/**
             * adding axes.
             */

svgG.append("g")
                .attr("class","y axis")
                .call(yAxis)
                .append("text")
                .attr("y",-10)
                .attr("x",-5)
                .attr("dy",".71em")
                .style("text-anchor","end")
                .style("font-size","0.8em")
                .text("Margin");

svgG.append("g")
                .attr("class","x axis")
                .append("line")
                .attr("y1",yScale(0))
                .attr("y2",yScale(0))
                .attr("x2",width);

}
          queue()
                .defer(d3.json, 'cpim_bengal.json')               
                .defer(d3.json, 'cpim_bengal_result.json') // REPLACE REF WITH DATA
                .await(drawMap);

</script> 
</head>

<body>

</div>

</body>

</html>

https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js

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

https://d3js.org/queue.v1.min.js

https://code.jquery.com/jquery-1.12.3.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js