TimelineJS is an easy-to-use timeline visualization tool that uses Google Spreadsheets. (See examples.)

How it Works

Timelines created in TimelineJS are data visualization. The data is input in the spreadsheet and the TimelineJS platform translates that data into a visual representation.

Getting Started

The tool's site provides instructions. Simply click "Make a Timeline."

From there you will be walked through four major steps:

1. Making a copy of a Google spreadsheet. (You can use your BC or personal Google account.)

2. Publishing the spreadsheet, which is necessary for it to be visualized

3. Cutting and pasting the spreadsheet link to visualize the timeline

Using the Spreadsheet

The spreadsheet contains a template that will guide you through the information entry process. Do not make edits to the spreadsheet's headers as they are formatted specifically for the TimelineJS platform.

The headers represent the kind of information that should go in each column. The spaces where you put the information are fields. Two of these fields, Year and Headline, have to have an entry in order for the timeline to work. The rest are optional.

Field explinations:

• Year, Month, Day, Time (Year is required) - Sets the date/time to varying degrees of granularity

• End Year, End Month, End Day, End Time (optional) - Sets end date/time to varying degrees of granularity

• Display Date (optional) - How you want the date to appear on the timeline

Text fields:

• Headline (required) - The title or name of the event

• Text (optional) - The or narrative information

Media fields:

• Media (optional) - Media URL (web address)

• Media Credit (optional) - Text that gives credit to media creator and/or distributor; here you can create a link that takes users back to where the media originated (see "Creating Links in Fields" below)

• Media Caption (optional) - Text that describes the media

Additional fields:

• Type (optional) - Indicates which slide is the title slide.

• Group (optional) - A way to show slides are related

• Background (optional) - Change the background to a color (use ) or an image (use an image URL)

The spreadsheet is where the majority of the digital aspects of the labor occur, be it intellectual or technical, as it takes time to fill in and to do so with accuracy. The other labor-intensive aspects are selecting the events that will be addressed, the research component, writing the text, and finding or creating the media.

Visualizing the Timeline

It's a good idea to go ahead and visualize the timeline while working on it so you can keep an eye on how it is looking and to make sure there aren't any errors. To visualize the timeline you follow step 3 "Generate your timeline" and 4 "Share your timeline" Keep a copy of the timeline URL generated during this process as this is how you will access and share the timeline. This is also how you get the embed code for embedding the timeline in things like websites.

Errors

When the timeline does not work after having attempted to visualize it, it is most likely an error in the spreadsheet. Common errors include a row that sits between filled in rows is left blank or a year or headline is not included for at least one of the entries. After fixing these errors by deleting the blank row or adding the missing year(s) or headline(s), try visualizing it again.

Adding Media

Media must be hosted online as it cannot be uploaded to TimelineJS. Adding media requires that you use the specific media URL that links directly to the image or video.

To get a video found on YouTube or a similar platform, select “Share,” which is right below the video, copy the URL, and paste it in the Media field.

How to get an image URL:

• On a Mac hold down the control key and click on the image then select: “Copy Image Address” or “Copy Image URL" depending on which browser you are using.

• On a PC right-click on the image then select: “Copy Image Address” or “Copy Image URL" depending on which browser you are using.

It will look something like the following:

It's easy to make mistakes with images and get the page URL or a thumbnail version instead. If you get the page URL an error will appear where the image should be in the timeline. If the image appears too small, you have clicked on a smaller version of the image and copied the URL. In this case, go back and make sure you click on the larger version to get the address.

Creating Links in Fields

You can create hyperlinked text in the Headline, Text, and Media Caption fields using the basic HTML tags:

<a href="Source URL">Hyperlinked text</a>

For example, if you want to add a media caption like, Mary Wollstonecraft by John Heath, c. 1797 (Wikicommons), and you want to have Wikicommons be a hyperlink to where the image can be found on the site you would write:

Mary Wollstonecraft by John Heath, circa 1797 <a href="https://commons.wikimedia.org/wiki/File:Mary_Wollstonecraft_by_John_Opie_(c._1797).jpg">(Wikicommons)</a>

In the timeline caption location, the above will appear as:

Mary Wollstonecraft by John Heath, c. 1797 ()

Creating an Account

If you do not already have an ArcGIS account, you will need to create one to get started. If you cannot get an institutional account, you can create a free public one. Note that free accounts have limited functionality and do not allow for embedding, incorporating audio clips, and creating image galleries.

To create your free account, click on "Sign In" in the upper right corner of the StoryMaps site, which will take you to the Esri sign-in page. Then click "Create a public account" and complete the account creation process.

Starting a New StoryMap

Once you have signed into your account, click "New Story" in the top left corner to create your StoryMap.

From the "New story" dropdown, you can select "Start of scratch," so that your project has does not preexisting block styles in place, or you can choose to start with a "Sidecar," "Guided map tour," or "Explore map tour" content block types.

Title Your Story

