How to Make an Election Interactive

So I created an interactive for Wionews.com (embedded below) on the assembly elections taking place in five states. This write-up goes into how I did the interactive and the motivations behind it.


The Interactive is embedded below. Click on Start to begin.


The interactive looks at three things:

  • where each party won in the last assembly election in 2012 in each of the five states, visualised with a map.
  • where each party won in the last Lok Sabha (LS) election in 2014, if the LS seats were broken up into assembly seats. This was also done with a map.
  • the share of seats won by each major party in previous assembly elections, done with a line chart.

I got all my data from the Election commission website and the Datameet repositories, specifically the repositories with the assembly constituency shapefiles and historical assembly election results.

Now these files have a lot of information in them, but since I was making this interactive specifically for mobile screens and there wouldn’t be much space to play with, I made a decision to focus just on which party won where.

As mundane as that may seem, there’s still some interesting things you get to see. For example, from the break-up of the 2014 Lok Sabha results, you find out where the Aam Aadmi Party has gained influence in Punjab since the last assembly elections in 2012, when they weren’t around.

The interactive page on the AAP in Punjab, 2014
The interactive page on the AAP in Punjab, 2014

ANALYSING THE DATA

While I got the 2012 election results directly from the election commission’s files, the breakdown of the 2014 Lok Sabha results by assembly seat needed a little more work with some data analysis in python (see code below) and manual cross-checking with other election commission files.

Some of the python code used to break down the 2014 LS results by assembly seat.
Some of the python code used to break down the 2014 LS results by assembly seat. You can see all of it here.

For calculating the percentages of seats won by major parties in the past, I had to do some analysis in python of Datameet’s assembly election results file.

Some of the python code used to calculate historical seat shares of parties.
Some of the python code used to calculate historical seat shares of parties. You can see all of it here.

PUTTING IT ALL ONTO A MAP

The next thing to do was put the data of which party won where onto an assembly seat map for each state.

To get the assembly seat maps, I downloaded the assembly constituency shapefile from the datameet repository and used the software QGIS to create five separate shapefiles for each of the states. (Shapefiles are what geographers and cartographers use to make maps.)

A screenshot of the <a href="https://www.qgis.org" target="_blank">QGIS</a> software separating the India shapefile into separate ones for the states.
A screenshot of the QGIS software separating the India shapefile into separate ones for the states.

The next task is to make sure the assembly constituency names in the shapefiles match the constituency names in the election results. For example, in the shapefile, one constituency in Uttar Pradesh is spelt as Bishwavnathganj while in the election results, it’s spelt as Vishwanathganj. These spellings need to be made consistent for the map to work properly.

I did this with the OpenRefine software which has a lot of inbuilt tools to detect and correct these kinds of inconsistencies.

The purist way would have been to do all this with code, but I’ve been using OpenRefine, a graphical tool, for a while now and it’s just easier for me this way. Please don’t judge me! (Using graphical tools such as OpenRefine and QGIS make it harder for others to reproduce your exact results and is less transparent, which is why purists look down on a workflow that is not entirely in code.)

After the data was cleaned, I merged or ‘joined’ the 2012 and 2014 election results with the shapefile in QGIS, I then converted the shapefile into the geojson format, which is easier to visualise with javascript libraries such as D3.js.

I then chose the biggest three or four political parties in the 2012 assembly and 2014 LS election results for each state, and created icons for them using the tool Inkscape. This can be done by tracing the party symbols available in various election commission documents.

Some of the party icons designed for the interactive
Some of the party icons designed for the interactive

HOW IT’S ALL VISUALISED

The way the interactive would work is if you click on the icon for a party, it downloads the geojson file which, to crudely put it, has the boundaries of the assembly seats and the names of the party that’s won each seat.

The interactive map showing the NPF in Manipur in 2014
The interactive map showing the NPF in Manipur in 2014

You then get a map with the seats belonging to that party coloured in yellow. And each time you click on a different party icon, a new map is generated. (If I’ve understood the process wrong, do let me know in the comments!)

Here’s some of the d3 code used:

    map2
        .append("svg:image")  //put an image onto the canvas
        .attr("xlink:href","../exp_buttons/bharatiya_janta_party_75.png")  //take the image from the exp_buttons folder
        .attr('height', '75')
        .attr('width', '75')
        .attr('class','shadow partyButton')
        .attr('id','bjpButton')
        .attr("x", 30)             
        .attr("y", 0)    
        .on("click", function(){
            map
              .append("svg:g")         //create the map
              .style("fill","#4f504f")  //fill the map with this black color
              .selectAll("path")
              .data(json.features)
              .enter()
              .append("path")
                  .attr("d", pathx)
                  .style("stroke", "#fdd928")  //create yellow borders
                  .style("opacity","1")
                  .style("stroke-width", "1")
                  .style("fill",colorParty);      //colorparty is determined by the function below

		 //fill the seats with yellow if they were won by the “Bharatiya Janta Party”
		//and if they were won by someone else, make them black
					                
                function colorParty(d) {
                   if (d.properties.uttarakhand_2012_2012_1 == "Bharatiya Janta Party") {
                      return "#fdd928"
                } else {
                      return "#4f504f";
                    }
                };
              });

