Features:
The NYT’s Detroit Foreclosure Interactive
Designing and Building the Mosaic
Last week, the New York Times published an interactive photo-mosaic of 43,634 Detroit properties at serious risk of foreclosure. As you scroll down the page, viewing neighborhood after neighborhood, the number of properties and the total amount owed on them adds up at the top of the page.
Each photo is taken from Google Streetview, and although many picture empty lots and some are of houses with boarded-up windows, more reveal well maintained houses, big and small, with tidy green lawns, flowering trees, and neatly trimmed shrubbery. Some have patio furniture arranged on the front porch. Many have cars in the driveway. It takes a long time to scroll to the bottom.
Early reactions ranged from commending the piece’s emotional impact to characterizing it as “ruin porn.” Buzzfeed’s Jeremy Singer-Vine pointed up its use of the “rhetorical scroll” also seen at work in the Washington Post’s The Depth of the Problem and ProPublica’s The Military is Leaving the Missing Behind (see left side of article at full width/on a large screen). We contacted Matthew Bloch and Haeyoun Park at the Times to ask about the making of the interactive and the design choices they made along the way.
From Streetview to Mosaic
Bloch talked me through the evolution of the feature’s design, and the team’s concerns about scale and individuation:
Our first attempt at visualizing this dataset was to map it. The map was informative, but Haeyoun and I felt that it didn’t effectively convey the scale of Detroit’s foreclosure problem. Also, mapping the properties had the effect of stripping away everything that made each location unique. We can’t tell the story of every one of them, but displaying them as a mosaic goes some way towards conveying their variety and individuality.
Once Bloch and Park decided to create a mosaic and mine Streetview for photos, they then had to create an internal tool for vetting and reframing all the images:
At first, the sheer number of properties on the foreclosure list made us question whether it would be possible to obtain images of each one. Google Streetview’s public API provides images from almost every street in the city, but the images from Streetview couldn’t be used as-is. Many were obscured by trees or cars, and quite a few were off-center or pointed at the house next to the one we wanted. It wasn’t possible to get well-framed images of the correct locations using an automatic process.
Our solution was to build an interactive tool for vetting Streetview images and cropping them. The tool displays a satellite map of each property side-by-side with imagery from Streetview. This allowed us to identify the correct properties in the Streetview panoramas. We could also adjust camera’s point of view if the original image from Streetivew was misaligned. In most cases, we were able to capture an image in a few seconds. It took longer if the Streetview image was poorly aligned or if we needed to hunt for an unobstructed view of a property.
The blue dot shows the coordinate used to query the Streetview API. You can drag it around to get different views of a property.
I also asked how they got them images to load so quickly, and the answer turns out to be simple:
You asked about optimizing the images for the browser. I use ImageMagick to tile the images into mosaics of 30 rows by a variable number of columns. The graphic determines which tiles to load based on the width of the browser window. There are also double-res tiles for devices with retina screens. These use a higher level of JPEG compression than the standard-res tiles.
Our thanks to Bloch for responding to our questions on a Friday afternoon in June.
People
Credits
-
Erin Kissane
Editor, Source, 2012-2018.
Call for Submissions