Browse > Home /

#GEN2012: Interactive graphics case studies from the Guardian

May 30th, 2012 | No Comments | Posted by in Multimedia, Online Journalism

The Guardian’s Alastair Dant took the the stage at the News World Summit in Paris today to share the news outlet’s approach to using interactivity to present data and stories to their audience.

Dant, who leads the interactive team at the Guardian, said types of interactives include those which plot “paths through space and time”, and those which work to relay “the roar of the crowd”.

Here are some of the interactives he showcased to delegates:

  • Afghanistan war logs

The Guardian produced two major interactives around the war logs. Dant spoke about one which shows all IED attacks on civilians, coalition and Afghan troops from 2004 to 2009 recorded in the war logs. The interactive allows users to “drag the date along the bar, to see where and who they hit over these five years”.

The team also produced a graphic showing a selection of 300 “significant incidents” from the logs, linking through to each full log entry.

  • World Cup 2010 Twitter replay

Dant said the team had a “very fuzzy brief” from the editorial team who wanted to “capture the excitement” around the games. As a result the team produced a “Twitter replay” which consisted of recording all conversations on Twittier and analysing them “to find out how word popularity changes over time”.

As a result the interative offers 90 minutes of football in 90 seconds, based on Twitter reactions.

  • Rupert Murdoch: How Twitter tracked the MPs’ questions – and the pie

And the team re-employed this technique of “relaying the roar of the crowd” when Rupert and James Murdoch appeared before the culture select committee last year

Tags: , , , ,

Similar posts:

Nieman: The New York Times and the kitchen table of the future

The New York Times’ top-floor Research and Development Lab has released a demo video of its latest innovation: a kitchen table. No ordinary kitchen table obviously, it uses Microsoft’s Surface technology to produce a tabletop news consumption experience that departs from the paper’s normal design and layout and has strong social features built in.

See the full demo video below, courtesy of Nieman Journalism Lab, which has a fuller write-up on the table and the New York Times R&D Lab, and transcript of the demo.

New York Times R&D Lab: The kitchen table of the Future from Nieman Journalism Lab on Vimeo.

Tags: , , , , ,

Similar posts:

The death of Osama bin Laden: New York Times interactive gauges public opinion

I really like this interactive feature from the excellent New York Times graphics team on readers’ reactions to the death of Osama bin Laden.

As a way of organising responses to a crowdsourcing exercise it isn’t anything new, it takes off from mapping responses geographically. But it is simple and effective, mixing text responses with a broad visual understanding of where the readership’s sentiments fall.

Interesting to see how many people sit right on the fence in the significance stakes.

The image below is a completely non-interactive screengrab of the feature, but follow this link for the full experience.

The NYT team has also put together some impressive graphics showing the layout of the compound, geography of the area and timeline of events.

Tags: , , , ,

Similar posts:

Media release: BBC gets Queen’s Award for sports graphics system

April 21st, 2011 | No Comments | Posted by in Awards, Broadcasting, Editors' pick

The BBC reports its Research & Development department received a Queen’s Award for Enterprise today for its TV sports graphics system Piero.

By laying graphics over the TV pictures, Piero gives sports presenters and pundits another way to view and analyse crucial incidents in the games, and explain them more effectively to the audience.

According to the broadcaster the Piero system was initially created by BBC R&D and has since been developed and licensed internationally by Red Bee Media, with the award being jointly awarded to both organisations.

Piero works by creating a virtual stadium, which is synchronised to the “real” pictures coming from the TV cameras. Pictures of real players are transposed into the virtual stadium, where it is possible to view and analyse the game from different angles in animated sequences.

In-game incidents, such as offsides and forward passes can be assessed by pundits from the best angle – even if the play has not been captured at this angle.

The system can also render graphics such as distance markings so that they appear tied to the pitch.

The BBC press release can be seen here…

Tags: , , , ,

Similar posts:

#ijf11: Lessons in data journalism from the New York Times

Follow this link or scroll to the bottom to start by hearing more from New York Times graphics editor Matthew Ericson on what kind of people make up his team and how they go about working on a story

The New York Times has one of the largest, most advanced graphics teams of any national newspaper in the world. Yesterday at the International Journalism Festival, NYT deputy graphics editor Matthew Ericson led an in-depth two-hour workshop on his team’s approach to visualising some of the data that flows through the paper’s stories every day.

He broke the team’s strategy down in to a few key objectives, the four main ones being:

Provide context

Describe processes

Reveal patterns

