Tackling Brexit — A day in the life of an interactive journalist
As an interactive journalist at The Times and The Sunday Times, my day-to-day work can be extremely varied. I could be creating a line chart showing the results of an opinion poll for an election, writing a script pulling data from an API for a vote on May’s Brexit deal, or building an immersive interactive experience to celebrate the Armistice centenary.
My focus depends entirely on the deadline and priority of the project. This is dictated by the news agenda and careful planning, with reporters, editors and the interactive team constantly in discussion to make sure we are across the biggest events each month.
Some news stories tend to trump all others, however, taking precedent and leaving even the most carefully laid plans in ruins. Recently, this has tended to be something Brexit-y.
A good recent example was bringing to life a flowchart outlining all the outcomes and possibilities as Britain attempts to leave the EU. The initial proposal was for a quiz and originated in the interactive team.
Once our political correspondent and Brexit specialist Henry Zeffman had started sketching out the eventualities on the back of a large envelope, however, it became clear this was going to need another solution.
This developed into a cross-department project, which was run as a double page spread in print and replicated completely differently digitally (all in less than a week!).
We’ve also created a Brexit explainer and an interactive that compares Britain’s trade with the EU and other countries. It’s the news topic that is overwhelming all others and we want to make sure we are pushing the boundaries on the best way to present it to readers
Rewinding to January 14, our weekly meeting is case in point. The vote on May’s deal was that Tuesday evening and we began sketching out an interactive to display the results to readers. Plans were thought out, solutions drawn up and by 11am — about 36 hours before we would have the result — we had our idea.
Take #1
With such a small timeframe to create something from scratch, teamwork is key. Our digital design editor, Matt Myers, was tasked with creating the designs. Ryan Watts, Interactive Journalist, performed some wizardry to obtain the data. Sam Joiner, Interactive editor and Matt Chorley, Red Box editor, decided what needed to be included, and I was left to do the build. Being left alone to focus on building something with no other distractions is great, so it was a pleasure to have an organised team to work with.
Despite results of the vote coming in slightly earlier than we had initially anticipated, we were able to get something produced and added to multiple articles on the site within an hour of the vote, which we were delighted with.
Improvements
Fortunately for us (thanks Mr Corbyn), we had another day to make improvements before the confidence vote. “It would be really useful if you could search by constituency as well as MP”; “who is that green dot in ‘Abstain’? It would be cool to click on it”. All of these tweaks — as well as some other styling changes — were implemented the day between the two votes and hugely improved the interactive.
I also retrospectively applied these changes to the first interactive, meaning subscribers reading about the vote on May’s deal would have a better experience too.
With a bit of simple refactoring, we’ve ended up with a nice template that we can update easily using any voting data in the future. Lo and behold, we have already used it twice more for the amendment votes. What was a relatively short project turned out to have a long shelf life.
Data
The data used for this interactive was obtained from the parliamentary website, Digiminster. They provide a comprehensive breakdown of each commons vote and how each MP has voted.
Handily for us, they also offer an API and we have created a script to pull the information into a JSON file which will automatically update the results within the interactive, meaning we can re-run this quickly for any future vote. The results tend to take around 30 minutes to appear in the API, so we can have an up-to-date interactive within an hour of the results being announced.
Methodology
We structured the various elements using Flexbox. This way of scaffolding web pages allows you to easily manoeuvre and fill the space of any screensize a reader may be using. Flexbox also makes it easy to reposition elements when someone is viewing the content. Let me explain with a simple example:
This gif shows a prototype version of how we wanted the interactive to be structured on desktop and mobile. For more complex ideas we may have more than two ways we want the interactive to look, but two was sufficient for this project.
The css to get this working is extremely simple. The ‘container’ div is given a property of display: flex and then the two divs within it are given a set width. Then for mobile, we create some additional styles based on ‘breakpoints’ (a way of writing css rules for a specific browser size). For this example, we create these rules based on 767px (the size we commonly use for mobile). The code for this is:
@media screen and (max-width: 767px) {css styles go here}
The rule flex-direction: column is set on the container and then the width is removed from the inner divs and we have our basic structure.
Although this is an extremely simplified example, it should give you an idea of how useful Flexbox can be when creating web applications. For those interested, the waffle chart part of the interactive was built using JavaScript library D3, which is our go-to library when creating something like this.
Analytics
As a bit of a nerd, I thoroughly enjoy a good website stat: views, dwell time, bounce rate — I love it. So you can imagine my joy when we decided that we’d track the MPs that people searched for. And the winner of the coveted Times Interactives May’s Vote Most Searched For MP ™ is… Boris Johnson, closely followed by Jacob Rees-Mogg and Amber Rudd. A full 12 hours after the vote, every single MP bar one (take a bow, Ronnie Cowan of the Scottish National Party) had been searched for at least once.
The MP tracking was also useful in showing us the number of readers interacting with our search. At the time of writing, around 21 per cent of total visitors to the May’s vote interactive searched for an MP. In comparison, the confidence vote only had 8 per cent.
We put this down to two things:
- The addition of the hover allowing readers to simply select a dot they were interested in, rather than searching
- The more straightforward nature of the no-confidence vote
This type of insight is valuable in allowing us to improve on what we build for future projects.
What we’ve learnt
- A good plan and teamwork is required to get things built in a short space of time
- Listen to feedback and make amends if needed
- Analytics can be extremely useful in gauging how a user interacts with what we create
- It’s worth taking the time to create something that can be easily modified and reused
