On April 24, presidential elections will be held in Austria. After playing around for some weeks with HTML, CSS and Javascript I decided to visualize the previous elections. Here you can see the result.
First of all, my plan was to create a chart to compare the results of all presidential elections after WWII. Getting the data was pretty easy. There already exists a detailed list with the numbers for every election, but no general overview.
How to start?
There are many ways to create all sorts of charts and graphs with Javascript. I looked at some of them. For example:
- Chart.js (http://www.chartjs.org/)
- Angular Chart (http://jtblin.github.io/angular-chart.js/)
- D3.js (https://github.com/mbostock/d3)
- Google Charts (https://developers.google.com/chart/)
A cool thing is that you can find thousands of code snippets and examples on sites like Codepen or JSFiddle — yes, of course also on Stackoverflow. There are also many paid services with free plans providing charts and graphs, like CanvasJS or ZingChart.
How did I do it?
I decided to give Google Charts a chance, as the website provides a detailed documentation. My plan was to create a Stacked Bar Chart, with one bar for every election. As a bonus I changed the standard tooltip (which are the mouse over effect pop ups). That’s all pretty standard and far out from rocket science, but it took me a while to test some of the possible features. For example, the standard Google Chart is not responsive.
There are ways to deal with that, but that did not work for me. The idea is, to load the chart always with width 100%. That means, basically, that the size of the chart is adapted to the screen size, whatever device you use. But, however, that doesn’t make the chart responsive. In a second step you can use a method to reload every time the window is resized. The result is that the chart loads with width 100% depending on the resized window. But that broke my browser several times, that’s way my chart loads with width 100%, but does not automatically reload. It just loads initially, unless the user reloads the window or tab.
Run Off
This year opinion polls suggest that there could be a run off, as a candidate needs more than 50% in the first round. A run off happened three times before. That’s why I made some more graphs. And I chose Donut Charts. Like the Stacked Bar Chart above I used the Google chart tools and integrated them. You can add graphs easily as every chart has it’s own function in the <script>-part of the file.
One interesting fact is that in two of the three run offs the candidate with the most votes in the first round, lost the run off. To clarify that point, I customized the tooltip with the information of the first round.
Next steps
- Create a chart with an interactive element: For example, let the user decide which data is shown.
- Outsource the data (for example, using a spreadsheet or a database).
- Do some kind of data scraping.
- Use a map.
Problems
Obviously, the chart has some issues. Here are two — and please feel free to add some more:
- The chart is focused on parties. But especially these elections are also based on persons. For example, incumbent presidents run as independent candidates (happened 1998 and 2010).
- I tried so many settings and started to put everything into the HTML-file. But that was a bad decision as for now the file is very confusing. Note to myself: Next time use a HTML-, a CSS- and a JS-file.
You can find the source code on my Github-Account and the chart in action on my website.
