Long story of an election dashboard
A few months back I was approached by one of the biggest Hungarian news media outlets with a request to design an interactive, real-time election dashboard for their online edition. Since my main focus is dashboards, I gladly accepted the challenge, even though we have had a very limited time frame to implement the solution.
This is the short (we will see that) summary of the story.
Preparations, requirement setting
Since we had a very limited time frame to execute the task we first assembled the group who was able to create such a dashboard and set the requirements together with the client.
The dev team
The development team on our side consisted of four people, who really put all their time, knowledge and energy to deliver the election dashboards that we agreed upon. There were two data visualization experts, Eszter Katona and myself who worked on the visualization design, and two programmers, Nándor Dévai and Martin Márton, who implemented our designs and helped with their ideas and comments.
Our client also delegated a development team for the task, a project manager, a backend/database developer and project assistants. They were always professionally up-to-date and carried out the process together with us in a very systematic manner. But let’s see what the requirements were.
Requirements
We got a requirement specification that defined the desired outcomes during the pre-election period and for the election day.
The list consisted of a few visualizations:
- Timeline of the pre-election period
- Head to head election result bar chart
- A KPI row that provides information on the actual number of eligible voters, number of mail voters etc
- Pre-election dashboard, that shows the actual mandate distribution for the country
- Pre-election dashboard that shows the battleground election districts with information on how much a specific party is ahead of the others
- Diagram of public poll results for the previous six months for parties
Overall we separated the available time frame to two separate parts: visualizations previous to the election day and during election day. We first identified those visualizations that we would like to show to our users in order to engage them and that could be informative for them. Following is the inspiration that we used as a basic pattern design library for our own version.
Inspiration
We collected several good examples for the project that we found across the web. Actually it turned out that this was not an easy task, since elections are mostly a point like events in history and therefore those dashboards and visualizations that provide information on the results are short-lived and most of the cases retired to some hidden folder at news outlets. I will focus on the most prominent elements of the dashboard.
Timeline
“Time is money” as the saying goes, but in this case it was the days that were getting closer and closer to the election day, not the invoice due date. During an election period there are significant dates and periods that are important for the voters and worth mentioning. For example the mail vote submission deadline, registration to vote abroad and similar events. These are usually longer periods, several days or weeks in most cases, so we were looking for some kind of a classic GANTT chart that would help us show what comes after what.
Head to head election result bar chart
This type of visualization pattern is easy to use when you have two candidates running for the presidency. This has been the case in the USA for a long time now, so we easily could get some inspiring ones for our version.
The optional components for such visualization are:
- photos of the candidates
- names of the candidates
- seats won by the candidate’s party
- visualization that shows the number of seats
- the number when crossed a specific candidate won the presidency / election
Election maps
This was the most interesting and the most challenging part of our project. So many maps have been done already on different elections in different times, we couldn’t check them one-by-one, so first we narrowed our research to the specific type that we wanted to use.
Choropleth is the first that comes into one’s mind, showing colorized areas of electoral districts is the standard way of creating election maps.
These maps have a long history, but there’s one issue with them: if you want to figure out the result for smaller areas you really need to struggle to find those on the map.
A different type of map can come handy in this case, the so called hexmap. It consists of hexagonal units that don’t represent the geographical size of the area but in a sense that each unit has the same size apart from the actual difference. This makes it easier to compare differences in color within the same map. One of the first of this kind of map was used in England, London, in an election in 1895.
We decided to try out this type since we needed to show 106 unique election districts for our visitors and some of them were really small compared to others. We also found great examples for this map in current election visualization, and also on other topics.
Technological feasibility
The final place for our product was the online platform of the media site, therefore we needed to use easily embeddable but still highly customizable frameworks to seamlessly integrate our work with the ongoing editorial process. For this reason we used d3.js which is a widely known framework for data visualizations.
It was very easy to implement the charts and create some custom visualizations with the framework.
The problem was that d3.js doesn’t have hexmaps the way we wanted to implement it, therefore we used R to generate the resulting maps and exported the json dataset to use it in d3.
The process looks like this:
There is a very nice solution though to create hexmaps with a standard library, but we did the hard way.
Resulting dashboards
Pre-election dashboard
On this dashboard the visitors were able to see the current state of the elected representatives, and also gain insight on the public polls. We showed some interesting numbers also, like the number of eligible voters, the number of mail voters etc. The hexmap type of visualizing the map caused that we needed to separate the capital (with 18 election districts) from the country, since it would have distorted the shape of the resulting map.
The timeline in the header shows important dates and ranges for the election, like the start and end date of applying from abroad to vote. It also shows them grouped by interest, for example government responsibility (sending the mails to registered voters via mail) or citizen (applying for foreing voting) responsibility.
Hovering over any of the hexes on the map showed a detailed view for that specific district with the current representative nominees and the current elected representative. We applied some simple visualizations to show with what percent the current representative won the previous election.
We also created a view to show which election counties will possibly change and for that to show there was a button to switch between the map views.
Visualizations for the election day
During the election day there were two main phases: 1. voting, 2. reporting the results. The voting part started at 6:00 and lasted until 19:00 o’clock. After the authorities closed the ballot boxes and started to count the votes.
Our timeline changed accordingly, so we showed the results for the previous election participation against current participation in the header. We got data every two hours, so we designed it to match the space available.
During the first phase we got data on the percent of participants for each election district. We created a separate view for the election day for that, and this was possibly not the best solution (always test your visualization with real data before showing it to your audience, dummy data can raise expectations that real data won’t meet). The difference between the participation for the counties was so small that it is barely visible on the map. Each hexagon was filled according the the percentage.
When the election was over we switched to the results view. This view showed the results according to the actual vote count to each district. When a party gained enough votes to secure their win we filled the hexagon with the party’s color. If the difference was small we filled the hexagon with a striped pattern. We also added a parliament chart where all the seats were empty until we got the final results.
The header changed once again, showing the leaders of the two biggest parties. Won seats were visualized as bars with a tick in the middle that showed which party won the majority in the parliament.
When all the votes were counted and official results were announced, our final election dashboard looked like this.
The tooltip also changed, according to the result of a specific electoral district, showing the personal results for each individual candidate. This made comparison easy and our readers could easily see the small or big differences between the candidates’ results.
Conclusions
The overall project was very interesting and challenging, especially having such a short time to design and develop a working solution that can be integrated to the website.
There were some key points that I’d recommend to take into account if you are preparing a similar journey:
- Start early, and there is no such thing as too early
- Focus on the team and the competences available
- Find inspiring patterns that you can use tailoring them to your own needs
- Integrate your development process with your client’s at an early stage
- Use agile methodologies to navigate through the project
- Never trust the data that you get as test from the authorities
- Look out for errors and be keen on error handling
I hope you liked this little article on how we designed an election dashboard. If you have any comments or questions, just let me know!
