Sony Radio Academy Awards 2012: Silver Medal for Best Internet Programme

Days in the life of the Guardian

Last year, we undertook a commission for Manchester International Festival: Francesca Panetta produced a series of audio segments documenting several days in the life of The Guardian across its 190 year history, that I then built into a touch-screen booth (which can also be viewed on our website).

The Sony Radio Academy Awards have just been announced and I'm pleased to report we won a silver medal for Best Internet Programme.

Malofiej 20 Awards: Criteria, Innovative Format

Happy to see our Riot Rumours interactive honored at the self-proclaimed "Pulitzer of infographics" – Malofiej. NYT graphics (deservedly) scooped such a large haul of gold medals this year they'd give Michael Phelps a run for his money. Robert Kosara explains why on his Eager Eyes blog.

Photo pinched from Andy Kirk's write up over at Visualising Data.

IRE / NICAR 2012: Capturing and analysing Twitter feeds

St Louis Arch - IRE / NICAR 2012
St. Louis, Missouri, USA

All this fuss about data journalism seems to forget the fact people have been tucked away in Computer Assisted Reporting teams for the last forty years, piecing together Pulitzer winning investigative pieces. It was nice to be asked to join a panel at the IRE's annual NICAR conference – an event that not only represents this heritage but also acts a gathering point for many of the news app teams that have been springing up around the world.

It found myself on a panel discussing how Twitter can be used as a source for social analysis. Since we launched our Riot Rumours interactive, my talks have been increasingly dominated by tigers and fluorescent microscopy. Flying balls aside, there was plenty of other stuff on the menu, not least the booking hall of St Louis central station aka the hotel bar.

St Louis Union Station

At the conference, three highlights were Matt Waite's drone journalism demo, Brian Boyer's PANDA costume and all the things people managed to fit into their two minute lightning talks. Out and about in St Louis, we sampled the lesser-known Serbian restaurant scene, visited a bar with the midwest's largest collection of canned beer and slid ten storeys at the amazing City Museum.

MozFest 2011: Timelines, Flow Media and Real-Time Reporting

Mozilla Festival
London, England

Earlier in the year, Mozilla came in to the Guardian to run a hack event as part of their search for MoJo News fellows. It was great hearing Mark Surman describe some of their current initiatives with such passion and enthusiasm. Consequently, I was really happy to be asked to put together a workshop at MozFest with Dan Sinker who runs the fellowship program (now in partnership with the Knight Foundation).

We got together the day before the conference to figure out a structure with our co-host – Bilal Randaree from Al Jazeera. This was made easier by the fact we were all over at Ravensbourne College to announce who'd been awarded the first round of fellowships. Congratulations to Nicola Hughes who'll be joining my team at the Guardian next year.

The workshop ended up focussed on Flow Media – the increasing presence of realtime content on news websites. We challenged our participants to come up with novel ways of merging content such as live blogs, comment threads and video streams. In the face of emerging events like the Arab Spring, this kind of coverage is becoming more and more important editorially. It's also a great opportunity to incorporate interactive interface ideas.

Elsewhere in the building, Liliana Bounegru and the OKFN team brought together a host of great people to write the first draft of something they're calling the Data Journalism Handbook. With contributions from folks like Scott Klein, Aron Pilhofer and Brian Boyer it's bound to be worth a read. I look forwards to getting involved as soon as I've got some time.

Strata New York 2011: a closer look at Guardian Interactive

Strata New York 2011
New York, New York

Ever since OSCON, O'Reilly have been doing a great job of finding interesting conference niches. Strata is their latest offering and caters for the ever-growing community of programmers, business analysts and stats gurus helping industry to make sense of the huge volumes of data now being recorded throughout the digital world.

It was interesting watching the collision currently occurring between the hip young data science community and folks who’ve been running analytics or data warehouse operations for years. Although journalism may seem a little sidelong to all that, I suspect the common ground is people's desire to see analytical insights arranged into narrative sequences. If we're not careful, data journalists may end up the Crystal Reports experts of our time 😉

Anyhow, my talk on how we worked with Datasift to visualize the Murdoch hearing segued into an interesting line up. Immediately prior was Hjálmar Gíslason describing Iceland's – an attempt to build “Google for numbers” – and the work they've been doing to provide a set of standard visual components. Following me was Irene Ros, formerly of IBM's ManyEyes team, describing some situations where data visualization makes it easier for people to follow a narrative and others that don't.

Interactive Storytelling at Hacks/Hackers NYC

Hacks/Hackers New York
New York, New York

I am grateful to Chrys Wu and Jenny 8 Lee for finding me a slot at Hacks & Hackers the week I was in New York for Strata. Aside from meeting a bunch of extremely bright (and friendly) journo-develop-nologists, it gave me a chance to run through some of the material I planned to present a few days early 😉

Hurtling across Manhattan in a taxi with super sidekick Alex Graul, I was daunted to discover the event had not only sold out but also acquired a secondary ticket market. In the end, the combination of a great venue (thanks CUNY), marvellous deli food (thanks Mile End), and the enthusiastic crowd was a real winner (thanks everyone). I was particularly taken aback to discover that 95% of attendees were attempting to hire news devs. New York will clearly be home to a lot of great work in the next few years…

