Cath Levett: The Guardian Head of Graphics

Credit: The Guardian

Visualising your story is a key aspect of a lot of data journalism. While there are stories that don’t require a visualisation, be it a simple or complex, many more do and getting that right is key for readers and journalists.

I caught up with Cath Levett, Head of Graphics and Interactives at the Guardian Media Group, to find out about their approach to data visualisations, the future, and what they think is important.

Cath Levett Credit: Cath Levett via Twitter
Cath Levett Credit: Cath Levett via Twitter

The Guardian has a reputation for some of the most visually impressive graphics and data representations out there, with this in mind I asked Cath:

What do you do on a daily basis what are the processes behind how the Guardian go about building their graphics?

“My job has moved very quickly from being a person who does design work physically to being somebody who has ideas and focus on the best way to tell a story. In that way it’s quite nebulus, its all about how we approach things.

“While retaining similar elements the process we go through to create a visualisation will differ every time. We always sit down in a project group, there will be a developer, a designer, another senior editor and a journalist in attendance at least.

“What we try and work out is what is the story and what are we are to tell. Then we sketch out a plan and start designing.”

Cath summed up the process as “being about playing around and aggressive collaboration. If one person tries to do it the result is chaos and nothing gets done.”

What tools do you use to build the Guardian’s visualisation?

“We start with pens and paper and whiteboards. We sketch, sketch over each others work and come up with an idea. Then will use Adobe illustrator or photoshop to render it.

Only at the point we have a good plan do we start building the graphic. We use a variety of tools to do that; D3 is one of the most common tools we use but we also use CSS, JQuery and Javascript libraries for example. We use pretty much anything with Javascript.

“We also use more simple tools depending on the project but a lot of our stuff comes from D3 now.”

What makes good visual journalism?

“Anything can be good visual journalism, be it a rich interactive with photos, an immersive snow fall or could just a simple bar chart that tells the story in one second. It all depends on the story and what you are trying to tell.”

“You should not get confused by saying that a great visualisation is a brilliant technical project, it really is about the right approach for each story. It is all about the reader and better informing them and enhancing journalism

“Things go wrong when they don’t collaborate or aren’t sure what’s going on. Often this is for the right reasons as they’ve come to a project late. Setting aside egos is the key to visualisations really. Recently one of our data team did this huge investigation which took weeks and we decided that the best way to use it was just written into the story rather than a big visualisation. That attitude is really key.”

How do you communicate accuracy of data and statistical variance while still making sure graphics look good?

“Well it is very difficult to communicate these things, it doesn’t really come across my desk if I’m honest.

“But I think it is about who you are aiming to inform. You would have the hurricane paths if you were writing for an economic paper but its different in journalism. It certainly isn’t about dumbing down, instead it is about showing what is key and answering our readers questions.

“We take a lot of pride in our data at the Guardian, we always use the correct data, if it is in any way flawed we won’t touch it and will only go ahead with visuals when have the correct data. This is really important to us, visualisation is as much about good data as great presentation. Otherwise you aren’t telling readers the truth.

“An example of this how we scale data, we don’t. We always just show how it is, that’s the data. You can’t exaggerate to make it exciting because that is just a lie.”

How do you strike a balance between print and online?

“It is difficult, it is fun but it’s definitely a challenge. A good example is that we’ve been building some fantastic interactives for the election, and now the print edition has caught up with the need to do election pull-outs and specials but if we were going to do them separately it’d be very labour intensive.

“Thankfully now we’re working more and more in D3 we can crowbar the visualisations off and put it into print relatively easily, with only minor changes. We do have to condense things much more as we are obviously digita first and online there is much more space, but this is just distilling down and editing out.”

Speak of the election, how did you set out to approach it and visualise it?

“Our priority was to set out for the clearest possible narrative for readers in all out visualisation. We asked our selves what we are we going need to show them. This could be making sure they have access to the day-by-day polling data or what the policies from the different parties are.

“To this end we had focus groups in and came up with seven or eight key interactives. Probably the best is the Guardian Poll Projection.

