Some notes on a collaboration with a Google News Lab: ‘How to fix a toilet and other things’
Everything started with the little dude.
Visually at least.
His movements took just a few keyframes per second. It was more about each pose than about fluid motions.
Once I had his style locked. Everything else followed. The shapes of the fixtures, the structure and the type on the page …
For the past year and a half, Google News Lab has been working with visual folks to imagine stories using Google data.
I pitched two ideas: a serious, hard news story, and this project. The latter literally came to me as I kept searching how to fix things in our new home. We had just moved to Girona, and I had all the time in the world to, at least, try to do some work around the … Nope, I can’t. “Amore! Can you help me here?”
Of course I started with this project first. The fun one.
While sketching and scribbling the non-data elements of the project, I kept thinking about two friends and pictogrammers extraordinaire, Sergio Peçanha and Alvaro Valiño. I know I don’t have the discipline of their lines, so I needed to add the flavor via the animations, where I knew I could be funny.
My son Roi (3) kept asking to see the kiss. He said, “it’s daddy and Roi! Roi is a grown up now”.
Alberto Cairo reaaally liked the dude eating with chopsticks.
My favorite animation is the cups song at the end of the essay. (Yah, that’s me singing. I’ve got no shame. At all.)
I’m not a designer and I’m sooo not a developer. (The little I know I’ve learned from colleagues and books and at work.) I like telling stories. So that’s what I craft first whenever I start a project.
When I visualize (as in imagine) the shape of its narrative, what I see is the experience of reading it. I see where I need to be funny, where I can be drier. I see the rhythm.
So it went like this:
- Here’s a hook,
- here’re a few things about the hook,
- here’s a jokey interlude,
- here’s the bigger picture,
- one angle, another angle,
- and coda.
I recently started taking a Masterclass, Steve Martin Teaches Comedy. In the trailer, he says “I have a little bit of a pet peeve for comedians who come out and say ‘How we doing tonight?’ You’ve blown one of the most important moments of your show”
That’s also true when you craft a story of this kind. And that’s why maybe I spend a bit too much time on the language and the design of the first 10 seconds of the reading experience. Here I used a cold open that’s both self-deprecating and boastful— I really do know how to make liquid olives.
And I sketch the hell out of those first 10 seconds. Some things make it, some things don’t. But it soothes me when I start putting things in place: if I follow the plan I can easily see if I’ve managed to engage the reader in the story.
The map element, Roi’s favorite, was kind of accidental. I had originally envisioned this bit as a regional cartogram, a cleaner and more precise visual; and I left it till the end because I thought it might take the longest to produce.
And so it happened as I was sketching it: simply using the countries’ centroids and cloning (literally using cloneNode()) the corresponding element in its place. The visual was interesting. The doors of the washing machines reminded me of the many eyes of Dalí’s set for Spellbound. Maybe because we had just visited Dalí’s house in Portlligat?
The visual is impressionistic, and I may have discarded it if I were still an editor at a news org. But it was such an intriguing picture that I chose to stick with a version of it for this essay.
The first charts I actually coded were the seasonal line charts, almost at the bottom of the essay. The first sketch was a radial chart, like Moritz Stefaner’s year clocks in the Rhythm of Food, which thanks to d3’s lineRadial() is a pretty easy thing to do.
I decided against it for two reasons:
- I didn’t want the user to dwell on the charts because it would break the rhythm of the story, since they’re a somewhat unusual charting device they would take longer to read.
- They have too much unused real state, the line charts needed less room and less annotation.
I’ll go ahead and preemptively point out, in case someone may misinterpret, I have nothing against radial charts, and in Moritz’s ‘Rhythm of Food’, they are spot on: they ARE the project’s charting device, what they are and how to read them is beautifully explained at the top of the story, and since the project is a big matrix of small multiples they make comparisons easier.
The main interactive is really the top chart of fixtures around the house. And it was really the first element of the essay that I imagined and sketched out.
I pictured the chart itself as a cross-section of a house. The fixtures grow or shrink depending on the how much we searched how to fix them. (Still need to say we used area for the proportions?)
One option I discarded almost right away was using parallel coordinates, a charting device I’m quite fond of. When properly utilized, it gives you both the full picture and the highlight in context. But here, it made reading each country — which was the point of the interactive — much harder.
The country selection was originally a select tag regardless of the screen size. But it really made more sense as an autocomplete field on bigger screens (using awesomeplete) and a select menu on smaller.
To check for the user’s country IP I used freegeoip.
When I pitched it to Simon Rogers and Alberto, Alberto said “it’ll have lots of little animations and little people, right?” For all his professorial stances, we come from the same school ;)
I chose the fixtures at the beginning of the story rather unscientifically, by checking the lists of the top things you can fix yourself on a few dozen DIY sites. (Though if you’ve ever worked on a newsroom you may say that’s quite scientific.)
The data itself and the other ‘how to’ items were more methodical basically because Sabrina Elfarra, from Google News Lab, got everything for me.
As you can tell, the essay is not a rigorous look at what we don’t know ‘how to do’. It tries to be a playful essay on how much we depend on search to do everyday things.
So take it as such, and I hope you enjoy it.
Oh, and I while I worked on this, I was playing this on repeat.