15th Annual Webby Awards: Winner, Online Video – News & Politics

Happy to report that our interactive Haiti documentary has won the Webby award for best News & Politics item in their Online Video category.

The 15th Annual Webby Awards

Wikileaks: Visualising the Afghan and Iraq war logs

The latter part of 2010 has been dominated by Wikileaks stories. Although the whole circus surrounding Julian Assange has started to resemble a bit of a pantomime, it was interesting to have played a part in such a major editorial project

Wikileaks Afghan war logs

The two pieces I worked on shown above are a map cum timeline featuring all of the IED incidents in Afghanistan over a five year period (above) and a blow by blow account of "a typical day in one of the bloodiest years of the Iraq conflict" (below).

Iraq war logs: A day in the life of the war

Thanks to the flood of media attention, I was given an opportunity to describe the process behind the Afghan warlogs piece on the Flowing Data blog. The Iraq piece was envisaged by editor Ian Katz and was my first collaboration with Mariana Santos, our new motion and interactive designer. There's a summary of what went on behind the scenes over on the Columbia Journalism Review's blog.

Now and later: Talking interactives at Hacks/Hackers London

interactive storytelling now and later

Six months after Apple v Adobe first became headline news, I found myself in the basement of a pub explaining how the Guardian builds interactive news features. Although we've made heavy use of Flash in the past, we're currently evaluating the promise of standards-based authoring and I wanted to share some of our findings.

The intrepid London branch of Hacks/Hackers invited me to speak about creating interactive pieces in a newsroom. The audience was a mixture of coding types and journalists, so I wanted to discuss our process without getting too hung up on technical details. Since everyone seems to be singing the praises of HTML5, I wanted to take a practical view on whether it could be used to make some of the pieces we've produced recently at the Guardian.

Our existent workflow copes well with rapid authoring and that's helped a great deal by the tools we use. Creating interactives requires constant dialogue between designers and developers, and the ability to port Adobe Illustrator files into Flash makes this fairly seamless. While Adobe are starting to broaden their tools to encompass the new technology, it's still early days – and in the fast pace of the newsroom, speed and reliability are big factors.

On the plus side, vector drawing, animation, realtime image manipulation and 3D graphics are all there; good start. Features like web sockets and web workers bode well for the future. However, in its current state, the lack of cross-browser consistency and unpredictable performance means we'll have a hard time bringing people comparable experiences. Moving through a series of our more successful pieces, it seems that each one has one or two ingredients that are hard to replicate without Flash. For example, although HTML5 contains greatly improved audiovisual features, it would be difficult to reproduce April's sound map of Caledonian Road without more reliable audio synchronisation capabilities. That said, we look forwards to continued experiments in this area and would imagine that better tools are round the corner.

A PDF of my talk can be found here. My colleague Martin Belam did a nice job summarising the evening as well.

UK spending review 2010: you make the cuts

UK spending review 2010: you make the cuts - Guardian Interactive

Comprehensive spending review: you make the cuts

Another 2.5 week race to deadline, this project developed out of the collision between an editorial desire to create a “challenge the chancellor” style budget game and a prototype I put together for David McCandless to show him how treemaps might be a way to display his billion-dollar-grams programmatically.

McCandless & I

This was a rewarding challenge to think through and build. The datablog team did a great job wrangling various oblique sources of government into a single spreadsheet. The graphics desk did an update of their fantastic atlas of public spending centre spread. It was nice to sit with Paul Scruton and figure out how to turn a treemap into a game. Above all, Mark McCormick's awesome color palette lent the piece its codename – Project Elmer!


BBC Audio & Music Innovation Day: Introducing the World Cup Twitter Replay

BBC Audio & Music Innovation Day 2010: Alastair Dant introduces the Guardian's World Cup Twitter Replay

London, England

I was happy be asked to present our World Cup Twitter replay at the BBC's Audio & Music departmental meeting earlier this month. It's not every day you get on stage at the Radio Theatre in Broadcasting House. True to form for radio folks, everything was pretty tightly organized – the night before the event I discovered I needed to be much better prepared than normal to keep my talk in line with the quick fire schedule. The solution turned out to be delivering the talk over the top of one of the match replays. 90 seconds is far easier to pace when you know what's coming next!

If you're interested in finding out what else was presented, one of the organizers wrote up the event on her blog. Piccy by our illustrious intern, Mariana Santos.

Haiti earthquake, 6 months on: interactive

Haiti earthquake, 6 months later: interactive by the Guardian

The Guardian's multimedia team spent several months in Haiti documenting the follow up to January's tragic earthquake. I was pleased to help provide a home for this on the web.

What with the high hosting costs and no guarantee that readers will have sufficient bandwidth, our site hasn't published HD video in the past. Our systems team obligingly made an exception in this case, and I worked with designer Chris Fenn to build a full-screen interface onto the results