In the space where it says "Untitled," you can give your story a name. Feel free to add a subtitle as well. (You change them anytime, so feel free to use temporary ones.)

Saving

StoryMaps automatically saves, so there is no need to save after launching your new story or after making any changes.

StoryMap JS allows presenters to tell a story or present an idea through interactive maps and images.‌ Tutorial created by Emma Grimm, BC Class of 2022.

Creating an Account

1. Go tothe .

2. Click on Make a StoryMap

3. Before you can make a StoryMap, you will be directed to sign into your Google account. By doing this, all of your information will be saved and you can easily edit any of your projects.

Making Your First StoryMap

Once you have created your account, you will be able to make your first StoryMap or choose from one of your existing projects to edit. If you would like to start a new project, click the button in the bottom right-hand corner.

As you can see, I have two projects already started. Since I am starting a new project, I will press "new" in the corner.

Then, you will have to title your project before you can continue. In my example, I will title my project "Boston," as I will be creating an interactive map that displays different locations in Boston, Massachusetts.

Once you have named your new project, you will be ready to customize your map. Press "create" to start. Below, you can find more information about how to navigate StoryMap and customize your project.

Navigating StoryMap

Once you create a new story map, the standard display seen below will appear. It is from here that you will begin to create your story.

Select Options to Choose and Customize Your Map

By clicking on Options in the top left corner, you can choose the map you would like to use for your presentation. As shown above, you can customize your map by selecting the

• StoryMap size

• Language

• Fonts

• Map Type

In my example, I will choose the "Stamen Maps: Watercolor" as the map for my project. The font that I chose for my project was "Clicker & Garamond". I will also define my call to action as "Start Your Tour". All of the other settings I left as the default.

In the Media box, Design Your Cover Page

For your cover page, you can choose to either upload an image from your computer or insert a URL address from online. Then, you can insert credit for your image and a caption.

In my example, I chose to upload a picture of the skyline of Boston that I had saved to my computer in "Downloads". Then, I gave credit to my source by providing the URL in the designated box. My changes are shown below.

Title Your Project Using the Headline Box

The headline for the first slide will serve as the title for your project. For each subsequent slide, the headline will act as the subtitle for each section of your presentation. You can provide a brief description in the box below the title box to describe your slide and the point on the map that you are describing.

In my example, I chose my headline to be "Tour of Boston". I also provided a brief caption to describe my presentation, which says "Through this presentation, I will show you some of my favorite places in Boston, Massachusetts!". You can view my changes below.

Underneath the Headline Box, Choose the Background for Your Project

You can customize the color and image that will be displayed in the background of each slide.

In my example, I chose an image of the skyline of Boston as my background image. I chose not to change my background color, though it is an option.

Now that you have finished your Cover Slide, press "Preview" at the top of the screen to view your work and make edits as you see fit.

Notice in my presentation, some of the map that we selected under "Options" is displayed on the left side. Then, on the right side, my background image of the Boston skyline is shown in the back. The street view of Boston is then shown on top as the media image. The title of my presentation is also presented with my caption, as well as my "Call to Action".

Adding New Slides to Your Presentation

On the left hand side of the screen, you can add new slides to your presentation. Just like a PowerPoint or Google Slides presentation, each slide shows the new place on the map that you would like to focus on.

Once you establish what map you will be choosing, on each slide you can decide where you want the map to focus on by typing in a location or coordinate from that map, or by placing the marker over the area you want to focus on.

In my example below, I searched for "Boston" on the map and it gave me locations throughout the world. You can also choose more specific locations or terms, such as "Boston College".

For each slide, you can customize the background and media, just like with your Cover Slide. Additionally, you can choose to customize the Marker.

Customize the Marker for Your Map

On each slide, you can choose an image URL or upload a file from your computer to act as the marker for the areas you have designated on the map. The default marker is a red tag.

On the cover slide, it will show which areas of your map have been selected by displaying your marker, such as the one in the image below.

In my project, I chose to customize my marker to the location I was describing in the slide. As you can see below, I chose to talk about Faneuil Hall Marketplace as my first destination in Boston and I chose the marker that displayed the market.

Once you have selected multiple places on the map, the locations will appear connected by a red dotted line. This way, you can display how your story will travel through the different locations. See how my locations connect down below.

Changing Your View

You can switch between the editing view or preview by clicking on the tabs at the top of the screen. By doing this, you can see the progress that you have made on your StoryMap, and view your project from the reader’s perspective.

The preview of my presentation displays each slide. The viewer of your presentation can click the arrow on each slide to move through your presentation.

Save and Share

When you have finished your project, make sure to save and share! When you click on share in the upper right hand corner, it will provide a link which you can copy and send through email, text, or other platforms of social media. You can also provide a description and featured image that will be viewed first when clicking on the link.

Questions? Contact the Digital Scholarship Team in O'Neill library (digitalscholarship@bc.edu)!

While every digital tool on this site can be used for "digital storytelling," the following are tools that have been specifically designed with storytelling in mind. Also, see the Multimedia Production Guide for information on video and podcast creation.

