On Monday, The Upshot published an interactive that maps income mobility of children born into poor families. What made this piece particularly noteworthy is that it geolocates readers, rendering a map in the county of your IP address. Click on it, or the table below, and the accompanying story rewrites itself.
When Adam Schweigert — Senior Director of Product and Technology at the Institute for Non-Profit News — tweeted about the piece, I reached out to Upshot developer Gregor Aisch for a behind-the-scenes look at how the interactive was made.
This NYT story rewrites itself when you interact with the graphic(!!!!) http://t.co/amurle4YEN
— Adam Schweigert (@aschweig) May 4, 2015
I love how this piece zeroes in on my geolocation and the story rewrites itself based on my interactions. Tell me a little about the planning process that led to this approach, especially with the editorial team.
At The Upshot there’s no separation between an “editorial team” and graphics editors. On our team, graphics editors write words and reporters make charts, every day. This eliminates painful meetings between different departments and lets us just do things.
Walk us through the design and development steps to make it happen.
That question would take too long to answer properly. The short version is: there’s an interesting study, we get the data, we try out different ways to present it and when we find a nice presentation we publish it.
Aisch shared a bit of additional context with Ben Chartoff of the Urban Institute:
— gregor aisch (@driven_by_data) May 4, 2015
How many development hours went into this project? What did you find to be the most challenging part of production?
We played with a couple of ideas earlier this year, but for the final version we spent maybe one to two weeks, with some editors joining in later than others. The most challenging part was, as usual, to find a way to make the interactive work well both on desktop and mobile devices. The geolocation stuff was actually pretty simple to get set up, it turned out that our Interactive News team had already build a service for that for a different story in the past.
When I click on the map or the table to view a different county, body copy highlights to reflect the story has changed, too. How do you decide on this approach to show users what was happening? Did you explore others?
We did try a few other approaches. One was not to highlight the changes at all, which would have made it harder to see that the copy reflects your selected county. Another thing we tried was to constantly highlight all “dynamic” parts throughout the copy, but this would have cluttered up the design too much. So we decided to go for the classic one second yellow flash.
What did you learn through your work on this particular interactive? What would you do differently given the chance?
Well, we learned that it can be nice to adjust a story for the readers location. And that a U.S. map isn’t always the best way to introduce a national issue. Not sure what we’d do differently, but we’ll see next time.