“Although it’s a model it is our model and we are very clear about the hierarchy so that solved a lot of problems for us. We put it in D3 again, like a lot of election interactives, which makes it very editable and can be run from a Google spreadsheet polling wise. It is a really good example of how great visualisations are about bringing different peoples expertise together.”

Credit: The Guardian
Credit: The Guardian

Where going what are the main challenges going forward for data visualisations?

“It is all about making sure put the reader into the story and asking where they fit into the story. Journalism is all about telling the story and that is what we need to keep in mind.

“For example for the World Health Organisation Obesity Index data you could visualise it simply as a map, or you could make it a data set where the reader is involved and they input their data and see what they are in the world. It could be are you fatter than a Samoan or skinner than Ethiopian.

“Or take the Tour de France where you could measure your cycling speed against Chris Froome. This sort of stuff is difficult but its about addressing our key challenge, making sure the readers get the best experience from our visualisations.”

“Our other main challenge is staying abreast of technological change which is still moving very quickly indeed.

Is the future mobile then?

“Yes, it is where 60 per cent of our traffic comes from – more at the weekend.

“We have a mobile first approach, if the visualisations don’t work there then they don’t work. Everything is designed for each mobile breakpoint, portrait and landscape on mobile, small and big tablets. We try and cover all the angles.

“Even now we are designing for the Apple Watch and other wearables which will be a new breakpoint, but to make sure we stay on top we have to keep ahead of the curve.”

That revelation seems the perfect point to stop on and Cath has to go back up to cover the election. I leave with the importance of mobile and keeping readers needs are your key goal firmly stuck in my head, better equipment to visualise my data in the future.

Sociotope brings your online identity to life

A mass of multi-coloured tentacles against a grey-blue backdrop

While browsing data visualisations on Pinterest the other day, I came across an interesting-looking tool: Sociotope, a social media experiment which takes the data people leave behind in social networks and turns it into an interactive data visualisation.

The free-to-use web app works with Twitter, Facebook and soon Google Plus. It uses your data to build a “virus”-like creature with one tentacle for every post you’ve made, or post that someone else has involved you in, up to a maximum of 150 (though you can choose to load more). The colour scheme is taken from your profile picture, and the length of each tentacle varies depending on the length of the post. The more the tentacles move around, the more people have interacted with that post – providing a slightly bizarre but effective overview of your social media presence.

 A screen capture of me exploring Sociotope and using it to visualise my Twitter activity

Sociotope is functional, but also fun and interesting – you can use your cursor to spin it around in the three-dimensional space, and watch as the tentacles flop about. You can click on each one to see details about that post, although with so many tentacles in the way, it can be difficult to hit the exact one you’re aiming for.

Sociotope also provides a few options for analysing your social media presence, including sorting posts by time and by author. Its design is geared more towards visual impact than straight-forward analysis; but it’s effective as a visualisation and fun to play with, and could serve as an entry point for more casual users into analysing their social media presence, rather than only appealing to professionals, like most analytical tools.

A visual metaphor

Stefan Wagner, the designer who created Sociotope, says he wanted people to gain an understanding of what they leave behind online:

If you browse websites, data is collected about you – lots of data. I think the average user doesn’t ever glimpse how much data that is actually collected … these kind of exceptional visualisations, they gain people’s interest, and they will be interested in this viewing this data and what lies behind it.

Stefan describes Sociotope as a “metaphor” that represents people’s social media activity and their social relevance. “I always liked connecting data visualisation to some sort of metaphor – I like working with metaphors to convey information about something. The idea was created to make a data visualisation of social media and put it in some sort of other form, to shape it differently, so that the viewer would learn something else from it.

“I really hope that people are using it to analyse their own presence and maybe the identity of others. Because social networks, they’re all about social interaction, and I think it’s really important for people to realise how they use this kind of social media, how they interact with their friends, and how deep this interaction goes.”

Does he think that this is a role that data should be playing – in helping people realise these things about themselves? “For me, it’s the only way data should be used. Of course big data is used to do advertisements and stuff but for me, the interesting thing lies in analysing behaviour and getting into how people use this kind of media.”

