Intro to Temporal Pattern Finding with Timeline.JSAshley Sanders, Ph.D.Digital Scholarship LibrarianClaremont Colleges Library

What is Timeline.JS?

Open-source multimedia timeline tool

Why use Timeline.JS?Easy: Based on Google Sheets

Customizable with more programming knowledge

Add content from a variety of sources, including: Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, DocumentCloud and more!

Free & open-source

Generates fully responsive embed code for easy embedding

Available in 40 different languages

Built by Knight Lab at Northwestern University

1.Get Spreadsheet Template

a. Navigate to https://timeline.knightlab.com/

b. Scroll down to “Make a Timeline”

c. Click “Get the Spreadsheet Template”

d. Click “Use this template”

2. Prepare Copy of Template

a. You will see sample data in the template. Go ahead and clear the contents underneath the headings, but DO NOT delete the headings or any columns. (The application will not run if any headings or columns are missing.)

b. You may keep the example in blue if you’d like while you work. Just remember to delete it when you’re ready to view your timeline.

Identify data to add

● Include the most important information○ Main events and

significant events leading up to them

● Find media or use your own work to illustrate the events○ Ensure work is public

domain or available for noncommercial reuse

○ Provide media credits

Add data to your Google Spreadsheet

DatesYou can enter just the year or you can include

more information

You MUST enter a year

You may enter start and end dates for your event using column A-D for the start date and columns E-H as the end date

BCE dates are entered as negative numbers

Column I provides more flexibility and allows you specify the “display date”

Dates: Displaying Eras❖In column (P), you can select “Era” from the

dropdown to display the information in the row as a span of time on the “axis” area of the timeline.

➢ Each era is given a separate color, which is not currently customizable.

➢ Overlapping eras are not well-supported yet, but the Knight Lab is exploring the best way to depict this case.

Add ContentChoose a story that can be told with a

chronological and linear narrativeEach event should contribute to your

story in a logical wayUse short headlinesAdd more description under “Text”

Add MediaThis is optional but will make your story more

dynamicTimelineJS can pull in media and has built-in support for

Twitter, Instagram, Flickr, Google Maps, DropBox, DocumentCloud, Wikipedia, SoundCloud, Storify, iframes, major video sites (YouTube, Vimeo, etc.) and more.

If TimelineJS doesn't support the media type you want on your slide, you can often make do by entering <iframe> markup in the Media column (L) instead of a URL. You can also enter <blockquote> markup in column L.

Customize!❖You can set the background of the slide to a specific

color or an image.

➢ Enter a CSS hex color value, CSS named color, or the URL to an image in the Background column (R).

❖ You can show a thumbnail of the media instead of the automatic media type marker.

➢ Add the URL of the image you'd like to use to column O.

❖ In column (P), you can select “Title” from the dropdown to make that row the “title slide” to begin the timeline.

➢ Only do this with one row.

➢ No date required.

Organizing your content❖Use the Group column (Q) to organize your

slides.➢ You can put any values you want in this column.

➢ Events with the same group will be put in the same row or adjacent rows.

➢ Timeline.JS will use the text from the Group column to label the left edge of the row containing events from each group.

➢ You can choose to group some events, but you may also leave the column blank for other events so they display automatically according to their start date.

➢ Group labels will be included on each slide representing an event from a specific group.

Publishing Your Timeline

Go to the File MenuSelect “Publish to the Web”

1.Select Link to Publish

2. To keep your timeline up to date:

Under “Published content & settings,” select “Automatically republish when changes are made”

3. Publish

To generate your timeline:

1.Copy the link code

2.Paste link code in the box next to “Google Spreadsheet URL”

3.Scroll down to check the preview

1. Install iframe plugin for WordPress

2. Activate iframe plugin

3. Add a new page or post

4. Select “Text” rather than “Visual” in the tabs on the top right corner of text box.

5. Copy and paste the embed code from step 4 of TimelineJS

To embed TimelineJS into Wordpress:

How To Embed TimelineJS into Power Point (Part 1):

1. Enable Macros in PowerPoint: File > Options> Trust Center > Trust Center Settings > Macro Settings > Enable all macros. Click “OK”

2. Ensure your Add-ins are enabled: File > Options> Trust Center > Trust Center Settings > Add-ins.

3. Make sure all checkboxes are unchecked.

4. Download and install Live Web for PowerPoint add-in.

WINDOWS: (I’ll need to test this on my Mac. Email me if you want instructions for Macs, and I’ll send them along as soon as I can.)

4. Click on the "Start" button and type "regedit" in the search box and hit the "Enter" key.

5. A "Registry Editor" window will appear with a hierarchy view of the computer files shown in the left pane and the files shown in the right pane.

6. You'll need to navigate through the left pane to the following directory: HKEY_CURRENT_USER\Software\Microsoft\InternetExplorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

How To Embed TimelineJS into Power Point (Part 2):

7. If you don't have the "FEATURE_BROWSER_EMULATION" directory, don't worry, you can create it. Create the directory by right-clicking on the "FeatureControl" folder and select "New > Key". When the new folder appears, just rename it to "FEATURE_BROWSER_EMULATION".

8. Click on the "FEATURE_BROWSER_EMULATION" folder. You'll probably have to create a new file that tells Powerpoint to use a different browser. Right-click in the right pane and select "New > DWORD (32-bit) Value" to create a new Registry Key file. Change the name of the new file to "PowerPnt.exe".

How To Embed TimelineJS into Power Point (Part 3):

9. Now, right-click on the "PowerPnt.exe" file and select "Modify...". A window will pop up where you can select either a decimal or hexadecimal base. The FAQ page for LiveWeb gives several decimal and hexadecimal values that can be used to specify different browsers. I used the hexadecimal value of " 0x2AF8" as described in the Timeline FAQ to use Internet Explorer 11.0. [Make sure you have IE 10 or higher and then select the appropriate decimal/Hex value.] Click "OK", and you're done!

How To Embed TimelineJS into Power Point (Part 4):

10. Open Power Point where you want to embed TimelineJS

11. Click Add-Ins Tab and then “Web Pages”

12. In the Live Web Wizard, copy the embed code from Step 4 on timeline.knightlab.com (after you’ve done everything in above slides) and paste it into the box next to the Add button.

13. Delete everything before // and type http: before //

14. Delete everything after frameborder=’0’, so your URL should look like this: http://cdn.knightlab.com/libs/timeline3/latest/embed/...height=650' width='100%' height='650' frameborder='0'

How To Embed TimelineJS into Power Point (Part 5):

How To Embed TimelineJS into Power Point (Final):You’re DONE!

NOTE: Your slide will look blank until you play the slideshow, so you may want to add a comment in the Notes field about what should appear.