Building an interactive, long-form infographic

As part of my MA in Online Journalism, I recently popped down to London  for News UK’sBuild the News’, or as it was originally titled ‘Hack the News’.
2014-02-22 11.22.45
Some of the welfare team members; Kat, Lewis and Lorcan (left to right)

Funnily enough, as the organisers News UK (the UK arm of Rupert Murdoch’s News International) are somewhat touchy about the word ‘hack‘ at the moment, someone wisely made the decision to substitute the word with the slightly more benign ‘build’.

Still, wording aside, the weekend event, set within a quintessentially trendy converted industrial unit in Shoreditch, was  an opportunity for teams of journalists, developers and students to build experimental tools for gathering, telling and publishing the news in new ways.

The organisers gave us the choice of developing a new journalistic tool for:

  • Campaigns
  • Publishing long form pieces
  • De-cluttering social media ‘noise’
  • Reinventing the Sunday paper.

My team, consisted of Online Journalism MA students working on the Birmingham Eastside news site, went for the long form (‘stretch’) category.

Background research

Given the loose brief of ‘welfare’, in the weeks leading up to the event our team set about sourcing as many relevant datasets as we could. Each dataset was then shared via a shared HackDay folder on Google Drive.

Here are the datasets I sourced and contributed to the pool before the event (not all of which were used in the final project):

Upon research, the team kept encountering the justification for government cuts, by ruling politicians and some of the media, as the UK population was ‘getting older’ and ‘ people are now living longer’ .

Aside from the fact that technically everyone and everything is always getting older, we thought it might be worth investigating whether the data backs up the commonly used assertion.

So, we decided to focus on collaboratively producing a ‘fact check’ piece on whether there really was a ‘pensions time-bomb,’ and whether such a thing was indeed looming.

The Plan for the Hack Day

Once at Build the News, the focus from speakers and the initial briefings was primarily on web tool development, rather than content creation.

As a result, our team composed mainly of journalists, rather than web developers, was somewhat hampered.

To adapt to the web tool brief then, our idea was to marry a ‘snow fall’ style long-form approach with data visualisations to present a fact-check piece in a new, more immersive way; gradually introducing each separate visualisation to tell a data-led story.

‘Snow Fall’ refers to a long-form story that incorporates certain multimedia techniques, to present a long story in a more web-friendly, immersive way. Check out Jeremy Rue’s great blog post for a great, one-page explanation.

Our approach would hopefully avoid bombarding the user with facts – as static infographics can do – or simply using a ‘snow fall’ long-form tool to disguise a text-heavy New Yorker style article, written for print.

Or, to put it another way:

Reinvent the ‘fact-check’ piece with an interactive, long-form infographic.

Building the News

Being the most experienced in the group (and the most bossy), I acted as an editor/project manager role for the team’s project, pulling everyone’s ideas together and ensuring the team stayed focused on creating and publishing an achievable, cohesive piece over the two-day event.

Asking the right questions

Build the news Questions

Our aim was to explore the above questions with a combination of Internet research and data analysis, using the datasets we’d sourced.

The written and visual elements produced as a result, would then be incorporated into the final story.

Planning the structure and its componentsbuild the news elements

Listing the separate elements of the piece not only provided the satisfaction of ticking as each component was produced, but help me to plan the narrative of the final piece.

Drafting a wireframe

build the news wireframe

The original plan was to build our own ‘snow fall’ piece using JQuery, that would allow separate visualisations to fade in and out as the user slowly immersed themselves in a story.

Examples on CodePen such as this one, even provided the base code for such an idea. Unfortunately, the team lacked the sufficient web development skills (and time) to create something quite so bespoke, so we focused on what was feasible instead.

As a result, I did a bit of research on alternative approaches that would allow us to produce something finished and tangible by the end of the weekend, the results of which you can view on my last blog post ‘How do you make your own Snow Fall effect?’.

In the end, I plumped for the visually clean, and simple-to-use Creatavist. Unfortunately, the tool doesn’t allow the story’s components to fade in or out – a defining feature of the original New York times piece – but formed a good compromise nevertheless.

The final piece

Is_there_a_pensions_crisis_looming_By the end of the weekend, most attendees at the event looked bleary eyed and exhausted; partly owing to staring at screens non-stop for two days straight – and partly due to the free beer provided by News UK on the Saturday night.

Still, our own team had managed to complete its project just before the deadline. Also, unlike many projects at Build the News, it was a story-led piece with multiple, hand-built visualisations based on datasets the team had sourced themselves.

You can view the final piece, Is there a pensions crisis looming? on Creatavist, or view the specific bits that I did via rather wonderful Bounce.

The following two tabs change content below.

Dave Allen

Digital Marketing Manager at Birmingham City University
I manage the social media and online presence for Birmingham City University's Faculty of Performance, Media and English, and provide one-to-one social media consultancy for the Faculty's staff.

Latest posts by Dave Allen (see all)

Leave a Reply