Journalists often bring about change through their reporting, but it can't be seen. With JuxtaposeJS, a new image slider created at Northwestern University's Knight Lab, journalists can actually show change by comparing before and after shots.
JuxtaposeJS, an easy-to-use image comparison tool, requires little from the user. Just choose two photos you want to compare from Flickr, Dropbox or Google Drive, copy the URL into the tool and adjust the slider to see a before and after effect. JuxtaposeJS creates the embed code, so all you have to do is copy and paste it into your site. (For a step-by-step tutorial, you can watch our video here.)
It took sophomore Alex Duner, an undergraduate student fellow at the Knight Lab, just under four months to develop the tool.
“Stories involve talking about change, so why not show it visually over time,” Duner said.
During initial testing, Duner used images of Ukraine’s Independence square – Maidan Nezalezhnosti – before and after the protests. The Vox Kashmir also used the tool to show aerial views of Kashmir prior to the India-Pakistan floods that devastated the region earlier this year. Vox Kashmir used images of the region in August 2014 before the floods and the aftermath in September 2014. (Many of the more recent views show homes, roads and land submersed in muddy water.)
Comparing before and after photos of natural disasters or then and now photos of a building’s construction are all strong uses of JuxtaposeJS, Duner said, but he encourages journalists to be creative.
“Some of the best examples have been when the person has thought outside the box,” he said. “Use GIFs – those are images – to show visual motion.”
Below are some examples of inventive uses of JuxtaposeJS that Duner cited in his interview with IJNet.
Le Temps utilized JuxtaposeJS to show the destruction in Kobani, Syria, during the Islamic State’s rise (pictured above). Kobani is a border town between Turkey and Syria.
Sports Illustrated used the image slider to show how NBA players looked as rookies compared to their current selves. Examples include photos of Steve Nash, Kevin Garnett and Paul Pierce in their early days.
The Boston Globe showed how the half dollar featuring President John F. Kennedy approved by Jackie Kennedy changed over the years. The US Mint recently reissued the original coin.
Here's an example of JuxtaposeJS using IJNet's old site (left) and the newly redesigned site (right). Watch IJNet's video tutorial on how we made it.
Read more about how Alex Duner created JuxtaposeJS on Knight Lab’s blog. Duner also encourages programmers to add to the open-source project on GitHub. Follow him on Twitter: @asduner.
Main image of Le Temps comparison of Kobani, Syria.