Explain the geography

Here is some of what Ericson told the audience and some of the examples he gave during the session, broken down under the different headers.

Provide context

Graphics should bring something new to the story, not just repeat the information in the lede.

Ericson emphasised a graphics team that simply illustrates what the reporter has already told the audience is not doing its job properly. “A graphic can bring together a variety of stories and provide context,” he said, citing his team’s work on the Fukushima nuclear crisis.

We would have reporters with information about the health risks, and some who were working on radiation levels, and then population, and we can bring these things together with graphics and show the context.

Describe processes

The Fukushima nuclear crisis has spurned a lot of graphics work at news organisations across thew world, and Ericson showed a few different examples of work on the situation to the #ijf11 audience. Another graphic demonstrated the process of a nuclear meltdown, and what exactly was happening at the Fukushima plant.

As we approach stories, we are not interested in a graphic showing how a standard nuclear reactor works, we want to show what is particular to a situation and what will help a reader understand this particular new story.

Like saying: “You’ve been reading about these fuel rods all over the news, this is what they actually look like and how they work”.

From nuclear meltdown to dancing. A very different graphic under the ‘desribe processes’ umbrella neatly demonstrated that graphics work is not just for mapping and data.

Disecting a Dance broke down a signature piece by US choreographer Merce Cunningham in order to explain his style.

The NYT dance critic narrated the video, over which simple outlines were overlaid at stages to demonstrate what he was saying. See the full video at this link.

Reveal patterns

This is perhaps the objective most associated with data visualisation, taking a dataset and revealing the patterns that may tell us a story: crime is going up here, population density down there, immigration changing over time, etc.

Ericson showed some of the NYT’s work on voting and immigration patterns, but more interesting was a “narrative graphic” that charted the geothermal changes in the bedrock under California created by attempts to exploit energy in hot areas of rock, which can cause earthquakes.

These so-called narrative graphics are take what we think of as visualisation close to what we have been seeing for a while in broadcast news bulletins.

Explain geography

The final main objective was to show the audience the geographical element of stories.

Examples for this section included mapping the flooding of New Orleans following hurricane Katrina, including showing what parts of the region were below sea level and overlaying population density, showing where levies had broken and showing what parts of the land were underwater.

Geography was also a feature of demonstrating the size and position of the oil slick in the Gulf following the BP Deepwater Horizon accident, and comparing it with previous major oil spills.

Some of the tools in use by the NYT team, with examples:


Google Fusion Tables
Tableau Public: Power Hitters
Google Charts from New York State Test Scores – The New York Times
HTML, CSS and Javascript: 2010 World Cup Rankings
jQuery: The Write Less, Do More, JavaScript Library
jQuery UI – Home
Protovis
Raphaël—JavaScript Library
The R Project for Statistical Computing
Processing.org

An important formula 

Data + story > data

It doesn’t take a skilled mathematician to work that one out. But don’t be fooled by it’s simplicity, it underpinned a key message to take away from the workshop. The message is equally simple: graphics and data teams have the skill to make sense of data for their audience, and throwing a ton of data online without adding analysis and extracting a story is not the right way to go about it.

More from Matthew Ericson on the NYT graphics team

I spoke to Ericson after the session about what kind of people make up his team (it includes cartographers!) and how they go about working on a story.

Here’s what he had to say:

Listen!

The BBC’s Peter Horrocks on data journalism

I spoke to Peter Horrocks, who is director of the BBC World Service and the BBC’s global online news operations after the session about his take on data journalism and whether the BBC Global News had ambitions in this direction.

Here’s what he had to say:

Listen!

See the full list of links for Ericson’s session on his blog.

See more from #ijf11 on the Journalism.co.uk Editor’s Blog.

Tags: , , , , ,

Similar posts:

10,000 Words: Four fixable sins of news site design

For those designing (or redesigning) a news site, this 10,000 Words blog is worth a look. It concentrates on four ‘fixable sins’ of news site design: swamps of share buttons; layers of navigation; avalanches of links; cluttered sidebars.

Let’s be honest: In general, news site design isn’t pretty. I know I’m not the first or last to say it, but I do have a theory about why. It starts off innocently enough — an article, navigation, some ads. But as new tools, gadgets, buttons, widgets, extensions and plugins are introduced to the news consumption scene, that once simple design becomes cluttered with bells and whistles that hold the content hostage.

Full post at this link.

Tags: , , , , ,

Similar posts:

© Mousetrap Media Ltd. Theme: modified version of Statement