Six tools from the Northwestern University Knight Lab make it easy to enhance anything you’re publishing on the Web. They’re free, open source and easy to use, livening up a journalism project or any site. Here’s how the tools can be most useful.
Soundcite
Integrate sound right inside your text. It’s like adding a play button on top of certain words you’re publishing online. When people click the play button on those words, they’ll hear audio you’ve uploaded. It won’t open another window, nor will readers see an embedded audio file.
You can add music, interview clips, or anything else. Check out these examples, and see how John Jeremiah Sullivan incorporated blues and banjo riffs into his New York Times piece, The Ballad of Geeshie and Elvie. It works with Wordpress or most other sites. Simple instructions to bring text to life with sounds.
Juxtapose
Show before-and-after images to illustrate how something has changed. All you have to do is upload two images. Viewers can then drag a scrubber to examine differences between the two visuals. You can use it to:
Demonstrate damage done by a natural disaster or climate change
Highlight visual differences between two different coronavirus variants
Show portraits of someone then and now
Alternative option: Flourish, a free data viz tool, also offers a nice photo slider tool.
SceneVR
Turn the panoramic photos you’ve taken on your phone into an interactive series of immersive scenes people can explore in their browser. Just export pano or 360 photos and arrange them in the order of whatever narrative you’d like.
Storyline
Annotate a line chart to explain how and why numbers have changed over time. You can use this to explain fluctuations in Covid numbers, shifting wage or job numbers, or fashion trends over time. As with TimelineJS, Storyline requires you to have data in a Google Sheet. If you use Excel or any other spreadsheet tool, it’s easy to import that into Google Sheets. It works in any language and you can include up to 800 data points. Once you prepare your Storyline graphic, you can share a link to it or embed it into any site.
TimelineJS
Create a professional-looking timeline. I recently wrote about how and why to use TimelineJS and several other tools for making timelines. Here are five steps to begin using TimelineJS.
Storymap
Storymap lets you tell a story by highlighting locations of major events. Here’s an example illustrating key locations in the Game of Thrones books. And another about the most expensive historical soccer player transfers.
Unlike TimelineJS and Storyline, which work with Google Sheets, Storymap lets you build a story slide by slide, using a dedicated Knight Lab site. Just pick a spot on a map, add some text, and point to any multimedia (like a YouTube video) that you want to add.
Think of it as building a location-focused slideshow. StoryMap JS can pull in media from Twitter, YouTube, Google Maps, Wikipedia, SoundCloud, and beyond.
Caveats
The Knight Lab doesn’t appear to actively update all of the tools consistently. Several of the example links on its project pages are broken, including two on the Storymap page.
Technology developments may impact Knight Lab’s tools. Google, for example, has recently changed how its spreadsheets work. The Knight Lab did update its TimelineJS and Storyline tools to ensure that they still work.
Sponsored Message
Do you have 15+ browser tabs open right now?
Give your memory a boost with Heyday, so that accidentally closing them doesn’t feel like the end of the world.
The Heyday browser extension is like cheat codes for your memory.
It automatically saves content you view and resurfaces it alongside your Google search results. Give your memory a boost today.
Related resources
Census Reporter makes it easy to use data from the American Community Survey. Explore census data by picking a place or a topic, like poverty. You can then visualize and download the data. The Knight Lab’s 2020 Census Data for Your Neighborhood project is an update to get you the data you need for the specific place you’re focused on.
Northwestern’s Knight Lab Studio is an interdisciplinary collaboration space where faculty, staff and students create projects at the intersection of storytelling, media and tech. Intriguing upcoming projects include one led by Zach Wise exploring non-fungible tokens (NFTs) for journalism.
Google’s Journalist Studio is a toolkit that pairs well with the one hosted by the Knight Lab. I recently wrote about Journalist Studio’s free reporting and data visualization resources.
Northeastern University’s Storybench covers how journalists are using data visualization and investigative journalism tools to do their work. The “under the hood” approach offers a helpful window into how people are creatively putting journalism tools into practice.
You’re invited! Join me TODAY, Thursday, Dec 9 at 2pm ET for a live Twitter Spaces chat about the most useful teaching tools of 2021. To join, just visit @jeremycaplan on Twitter. If you’ve never tried Twitter Spaces, you’ll see that it’s live audio, like a radio show. 📻 I’ll be doing these weekly on Thursdays at 2pm ET.
Try Knight Lab’s Cool Tools ⚗️
Jeremy,
Thanks for the great post on Knight Lab tool kit. I'm a big fan and have used KL tools on my site and in teaching future teachers at University of Portland's School of Education. Here's a few our posts featuring KL tools.
Here's an overview of a WordPress site (featuring Knight Lab tools) we designed for Oregon Holocaust Memorial here in Portland: http://peterpappas.com/2018/01/pbl-with-digital-storytelling-tools.html
We used @KnightLab’s #SoundCite to add inline audio to transcripts of Holocaust survivors talking about the last time they saw family lost to the Nazis. Each story linked to Memorial inscription of lost family members. http://peterpappas.com/2018/01/audio-storytelling-with-soundcite.html
Students used KnightLab's #StoryMapJS. The journey of a Holocaust survivor is moving http://peterpappas.com/2018/01/storytelling-with-maps-storymapjs-arcgis.html
Here's tips on how to use #JuxtaposeJS http://peterpappas.com/2016/09/tell-then-now-image-stories-comparative-photo-sliders-juxtaposejs.html
Here's a demo I did that merges JuxtaposeJS sliders into StoryMapJS map https://peterpappas.com/2017/07/tour-japantown-pdx-with-storymapjs-and-juxtaposejs.html
We used #TimelineJS to support lessons plans to contextualize events surrounding the Holocaust. http://peterpappas.com/2018/01/digital-storytelling-with-timelinejs.html
This is absolutely fantastic!! I'm a fan of interactive storytelling and these tools are all "lit!" Thank you Jeremy!