I won’t go into the nitty gritty of how the line chart works, but essentially every time you click on one of these icons, it changes the opacity of the line representing the party into 1 making it visible while the opacity of every other line is reduced to 0 making them invisible.

The historical performance of the MGP in Goa.
The historical performance of the MGP in Goa.

Here’s some of the relevant d3 code:

svg
	.append("svg:image")                                                             //this tells D3 to put an image onto the canvas
	.attr("xlink:href","../exp_buttons/bharatiya_janta_party_75.png")   //and this will be the bjp image located in the exp_buttons folder
	.attr('height', '75')
	.attr('width', '75')
	.attr('class','shadow partyButton')       //this is what gives a button the shadow, attributes derived from css 
	.attr('id','bjpButton')			     
	.attr("x", 0)             
	.attr("y", height + margin.top + 20)    
	.on("click", function(){
			d3.selectAll(".line:not(.bjpLine)").style("opacity", "0");  //make all other lines invisible
			d3.selectAll(".bjpLine").style("opacity", "1");                   //make the BJP line visible
			d3.select(this).classed({'shadow': false});		//remove the drop shadow from the BJP button 
											//so that people know it’s active
			d3.selectAll('.partyButton:not(#bjpButton)').classed({'shadow': true});  //this puts a drop shadow onto other buttons
													   //in case they were active
			
			});

I then put everything into a repository on Github and used Github pages to ‘serve’ the interactive to users.

Now I haven’t gone into the complexity of much of what’s been done. For example, if you see those party symbols and the tiny little shadows under them (they’re called drop shadows), it took me at least two days to make that happen.

It took two days to get these drop shadows!
It took two days to get these drop shadows!

MOTIVATIONS BEHIND THE INTERACTIVE

As for the design, I wanted something that people would just click/swipe through, that they wouldn’t have to scroll through, and also limit the data on display, giving only as much as someone can absorb at a glance.

My larger goal was to try and start doing data journalism that’s friendlier and more approachable than the stuff I’ve been doing in the past such as this blogpost on the Jharkhand elections.

I actually read a lot on user interface design, after which I made sure that the icons people tap on their screen are large enough for their thumbs, that icons were placed in the lower half of the screen so that their thumbs wouldn’t have to travel as much to tap on them, and adopted flat design with just a few drop shadows and not too many what-are-called skeumorphic effects.

Another goal was to allow readers to get to the information they’re most interested in without having to wade through paras of text by just tapping on various options.

The sets of options available to the user while in the interactive
The sets of options available to the user while in the interactive

I hacked a lot of D3.js examples on bl.ocks.org and stackoverflow.com to arrive at the final interactive, I’m still some way away from writing d3 code from scratch, but I hope to get there soon.

Because I’m not a designer, web developer, data scientist or a statistician, I may have violated lots of best practices in those fields. So if you happen to come across some noobie mistake, do let me know in the comments, I’m here to learn, thanks! 🙂


Shijith Kunhitty is a data journalist at WION and former deputy editor of IndiaSpend. He is an alumnus of Washington University, St. Louis and Hindu College, Delhi.

Demonetisation with Srinivasan Ramani

Srinivasan Ramani is Deputy National Editor who works with data at The Hindu. He has been a long time member of DataMeet community. This week I caught up with him to talk about Demonetisation move by Government of India.


Show Notes

Crossposted.

Field Papers: How To

At the Indiranagar Data Party! Garbage Go! they had a few people who didn’t want to use technology to map garbage so Maanya and Aarthy printed out Field Papers for mapping. These worked really well and allowed for a more inclusive event.

Maanya from Mapbox made a how to for using Field Papers.

field-paper

Step 1: Click on Make

field-paper-1

Step 2: Go to the area you want to map and select with the rectangle.

field-paper-2

Step 3: Download and print.

They will look like this and you can give them to people to map along the way.

20160929_104244

Data Party! Garbage Go! Update

After a week of mapping 1000 spots in Bangalore has been mapped!

screencapture-citizen-co-lab-mapunitygroups-1475391663877screenshot_2016-09-30-15-45-28

We have 50 people who have mapped at least one spot across the city.  The event last Saturday brought together people from different neighborhoods to take a walk and map some garbage.

We hope to be able to double this number and maybe even get to 3000 spots by the 3rd week of October!

If you have some time please download the app and map the garbage spots in your area. You can see the full map and zoom into your neighborhood here. 

To download the app find the links below.

Link to Mapunity Groups IOS app:
Link to Mapunity Groups Android app.
See Read more 

If you don’t want to download the app feel free to send us pictures. Turn on the GPS tag on your camera and then put up your pic on Twitter or Facebook with the Hashtag #garbagego