This piece won an award for News and Politics at the 2011 Webbys.

Tour de France 2010: interactive guide

Tour de France 2010 interactive - Guardian

Several members of the graphics team and myself are big cycling fans, so it was good to get a chance to create an interactive guide to various aspects of this year's Tour de France. Pete Storey worked hard animating the race tactic explainers and producing graphic summaries for every stage. Paddy Allen pulled together the team jerseys and invested long hours creating fly-through videos for the mountain stages using Google Earth. Christine Oliver worked with me on the spoketastic loading screens. Allez!

World Cup 2010 Twitter replay

World Cup 2010 interactive - England v Germany - Guardian

Upon finishing the election, we plunged straight into building a series of interactive features for the World Cup. Everyone's favourite was our animation of Twitter activity, a fast motion replay of each game in the tournament through the medium of flying balls. Having hatched the plan whilst away on holiday, I was lucky that a host of talented people came together to get things built under real time pressure. You can read the full write up of how we built it on our Inside Guardian blog.

This piece has featured all over the web since launching, not least Google Creative Lab's round up of the web's most “interesting” things. Perhaps most rewarding was seeing it recognised at Malofiej 19.

UK Election 2010: interactive map, swingometer and live results

 UK election 2010 map and swingometer - Alastair Dant for the Guardian

Elections are a key responsibility for interactive news teams. In the run up to the event, polls and predictions tend to be popular features. On the night itself, sites see some of their highest traffic as readers search for realtime results. This leads to some late nights as newsrooms compete to build novel widgets and systems solid enough to cope with spiking web activity.

Earlier in the year, Guardian editorial requirements came to focus on three key items. I'm glad to be able to say we got them all built in time…

An interactive map shows results from the last election and features a swingometer that lets readers try out different scenarios in voter shifts. I really like Mark McCormick's “pixelated” equal area map and the transitions that Martin Shuttleworth put in between the map and bar chart views. The swing “joystick” came out of some early prototyping with the graphics team. I'd have to check with Peter Snow, but I think it's the first time anyone has managed to swing three ways.

Our poll tracker showed new data each day from a series of key opinion polls. It allows readers to switch between an aggregate view and the results of each individual poll. We had fun working out how to animate smoothly between graphs:

General election 2010: poll of polls

The main focus for live results was a map drawn from a series of JSON files published throughout the night by Aristotle, our backend datastore that is updated automatically from Press Association feeds. We also built a “bento box” for our front page featured a series of live data widgets:

2010 Election Guardian homepage - the "bento box" Bento Box II - the revenge of sushi

It was nice to see the swingometer featured on the Flowing Data blog – I've been a fan for some time.

Caledonian Road: London Sound Map

Caledonian Road, London - sound map, interactive map by the Guardian

I first met Francesca Panetta at one of our hack days. It was great discovering she knew and liked the interactive maps I built as part of the Folksongs Project. Her production work such as the Hackney Podcast is quite unique – a multi-layered approach to audio that you seldom hear on the radio. I was thus really keen to build an interactive interface for her Caledonian Road audio tour. We put together a team featuring Chris Fenn's design talents and Jonny Reeves impeccable media programming skills.

Discussing the audio material, it became clear that the tour traversed the road from top to bottom and we could thus use the map itself to display progress through the program. Breaking the audio into chapters allowed a greater degree of non-linear access. It also presented the opportunity to give each chapter an accompanying slideshow, with each photo introduced at cue points specified by Fran.

2009: the year in review – interactive

2009 year in review - Alastair Dant for the Guardian

It was the year Barack Obama took office, Britain entered recession, MPs' expenses were exposed to public scrutiny, Iranians protested after a flawed presidential election, Michael Jackson died and the Copenhagen climate summit ended in recriminations and a flawed deal.

From the hundreds of stories, galleries, videos, and comment pieces produced daily, our Guardian editors chose just one piece per day. I then worked with the picture desk to find a series of appropriate images and the graphics team to design a suitable interface. The result is this interactive, best viewed in full-screen mode to really get lost in all that's happened. Enjoy.

The complete Jane Bown: exploring a lifetime in photographs

Samuel Beckett photographed by Jane Bown - interactive by Alastair Dant for the Guardian

The Observer published its first Jane Bown photograph in December 1949, initiating a long-standing relationship between Britain's oldest Sunday paper and one of the country's best-loved photographers. To coincide with the publication of Bown's definitive collection, Exposures, and her London exhibition, we brought together all of Bown's work in this interactive guide.

This piece features seven decades of the artists work; restored, digitised and now viewable in full-screen format.

Glastonbury 2009: interactive map with time slider

Glastonbury interactive map 2009 - Alastair Dant for the Guardian

The Guardian produces hundreds of articles, reviews and videos about Glastonbury every year. For fans of the festival, one of the best ways to organise this information is according to time and location. This interactive map allows you to explore Glastonbury 2009 as it happened, with pictures, podcasts, videos and reviews appearing in the right place and time. You can drag the time slider at the bottom, and hover over icons as they appear.