How the Wall Street Journal built a series of artful animations for an investigative series
Tom Hayes is one of the few bankers in prison for crimes committed during the global financial crisis that erupted in 2008. Hayes, a former UBS and Citigroup trader in London, was recently convicted of manipulating Libor—London’s inter-bank lending rate—to make more money for himself and his employers and sentenced to 14 years in prison. David Enrich, a Wall Street Journal reporter, has followed the case and Hayes for years, gaining remarkably close access to the 35-year-old banker, now inmate.
“He sent me thousands of text messages, at all hours of the day and night,” Enrich writes in the first installment of a five-part series named “The Unraveling of Tom Hayes” and published this month. To help push the story along and complement the narrative, the newspaper’s graphics department created a series of animations that serve as visual metaphors of the unraveling of Hayes’s life as he knew it. Examples of the text messages between Enrich and Hayes were also included artfully within the layout of the series.
Storybench spoke with Elliot Bentley, a graphics editor and coder at the Wall Street Journal, about the project.
See the Pen SVG/canvas thread unraveling effect by Elliot Bentley (@ejb) on CodePen.
How did you build these illustrations?
Essentially they are three layers. There’s a static jpeg in the background. The next layer up is an SVG illustration of Tom Hayes in each case. Then, I use Snap SVG to follow the line around and peel the orange line off of a white line to make it seem like it’s unraveling. To prepare each illustration, I had to take apart [the illustrator’s] Photoshop file.
But how does it look so life-like?
I used a Verlet JS physics engine to render that line so that it is dangling. It’s actually pinned at one point and its length increases slightly. Optimizing the performance of this was one of the biggest challenges. It was an interesting marriage of art and science.
How many people were working on this story with you?
“The Unraveling of Tom Hayes” had lots and lots of people involved. We had a lot of cooks in the kitchen. There were several people on the design side. [Senior art director] Nick Hallam came up with the unraveling idea. It was down to me to actually turn that into something in practice.
What was the development like?
There was a lot of back and forth. I was reading through a lot of David Enrich’s early drafts. The collaboration was perhaps more casual than you might expect. We had sporadic meetings about it. Because he was based in London, David and I would talk through ideas together. The team would talk over Slack. It came together organically.
What’s another element that you built for the story?
There were a lot of text messages between himself and Hayes. So I said, wouldn’t it be really cool if we could show these text messages as if they were real text messages? You are reading these texts as if they were on your on phone. [inlinetweet prefix=”” tweeter=”” suffix=”says @elliot_bentley”]Is that reporting? Is that design? Is it programming? It’s all three.[/inlinetweet]
How did you get into journalism and code?
I spent a lot of time on the student newspaper at university. But I’d also build websites for my mom and for family friends. I did programming for my biology degree. I figured I had the skills to redesign the website for the student paper. That was the first time I had put together passions that I had. Eventually I developed oTranscribe to aid myself as a reporter. And I got a job at the Journal which was pretty incredible. The great thing about this job is that I really get to have my cake and eat it. I get to work with reporters on great stories. I have a part in journalism even if I don’t write words.
What’s your philosophy on digital newsroom?
When it comes to newsroom tools, I spend a lot of time trying things out. In software development, it’s all about iteration. You have a minimum viable product and then you try out like we did when we built Pinpoint, which is our mapping tool.
What advice do you have for students or young journalists trying to retool and survive in the digital age?
I wish I’d known how to code earlier. I wish in high school they had taught us to program. It’s difficult to teach yourself. I didn’t take any classes; I had to spend my free time doing it. So my advice is learn the basics while you still have time.
Do you think it’s more about learning specific languages like CSS and Javascript or learning a more holistic approach to code?
I think a holistic approach is better. The industry and technology is changing so quickly that five or six years ago I might have been telling everyone to learn Flash. But if you had been learning ActionScript you probably would have picked up Javascript. I’m hoping I’m well placed.
Tell us about Journocoders, your hacker-journalist collective.
Journocoders has been running for nine months now. We get people from various publications. I really wanted to see more events in London geared towards the intersection of journalism and technology. I love Hacks/Hackers but it’s all about talks and is not so often about the code these days. I wanted to start something where everybody brought their laptop along and we went through a tutorial together. It’s not just for beginners. It’s for developers to learn stuff that they don’t work on every day. I hope it’s a breeding ground for collaboration.
https://twitter.com/Jackdearlove/status/643861413300170753
What’s the state of news and code in the U.K.?
I think it’s fair to say that the U.S. powers over the U.K. in terms of technology-assisted reporting. That said, there’s incredible work coming out of The Guardian, especially with Aron Pilhofer there. Also, at the Financial Times with Martin Stabe. And The Times of London have been starting to put together an incredible team that is trying to digitalize the whole newsroom, building tools like their own Chartbuilder.
And there are other pockets of activity. For example, there was the ill-fated Trinity Mirror site called Ampp3d, run by Martin Belam. It was really cutting edge and it’s sad that it ended. It had custom built things. There were developers sitting next to reporters. It was a tabloid doing silly and frivolous data journalism. Anna Leach, who used to work there, recently wrote about the Nine things she learned making data journalism mainstream. She makes really interesting points about what people respond to. Her ultimate conclusion after sitting with these developers for a few months is that she needed to become a developer. So [now] she is.