All data will be made open at the end of the campaign.

 

RTI Stories: Repost Citizen Matters

Troubles in getting data through RTI.

From Akshatha 

It has been precisely five months since I filed an RTI application with the Advertisement department of Bruhat Bengaluru Mahanagara Palike (BBMP) seeking information about legal and illegal advertisement hoardings in the city. (If you haven’t read the first piece you can read it here). And today as I write this second post about the status of my application, I stand in dismay, even as I continue to struggle to get the information that I am looking for.

In the last five months as I ran around pursuing this RTI application, there have been times when I sat counting the days and hours I spent on this chase. I would ask myself, “is it all worth it? What am I going to get at the end of it?” May be after months of prolonged wait, even if I succeed to get the information, it might just turn out to be obsolete. But then if I stop following it up, I for sure know, the lethargic city corporation officers who shifted their responsibility and did their best to wash their hands off, will continue doing the same in future. –
Read more 

Data Party! Garbage Go!

At DataMeet we have spent years looking for and trying to make data accessible. The last few years more and more data is being made public which we are excited about however people demand data that fills the gaps in data that already exists or that is more actionable. Data that people want and need isn’t being produced, and if it is being produced it isn’t being shared.

This is the most true in urban spaces where there are tons of projects dedicated to collecting data for the city but none of this data enters the public domain as open data. It isn’t public data because the government doesn’t collect it and the various governance and civic oriented groups who collect the data are more prone to write reports or put the analyzed data up online and not the usable and complete raw data.

So DataMeet along with Oorvani Foundation and Mapunity want to start a monthly Data Party! Where we pick a topic and try to collect as much data as we can over a month. Then we will make the data open for download on OpenCity Urban data portal and also send it to the appropriate person in the government, as well as, write data stories on Citizen Matters.

So please join us on Sept 24th to kick off the first ever Data Party! Garbage Go! 

There are an estimated 9000 garbage blackspots in Bengaluru. We are trying to catch them all!

Sign up to map your neighborhood everyday. Or join us for chai and snacks on Sept 24th and map with friends in 3 locations: Koramangala, Indiranagar or Frazertown.

You have to register and download the app so we can plan for the snacks.

Event location will be sent to you once you register.

Time is 9:30am to 12:30am – Sept 24th Saturday morning.

9:30am – Intro and app explanation
10 to 12 – Mapping
12 to 12:30 – Closing and Next Steps.

All data collected will be made open on the OpenCity.in Urban Data Portal for download and use, and this data will be sent to the BBMP and followed up on.

Indirangar – Maanya – Meeting place MapBox India

Koramangala – Nitin – Meeting place Sagar Fast Foods behind BDA complex

Frazertown – Contact Nisha Thompson – Meeting place French Loaf by Richards Park.

Register here.

Download the app and get mapping.

Link to Mapunity Groups IOS app:
Link to Mapunity Groups Android app.
SeeRead more 

Data Policies in Telangana

Government of Telangana  has launched four IT policies related to data on cybersecurity, data centers, data analytics and open data. Honorable IT Minister K T Rama Rao has announced the intention of separate sectoral policies through the launch of Telangana IT policy in the month of April’16. During the launch he stressed the importance of open data policy for the state. In his own words:

” Telangana will be among the pioneers in the country in coming up with this open data policy. The open data policy is the first step in opening up government data to a host of potential applications. The policy sets the necessary framework in place to operationalize the state open data portal. The policy has many enabling provisions in place for multiple stakeholders. Through this policy we hope to catalyze data and to make data driven decision making possible and development of important solutions for societal benefits. “

These policies were made after several consultations with industry, academia, civil society and various individual experts. Though the policies focus on individual sectors primarily, most of the elements are inter-linked with the common element of data.  While the state government intends to foster its economy and business with the help of data, the open data policy focuses on enabling transparency and human development apart from economic development. Telangana, an IT rich state following open data practices will be a major boost for the ecosystem in India too.

We have been interacting with officials from Government of Telangana since December ’15, providing appropriate suggestions for the open data policy. Dileep Konatham, Director for Digital Media, Department of Information Technology was our esteemed panelist during discussions on Digital India at Open Data Camp Delhi ’15.  Datameet will work with the Government of Telangana to help implement the policy with necessary suggestions for guidelines and community building over the coming months.

Links to the policies launched:

Ask Us Anything – Updated

It has been 5 years and we are now at over 1500 members and we thought it would be a good time to do an Ask Us Anything Hangout with DataMeet Central – Thej, Anand S, and me.

It will be Tuesday September 20th, at 6:30pm. We will be doing a broadcast Google Hangout will send the link out half hour before.  Bring your thoughts and questions about DataMeet, data in India, things we have done, things we should do, etc. It would be helpful to have some questions beforehand so feel free to comment here, if not you can ask during the hangout!

Hope to see you then!
Updated!
Thanks to everyone who joined the hangout! Here’s the video.

DataMeet is a community of Data Science and Open Data enthusiasts.