TimelineJS
TimelineJS from the Northwestern University Knight Lab is a highly capable tool that can merge media from multiple platforms into a chronological story. Use this tool with projects that have a strong chronological narrative (but not necessarily a place), like an individual’s life story or the story of a trend in intellectual or cultural history that your project explores and documents. TimelineJS lets you create a good looking and easy to use visual timeline with text and pictures along the way.
What is TimelineJS for?
TimelineJS is a really simple, easy, and clean way to display events over time. TimelineJS can be used to show the life events of one person, of a team or group of people, of a fashion trend, or really anything that can be tracked over time. TimelineJS can be used for school projects, general presentations, or, of course, oral history projects. The only thing that I would not recommend TimelineJS for is someone looking to track time as well as distance. If you’re looking to track time as well as distance, we would recommend using StoryMap, another Knight Lab program. Check out our overview of that here.
Intro
To use TimelineJS, the only prior knowledge you need is how to use a spreadsheet program and Flickr. Whether that spreadsheet program is Microsoft Excel or Google Sheets, if you can enter data into a box in a spreadsheet you can use TimelineJS. To make a Timeline, go to http://timeline.knightlab.com/ and click on “Make a Timeline” in the dead middle of the page. It will take you to Step 1, which is to access the Google Sheets Template, which should look like this. You can find it on the Timeline JS website or just click here.
After you access the template, you’ll see a variety of fields that you can fill in.
Template
The template for TimelineJS is fairly self-explanatory, but let’s walk through it.
The first few columns have the year, month, day and time of the specific event. Any of these can be left empty and they will still work. In our example at the end of the page, the “time” field is left blank on all slides. The next few columns are the end year, month, day and time of the event. You can either enter the same day as the start date or have the event span over days or weeks or even years. The next column is the “Display Date” which is essentially what the timeline says the date is. So, if you had the event go from April 10th – April 19th, you would put “April 10th – April 19th” into your “Display Date”.
The next two columns are the Headline and Text of the physical slide. Keep this brief, as there isn’t a whole lot of space to put the text in. The last 4 boxes are for your media. The first box is where you will paste your Flickr link, SoundCloud link, YouTube link or any other media link you wish. Once again, make sure the link is publicly shareable. The second is where you will put any media credit (this really only applies if the media is not your own) and the third is a caption for your media. The fourth box isn’t for a thumbnail picture, if you’re using SoundCloud media file you could upload an image as a thumbnail in this box. The last few columns are all optional but could be useful to you. The “Type” column lets you select which slide will be the title slide, so it doesn’t have to be the first slide if you’d prefer it not to be. You can also use this box to select “Era” slides, which will only show a headline and text and no media. The next column, labeled, “Group” allows you to group slides that are similar to each other, and the last column “Background” lets you change the background color of your slide. Once you get all those boxes filled in, you’re done!
Almost.
Sharing
For TimelineJS to access this spreadsheet, you need to make it shareable, which is Step 2 of the process. This involves clicking “Share” in the upper right-hand corner of the spreadsheet, just like if you were attempting to share a Google Doc or Slide with a classmate or colleague. Instead of entering an email to share it with, though, you’ll just copy the link provided.
Put that link in Step 3 on the TimelineJS website, and now we’re almost done. If you click the
“Optional Settings” box below Step 3, you can change fonts, the starting slide, and many other features that some might find useful.
Embedding
Step 4 involves copying and pasting the embed code for your Timeline as well as previewing it below Step 4.
That’s it! That’s how you use TimelineJS, a Knight Lab program from Northwestern University. Click over to the Timeline page for a great video tutorial, and view our TimelineJS project below about my trip to London and Paris!
