This tutorial was written by Sarah DeLorme, Associate Digital Scholarship Librarian.

The John LaFarge stained glass digital guide is a great way for users to explore the varied works of LaFarge in one accessible site. The two interactive timelines featured there help to visualize the chronology of LaFarge’s life and his work. These timelines are generated using an open-source tool called TimelineJS by Knight Lab at Northwestern University. TimelineJS can work with a Google spreadsheet to automatically create and populate a customizable timeline. This is a great option for many people, however the Digital Scholarship group was interested in hosting the timeline data locally—not pulled in via Google. In order to migrate the data, we recreated the timeline using JSON.

JSON is a format for structuring data that uses JavaScript object notation. It is used for exchanging data between a browser and server. JSON text is simple to read and work with,  and is easily parsed by machines. The TimelineJS JSON format starts with a single JSON object (the timeline), and then populates it with shorter lists of objects (properties), which become the items on the timeline. The properties are events, title, era, and scale. The properties that are used will depend on the content of the timeline, and the nature of the data. The only property that is required to create a timeline is events.

Below is an example of a timeline JSON object with the title property displayed.

Each property contains its own list of properties, like a nesting doll. For both title and events properties, the items in that list are known as “Slide objects”. Slide objects include: start_date, end_date, text, and media properties. (start_date is the only slide object required to generate an event).

Each slide object then has its own list of properties for you to define, which will be where the data will be inserted. For example, the start_date slide object will have a list of “date” objects like year, month, and day. The values for these properties (the data) is entered in quotation marks, as seen in the example below.

Each property in the event object is used to customize the slides of your timeline. Aside from the start date and headline, the media property enables the embedding of images, videos, music, and more. Each event on the timeline is separated in its own set of curly brackets ({ }) within the “events” property, and separated by a comma.

Two JSON files were created for the John LaFarge stained glass digital guide, because there are two timelines featured on the site; one of LaFarge’s life, and another for the chronology of his stained glass work. The second step in this process of hosting our timeline data locally was to integrate these timelines into our website, which is hosted on Omeka. This was done by adding a few lines of JavaScript to our web page, with the help of Jesse Martinez, the Library Applications Developer.

The LaFarge site was created in the exhibit-builder module of Omeka, so the JavaScript was added to the show.php file in our theme directory, the path being: exhibit-builder/exhibits/show.php. There were three items that needed to be added to pull in our timeline: a link tag (to load the CSS), a script tag (to load the JavaScript), and an additional script tag to generate the timeline.

You will notice that since there are two separate timelines on this site, a function was added to the final script tag to identify each separate JSON file. The function decides which timeline data to pull in depending on which timeline has been identified: timeline1-embed or timeline2-embed.

Once the JavaScript was added to our file, the last step was to call the JavaScript on the pages where we wanted the timelines to appear. To do this, we navigated to the exhibit page in Omeka. We added a text box item, and then inserted this div using the HTML editor:

<div id=“timeline1-embed” style=“width: 100%; height: 600px;”>&nbsp;</div>

This told the page what to pull in, and how to style it. The div for the second page looked similar, but called in the second timeline using a different identifier:

<div id=“timeline2-embed” style=“width: 100%; height: 600px;”>&nbsp;</div>

The end result is a locally hosted, fully functional timeline.

If you are interested in further TimelineJS JSON  documentation, or would like to learn how to further customize your timeline, please consult the Knight Lab’s official guide.