The University of Oklahoma Institute for Quality Communities has been getting a good deal of Twitter ink for its digital presentation of before-and-after aerial images of urban renewal in the US. The ‘swipe’ feature of these juxtaposed images was something that I had not seen. This project benefits from high-resolution images that can be perfectly aligned. Once you find images of the exact scale and frame, then the project was off to the races.

These images—with sets for the Midwest, Southeast, Northeast, and Oklahoma and Texas—can give hours of fascination to anyone interested in the magnitude of urban renewal and disinvestment in postwar cities. As you might expect, cities like Detroit and St Louis make for jaw-dropping images of huge tracts of land literally wiped off the map between 1950 and today. We also come closer to appreciating the radical impact of highway construction, as entire dense residential sections are plowed under by concrete ribbons and behemoth interchanges.

This GIF from the OU “60 Years or Urban Change” project shows parts of Cleveland getting wiped out.

So the project is great. But I was mildly perturbed by the lack of description about how the OU team built the site.1 In other words: I have some before-and-after maps and aerials, and I want to do something like this. Through a coincidence, a fellow doctoral candidate here at Loyola, Katie Macica, mentioned in a recent info session on GIS a suite of tools created by the Knight Lab at Northwestern University (Katie used Knight’s StoryMap tool to build the awesome exhibit about Father Ignacio Ellecuria, a Jesuit priest who received an honorary doctorate from Loyola University three years before being murdered in San Salvador in 1989 by those threatened by his mission for social justice). The Knight Lab is a collaboration between the Medill School of Journalism and the McCormick School of Engineering and Applied Science. In other words, the digital tools are developed with journalists and those interested in contemporary events in mind. But, as Katie demonstrated, the foregrounding of narrative and timeline is something that historians are obviously in to, as well.

It looks like OU may have built its juxtaposed ‘swipes’ in java from the ground up. But if that is beyond your capacity, like it is for me, then you can use the Knight Lab Juxtapose tool. Keep these points in mind, as you proceed:

  • You’ll need images of nearly identical frame, angle, and scale—and resolution, if you want it to look nice.
  • The images will need to be hosted on a server. Flickr works for this.
  • You can embed your finished slider on a webpage (like here, in WordPress).
  • Your existing style sheet may limit the default settings for the juxtapose-swipe. For example, I had to opt for the vertical swipe, as opposed to the horizontal, in order for the frame to fit into the middle column of my blog.
  • I assume you can paste the code into a text editor, and play with the end product.
  • I think there are ways to embed the frame into PowerPoint (hope so!), but I haven’t taken the time to explore.

I created the slider below to illustrate what could have happened to Chicago’s Uptown neighborhood if a massive 1962 urban renewal plan had been realized. These maps are from the same planning firm, with the same scale. I took these digital images a couple of years ago for my own reference, using a standard point-and-shoot camera without a stand. So the angle is not precise, and I had to crop and rotate the images in The alignment is far from perfect (the juxtaposition veers as it proceeds north, because one of the maps was not flat on the table, and my camera angle was a little skewed). Low-resolution limits the value of zooming-in.

If I wanted to really develop this, then I would re-take high-res images with a camera stand. But, this works for me as is, for now. I’m giving a presentation at the Chicago Public Library about this plan, and the Juxtapose tool has made a pretty cool visual to share.

Leave a Reply

Your email address will not be published. Required fields are marked *