A colourful Sociotope visualisation with a few tendrils extending out towards the words "tweet", "reply", "tweet with media" and "link"
Sociotope can break your online presence down by type of post and whether or not it contains media | Stefan Wagner / andsynchrony

Sociotope also provides an unexpected insight into how the internet has developed over time and how users’ social media presences have changed with it. By loading posts back far enough, you can play them as a time-lapse which shows the evolution of a person’s social media presence over the years.

“When I started to build the project,” says Stefan, “I saw that in 2009 or 2010, people were writing a lot more text, but now they restrict themselves to posting photos or one-liners – just a few words. People tend to not write so many things any more; they more tend to post photos or videos.

“You can read it out of the visualisation. [Similarly], when you look at websites, how they are structured and how they try to gain attention, photographs or images get a lot more space these days than they did two or three years ago.”

Generating Utopia

Sociotope isn’t Stefan’s only project which uses data visualisation to give insight into how people use social media. In 2013, he created ‘Generating Utopia’, a real-time visualisation of social location data using the social platform Foursquare.

It takes a map of an existing city and alters the topography based on a person’s Foursquare check-ins, elevating the areas where a person checks in the most, to emphasise their importance. The locations are connected by a web of neon lines in primary colours: red for work, blue for recreation and yellow for transport. The overall effect is a dramatic, futuristic cityscape.

“People like to represent themselves from their best side, in social networks,” Stefan explains. “So when they check in somewhere, it’s not like the doctor’s office or something; it’s some awesome place. So people will build up a utopic vision for themselves, and I wanted to build utopian landscapes from the data.”

A bird's-eye view of a cityscape with several buildings perched on top of high mountains, with lines of red, blue and yellow light winding their way around the topography
A still from Generating Utopia | Stefan Wagner / andsynchrony

“I really love provoking people by showing them data in a different way. I like using metaphors and images, strong images, which provoke people’s imagination to make them build up a sensibility towards what data means and how much data they produce. I think it’s really important.”

Stefan says that he would like to see more people creating images and ideas from the data that lies behind a person’s online presence. “Every image which is created helps shape this future idea of how data should be, or how social networks should work. I can only motivate people to try to visualise data.”

Interview with data visualiser Ri Liu

Ri Liu, data visualiser at Pitch Interactive. Photo credit: Ri Liu

Good design is key when trying to tell stories in an interactive or visual way.

I spoke with Ri Liu from Pitch Interactive, an interactive and data visualization studio based in California. The studio is best known for its interactive detailing the victims of every known drone attack in Pakistan.

In her spare time, Ri recently created We Can Do Better, which is a visualisation of gender disparity in engineering teams in the tech industry. I was interested in how a reasonably simple data set could be made much more engaging through the visualisation.

Ri's We Can Do Better visualisation. Click the image for the full interactive version.
Ri’s We Can Do Better visualisation. Click the image for the full interactive version.

What was the inspiration for We Can Do Better?

It’s an ongoing issue in the tech industry and as a female in the industry I just asked myself ‘what can I do?’. It’s frustrating when you see this inequality and imbalance.

This data has actually been around for a little while now but in the form of a spreadsheet. It’s great and a lot of people have added to it, but it’s quite technical and has to be updated by submitting a pull request on GitHub.

So I thought, since I have the design and coding background and I’m in tech, maybe I could bring it to a wider audience.

I want to let people touch this information and engage with it, instead of seeing rows and rows on a spreadsheet.

It’s definitely a lot easier on the eyes.

Yeah. I’m glad it’s been shared a lot, and maybe different people and journalists can now engage with this data more easily than before.

The data in its much less engaging spreadsheet format. Click the image to see the full spreadsheet.
The data in its much less engaging spreadsheet format. Click the image to see the full spreadsheet.

Which tools do you use and how long did you spend on it?

I spent a few weekends on it and the visualisation itself is built using D3.

This project is actually on GitHub, I’ve put a creative commons license on it so anyone can look at the code.

Was it worth putting the the time into?

Definitely. Personally, I just wanted to see this data visualised. I’d seen these numbers but it wasn’t really connecting with it in a meaningful way.

