A timeline is a great way to display of a series of events and related information and tell a story around those events. Verite’s TimelineJS is a simple and useful tool for creating an attractive and easy to use timeline visualization. For my project, I created a timeline of events surrounding the history of farm and community gardens in New York City.
Materials
I started with a list of events created in Google Docs. This dataset includes the date of the event, a headline-style title, description and the URL for an image to illustrate the event, as well as a caption. Where there is a website with additional information about one of the gardens includes, I linked either a portion of the description or the image itself to the site. Most of the information comes from high quality sources such as the websites of the featured gardens, the New York City Department of Parks & Recreation and newspaper articles from the Chronicling America database. The New York Botanical Garden Mertz Digital Library was particularly useful, as were historical maps from the New York Public Library Map Division. I used to Verite TimelineJS to process and create the narrative visualization. Dataset: https://docs.google.com/spreadsheet/pub?key=0Ai4jVfIRGeOldExvazRNenliZDNVTDZuNFJ3eHRvZ1E&output=html
Method
I used Verite TimelineJS to demonstrate a narrative visualization of a series of events. Since I had been working on a research project of New York City community gardens during the summer term, I decided to use the timeline software to illustrate the development of both formal and informal gardens in New York City, beginning with the creation of Central Park in the 1850s to modern farm gardens. TimelineJS offers a three-step process for creating a timeline. To use it, visit http://timeline.verite.co/, click on “Make a Timeline” from the top navigation and follow the steps:
- Step One: Create a new SpreadsheetThis step requires a couple of mini steps. First, to use the TimelineJS template, click on the bold “Template” link. This opens the template in a new browser window. Click on the “Use this template” button to create a copy in Google Drive (you may need to log into your Google Account or create a new one if you do not have one.)Click on the title “Copy of TimelineJS Template” to enter a new, descriptive name for your file.Now enter your event data. Notice that some columns are required fields. You can rollover the header cells to see if it is required and in some cases to see examples of the type of data that can be included. The Text and Media Caption fields will accept HTML coding if you want to add formatting or links, but it is not required.
- Step Two: Publish to the WebWhen you have entered your data, click on “File” in the Google Docs menu and then click “Publish to the Web.” In the popup window click “Start Publishing.” It may take a few moments to complete this action, depending on how many events you have entered.When the spreadsheet is published, a link to the completed timeline will appear in the box at the bottom of the popup window. Copy the link so you can use it in the next step.If you mark the checkbox next to “Automatically republish when changes are made” then the timeline will reflect any subsequent changes to the spreadsheet.
- Step Three: Copy/paste URL into the generatorPaste the Google Doc link into the box at Step 3. You can use the More Options dropdown to change the font. Click the Preview button to see what your timeline will look like. You can try different fonts from the More Options until you see one you like best. The Embed Code box will reveal a set of code that you can use to put into the web page where you want the timeline to appear.
Depending on the type of system you are using to host the timeline, additional customization may be necessary. A custom website or hosted WordPress is ideal. The <iframe> code won’t work on a free WordPress account, but a hosted account will allow you to download a plugin to include this content. Also, some additional customization may be desired, in the form of edits to your site’s CSS, if you need to comply to an overall style in the final output.
Results/Discussion
My completed timeline is located on my website at: http://www.whysel.com/garden-timeline.php Serving data via Google Spreadsheets is a good choice for Verite TimelineJS. Storing the data in the cloud allows immediate access and Google’s auto update simplifies the process of creating a timeline. When you publish data on Google Spreadsheet you can decide whether to allow changes to automatically be reflected in the published document, or deselect this option and Republish manually. I really liked this feature, because I didn’t have to worry about manually publishing after every small edit to the spreadsheet. One the other hand, if I want to make a more substantial change, such as adding a new event, I can instruct Google to stop auto-publishing until I have completed the new event record.
What I liked less about TimelineJS was the limited number of options for customizing the timeline. They give you a list of font pairings and the ability to change the height and width of the timeline, but to edit the timeline colors and format further, you need to know how to edit your sites’ CSS file. I wasn’t particularly happy with the font choices, as few of them are familiar, standard fonts, so I needed to preview each set to see what they would look like. I didn’t like many of them, either.
Also, the <iframe> based output means that certain content management systems, like a free WordPress site, can’t display the timeline because they don’t support <iframe>. The site I worked on over the summer is hosted at WordPress.com, so I was not able to include it in that project, which was disappointing.
My New York City gardening story is heavily focused on the period from 1900 to 1920, which was a time period that I focused on during my summer research. TimelineJS makes this visually clear in that there is a thick grouping of events during those decades and a sparse listing of events after 1920. This may appear to suggest that not much was going on in NYC around community gardening and farming after that time. It also makes me curious about what kinds of events I could add to the timeline to fill in the story during those years. For example, when was key legislation written that encouraged the development of vacant properties into community uses? I found relevant laws, but would need to do further research to find out when and why they where established.
Alternatively, I could create a separate timeline discussing the events from the 1978 founding of Operation GreenThumb to the present, telling each individual story in a separate visualization. I could also use a timeline to focus in on the lifespan of a single plant, or broaden the narrative to a history of agrarian society at large. TimelineJS doesn’t tell you what you should put into your timeline and what to leave out. These are choices that the researcher needs to make to tell an interesting story or make a convincing argument. In the end, TimlineJS is one of many tools to create that narrative.
Update
At the time I wrote this report, I was not able to find a way to embed the timeline because WordPress free, hosted site would not display <iframe>. when I created this research post, I discovered that Knight Lab offers a plugin for Wordpress that allows you to embed <iframe> code. There are several plugins for embedding this type of code, but Knight Lab is a good one and it works fine in my site. You just need to be sure your site is hosted on yr own account rather than at WordPress.com. Visit www. for more information about hosting your own WordPress site.