These tools were developed by Knight Lab, a team of technologists and journalists from Northwestern University working at advancing news media innovation through exploration and experimentation. Their program develops interdisciplinary, open-source tools for digital storytelling in journalism. Learn more on their homepage.
"Digital storytelling at its most basic core is the practice of using computer-based tools to tell stories. There are a wealth of other terms used to describe this practice, such as digital documentaries, computer-based narratives, digital essays, electronic memoirs, interactive storytelling, etc.; but in general, they all revolve around the idea of combining the art of telling stories with a variety of multimedia, including graphics, audio, video, and Web publishing." - Bernard Robin, PhD
StoryMapJS
StoryMapJS is a free tool to help you tell stories on the web that highlight the locations of a series of events. [description taken from Knight Lab website]
Directions
1. On https://storymap.knightlab.com/, login using your Google account.
2. For each slide of your StoryMap, upload or link to an image, add a caption, and enter a location.
3. When you are done creating slides, click Share. The site will provide you with a share link, and an iframe embed code. Copy the code and paste it on your web page.
Additional directions, FAQs, and help are available on the Knight Lab website.
Example
TimelineJS
TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet. [description taken from Knight Lab website]
Directions
1. Fill in the Google Sheets template at http://timeline.knightlab.com/, including the date, text, and url for the media you wish to include.
2. Publish your spreadsheet. In the File menu, select "Publish to the Web," then copy the URL for the spreadsheet from the browser toolbar.
3. Paste the URL into the "Generate your timeline" box at http://timeline.knightlab.com/, then click Load. Edit the settings if necessary.
4. The site will provide you with a share link, and an iframe embed code. Copy the code and paste it on your web page.
Additional directions, FAQs, and help are available on the Knight Lab website.
Example
JuxtaposeJS
Juxtapose helps storytellers compare two pieces of similar media, including photos, and GIFs. It’s ideal for highlighting then/now stories that explain slow changes over time (growth of a city skyline, regrowth of a forest, etc.) or before/after stories that show the impact of single dramatic events (natural disasters, protests, wars, etc.). [description from the Knight Lab website]
Directions
1. Select two images. The images must be uploaded to the internet (have their own URLs), or saved in Dropbox.
2. On https://juxtapose.knightlab.com/, enter the URLs to your images, as well as optional labels and image credits, and click Publish.
3. The site will provide you with a share link, and an iframe embed code. Copy the code and paste it on your web page.
Additional directions, FAQs, and help are available on the Knight Lab website.
Example
SceneVR
SceneVR is an engaging way to tell stories from an entirely new perspective. It turns your collection of panoramic and VR-ready photos into a slideshow of navigable scenes, allowing you to create unique 360° narratives. [description taken from Knight Lab website]
Directions
1. Fill in the Google Sheets template at https://scene.knightlab.com/ including the date, descriptive text, and URLs for your 360° or panoramic media.
2. Publish your spreadsheet. In the File menu, select "Publish to the Web," then copy the URL for the spreadsheet from the browser toolbar.
3. Paste the URL into the "Generate your timeline" box at https://scene.knightlab.com/, then click Load. Edit the settings if necessary.
4. The site will provide you with a share link, and an iframe embed code. Copy the code and paste it on your web page.
Additional directions, FAQs, and help are available on the Knight Lab website.
StorylineJS
StorylineJS is an open-source tool that enables anyone to build an annotated, interactive line chart depicting data changes over time. [Description from the Knight Lab website]
Directions
1. Create a spreadsheet with the data for your chart using Google Sheets. Create four columns: date, data, caption title, and caption text.
2. Publish your spreadsheet. In the File menu, select "Publish to the Web," then copy the URL for the spreadsheet from the browser toolbar.
3. Paste the URL into the "Configure your Storyline" box at http://storyline.knightlab.com/, then click Load. Edit the settings if necessary.
4. The site will provide you with a share link, and an iframe embed code. Copy the code and paste it on your web page.
Additional directions, FAQs, and help are available on the Knight Lab website.
Daniel A. Reed Library • The State University of New York at Fredonia • 280 Central Ave., Fredonia, NY 14063 • 716-673-3184 • reedref@fredonia.edu
FB: @ReedLibraryInsta: @SUNYFredLibrary X: @SUNYFredLibrary
Accessibility Statement: Reed Library is dedicated to making information accessible for everyone. If you notice an accessibility issue within this guide, please contact Katelynn Telford
Except where otherwise noted, this guide is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.