I didn’t expect for it to be tweeted around as much, but that’s been really awesome.

How easy would you say it is for someone to learn to use D3?

It’s definitely not the easiest tool to get started with, but once you do get a grasp of it it’s incredibly powerful. When you want to do something you’re not limited by the code at all, so you’re able to say ‘I want to explore the data this way’ and have the tools to do that.

I hardly ever geek-out over technology, but this is the one exception where I rave about it. Compare it to the other end of the spectrum, like the rudimentary graphs in Excel. They just leave you feeling trapped.

Have you noticed increasing interest in interactivity and visualisation from journalists?

We work a lot with publications and I think they’re realising that we need to present these figures visually and in a more compelling way for them to reach people.

That’s definitely been a shift and I think we’ll see more places engaging with data viz companies and studios, as well as more doing it in-house as well.

I’m also interested in how interactivity is being used to tell non-data stories, the most obvious example being Snowfall.

I’m a very avid web user but the problem is that I don’t read a lot of longform content because I just have so much to read that I don’t absorb a lot of it. A lot of sites are just competing for that attention and working out how to make this digestible for people.

I think it’s great to have more visual imagery and better design and it’s great that a piece like Snowfall got such wide attention. It’s like ‘oh, let’s actually pay attention to the design of these articles instead of just dumping text in front of people’.

I’d like to see what the reader stats were for it.

People spent roughly 12 minutes looking through it.

That’s really good.

Because there’s a lot more time gone in to presenting the content like that, I’d also be interested in what that means for the timeliness of certain articles. That was a good piece because it wasn’t about something current, it was just a story.

But it’s a great way of presenting stories which isn’t just dumping traditional print content onto a screen.

Are the tools getting better for making interactive things more quickly? Could we see more timely articles being made interactive?

I wonder whether it’s even possible to produce a piece like that without putting the effort in and finding the best visuals and other  content.

Obviously there are technical aspects like the parallax and scrolling effects they put in, which could just be bundled into tools. But I think that the real beauty of it is in the thoughtfulness, and I’m not sure you could match it without effort and time.

Should we expect more personal projects from you?

I’m always playing around with new technologies. I’ve been meaning to do something with semantic analysis and playing around with words to see biases and other insights.

I’m interested in making people aware of what they’re subconsciously doing and the assumptions they’re making. We’ve got a lot of traces of that on the internet these days, on Twitter, blogs and all these social networks, so it would be cool to do something with it.

That’s just in the back of my mind though. I’m playing around with it but nothing concrete so far.

Word clouds: the bane of James’ existence

I know James Ball hates word clouds more than anything else on earth (besides the City computers, maybe), but in the US media, a story has come up that has actually taken the spotlight off of the Boston bombings. This is a story for the ages, and, frankly, I can only visualise terrorism/mass shooting data so many times before I go slightly insane.

This is a tale of anger, passion, frustration, and drive.

This is a dale of the Deranged Sorority Girl Email.

A girl at a sorority at the University of Maryland wrote a hilarious, profane, Mamet-esque email to her chapter about Greek Week. Non-Americans might have no idea what’s going on in this email, but it is funny. Read it in your best Regina George voice.

Because this text cloud contains quite a bit of profanity, I’m putting it behind a cut. Peruse at your own risk, and don’t blame me if you snort coffee onto your keyboard.

First, let’s talk about word clouds. We never played with them in class as James really seems to hate word clouds, but sometimes, a brilliant bit of text like the State of the Union, or, say a Deranged Sorority Girl Email, lends itself to the medium. This is what Many Eyes has to say on the subject: “A “Word Cloud Generator” enables you to see how frequently words appear in a given text, or see the relationship between a column of words and a column of numbers. You can tweak your word “clouds” with different fonts, layouts, and color schemes.”

Unlike the other, more important, forms of visualisation, Many Eyes says that word clouds were simply meant to “give pleasure” (author’s note: anyone who derives pleasure from these is sad) and not provide reliable analytical insight. So here you are: Deranged Sorority Girl Email, analysed for your analytical pleasure.