Timeline Exercise


For this exercise, you are going to be creating a short timeline with a tool called TimelineJS. As with the last assignment, this is intended to get you familiar with the tool, not to make you an expert. To use TimelineJS, a Google account is required. If you don’t have one, you will need to sign up for an account.

TimelineJS uses google spreadsheets. To put it simply, the spreadsheet “talks to” TimelineJS and tells it where to put specific data and, once you input the data, what that data should be. In this case, you could say that the spreadsheet is the backend (where all of the tinkering and techie work is done), and TimelineJS is the frontend (the user side where people view and engage with your work).

Turn In your essay as a Word doc and past your timeline URL in the doc as well.

History of the Book Sources

Because this is not a research project, you are welcome to use the following sources and images from these sources. You are also welcome to use other sources:

What is TimelineJS?


Mark five moments in time that describe developments in the history of the book. This assignment is deliberately open-ended, so choose any moments you want to note. For each moment, you must include:

• an image or video with a caption and source credit
• a 4 to 6 sentence paragraph that describes the moment

In the spreadsheet, the fields you must populate include Year, Headline, Text, Media, Media Caption.

Year can be a single year, a year and a month or broken out into month day year.  You can also mark a date range. More often than not, for this project, you will be using a single year.

Headline means title.

Text is where your paragraph will go. You can use some basic HTML in the text box. For example, you can make text bold and italicized. You can also add hyperlinks.

Bold tag: <strong></strong>
Italicize tag: <em></em>
Hyperlink tag: <a href=”URL TO SOURCE”>HYPERLIINKED TEXT</a>

Media can be video, images, and audio clips. For this exercise, only use videos or images. To add media, you must use the URL of the image or video and not the URL of the page/site the media lives on. (Instructions on how to find this URL are below.)

Media Caption is where the caption for the media goes and is where I am having you add the source credit (e.g., where the image is from). TimelineJS has an actual media credit field, but I opted to do it differently to streamline the formatting.

Below is an example timeline. (The dark background in this example is an image that was added using the Background filed, which is not a field required for this exercise. You are certainly welcome to use it, however.):


Here is what the timeline spreadsheet looks like:

(Download spreadsheet)

Here is how the fields in the spreadsheet map to TimelineJS:


There are videos as well as written instructions below that will help you. The “Basics of Working in TimelineJS video” was made to work for more than one assignment and, therefore, non-required spreadsheet fields are mentioned for this exercise. When and if confused, refer to the requirements above. Additionally, due to changes in Google spreadsheets over time, some details in the video look slightly different than today. The differences are negligible enough that I don’t think it will impact your understanding. Please don’t hesitate to let me know if you have any trouble.

I recommend having your spreadsheet open in one browser tab and your timeline in another. To see changes you have made in your spreadsheet, you will need to refresh the timeline by refreshing the browser.

Your work will begin by going to the TimelineJS website.

General Overview of TimelineJS

Basics of working in TimelineJS

Working with Media

Adding Media

Adding media to TimelineJS requires that you use the specific media URL that links directly to the image or video. To find the URL, put your mouse cursor on the image and click, then, on a Mac, hit control, or on a PC, right-click. Select: “Copy Image Address” or “Copy Image URL.” This is the link that needs to be pasted in the Media field.

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

If your image does not appear in the timeline, see “Why Isn’t My Image Appearing?”

Captioning and Crediting Media

In Media Caption, you will put a caption as well as the sources of the image. For example, Mary Wollstonecraft by John Heath, c. 1797 (Wikicommons). The media credit must hyperlink to the original source; this requires using HTML to create the link, which looks like this:


Therefore, Mary Wollstonecraft by John Heath (Wikicommons) in the spreadsheet looks like:

Mary Wollstonecraft by John Heath, circa 1797 <a href=”https://commons.wikimedia.org/wiki/ Mary_Wollstonecraft1797.png”>(Wikicommons)</a>

The media credit should be the source from which your media came. For example, the source might be the New York Public Library or Wikicommons. (In future projects, this requirement will be a little stricter.)

Viewing and Submitting Your Timeline

Reflection Essay

For this exercise, you created a timeline, which is a temporal approach to digitally analyzing and presenting data. For your essay, first, discuss the potential impact of putting information in a timeline. For example, discuss how putting data in a timeline influences the way the data is read and interpreted by those viewing it. (It might be helpful to think back to what we discussed in the last class about how changes in technology can be both improvements and losses. Are we always “advancing?”) Second, discuss your experience working in a spreadsheet, and how the spreadsheet you worked in is “structured data.” (For this second part, you will need to refer to the readings.) Your essay should be at least two paragraphs.