The David Rumsey Historical Map Collection has a broad collection of historical maps that you might use as the base map for your ArcGIS StoryMap. These steps will walk you through the process.

1) Go to https://www.davidrumsey.com and log in with your free account.

2) Locate the map in the database that you'd like to import to ArcGIS; the maps can be filtered by location and date. Note that for the map to be imported directly into ArcGIS Online, it must already be georeferenced within David Rumsey (indicated by the orange "View in Georeferencer" button).

3) Click the orange "View in Georeferencer" button and the map will open up as an overlay. From here, click the orange "What Next" button in the bottom-right corner of the screen followed by "Go to this Map page" button.

4) A page containing map metadata and other information about the map will appear. In the section on the left called "Use in GIS apps," click on "Get links" and then copy the URL under "XYZ link".

5) Return to and sign in with your free account. Once signed in, click the "Map" button in the top menu bar to open a blank map.

6) To add your map from David Rumsey, click the "Add" button followed by "Add Layer from Web".

7) This will open the add layer from web dialog box. When it asks what type of data you are adding in a drop-down box, choose "A Tile Layer". This will expand the box and create a place for you to paste the XYZ URL from David Rumsey. Do so, and add the proper title and credits for your map.

8) Click "Add Layer" and the layer should be added to your map (you may have to move to the location to see it depending on the size of your map. Save by pressing the Save button in the top menu bar. Finally, make your map public by clicking the "Share" button and choosing "Everyone (public)".

9) Now it's time to add it to an empty StoryMap! Go to (it may or may not ask you to log in with the same information as ArcGIS Online). Create a new blank StoryMap by selecting "New Story" --> "Guided Map Tour"

10) In your new blank tour, click the "Map Options" button in the top right corner of your empty map, then "Select Basemap" in the left-hand pane that opens up, followed by "Browse More Maps". This will open up a window showing all your self-created maps, including the one you just created

Now you can start adding points to your map tour on you historical map!

StoryMaps provides a number of content block styles to choose from. Please note that public ArcGIS accounts do not have the embed, audio, and image gallery available.

• View this StoryMap for a demonstration of the different kinds of content blocks.

Adding a New Content Block

To add a new content block, click in the area just above or below an existing content block. (The plus sign is automatically there when first launching a new story.) It will look like the following:

You will see the various content block and element options:

Content Block Types

Below are descriptions of the different content blocks with links to instructions created by ArcGIS. They are organized as "Basic," "Media," and "Immersive," which is how they are organized in Story Maps.

Basic

• Text - a text block for general textual content, headers, bullet point, lists, quotes, etc.

• Button - adds a button that can be linked to outside sources.

• Separator - adds a line to break up content on the page, used to make content more readable and navigable

ArcGIS instructions:

• See

Media

• Map - create "express maps" in Story Maps or bring in ArcGIS map

• Image - upload or link to images

• Image gallery* - create an image gallery in the form of a grid of images

*Not available with the free version.

ArcGIS instructions:

• See ArcGIS's sections: "Building a Narrative," "Add an Embed," and "Make a Map"

• Also, see: , , and

Immersive

• Slideshow - create a more traditional slideshow

• Sidecar - create a moving side panel for text and media independent of the main panel, also allows for text blocks to overlay and move across media

• Map tour - create an interactive map that combines images, text with a map

Note that the Slideshow option has been incorporated into the Sidecar layouts.

ArcGIS instructions:

• See ArcGIS's sections: "Add Immersives"

• Also see, , ,

ArcGIS StoryMaps allows you to use a variety of maps, text, and multimedia elements to present interactive narratives. Since ArcGIS has a number of helpful StoryMap tutorials and instructions available, the information here is relatively brief and often links out to those resources.

Planning Your StoryMap

Creating a good storymap requires good planning. You may find it helpful to sketch out your ideas on paper (in the form of a diagram, an outline, or a rough illustration) prior to working in the actual technology.

Creating Your Content Blocks

StoryMaps uses "content blocks," which include objects ranging from text blocks to interactive maps to images. See content for examples of content blocks.

Add Alternative Text (Alt Text)

When adding media of any kind, you are given the opportunity to add alternative text for the visually impaired. You want to do this unless the image is purely decorative and does not add to the content/narrative. ()

To add alt text, hover over the media and then click on "Options" (the gear icon). Depending on the content block type, you will see either a field that says, "Alternative text" or you will see a choice to click on "Display" or "Properties." Click on "Properties" and you will then see an "Alternative text" field.

Design Decisions

StoryMaps lets you adjust the look/design within a limited range.

Publishing and Sharing

You can keep your story private or publish it for your audience. You have to republish your work for any changes made to be visible to visitors. Before publishing or sharing your story you can . The publishing and sharing options (among others) can be found in the menu at the top of the page:

The URL (web address) that you get when you "View published story" is your project's front-facing URL and is the link you share out.