Timeline Demo: building an interactive timeline with annotations

= Introduction =

In this tutorial we will guide you in experimenting with Pundit, so that you can create your own interactive Timeline by annotating web pages and pictures.

Let us show you some examples of timelines we built by annotating some pictures and historical maps on the web:

Sample Maps Timeline
Link: http://metasound.dibet.univpm.it/timelinejs/examples/pundit.html?notebook-ids=20f99b8f

Sample history of Ancona Timeline
Link: http://metasound.dibet.univpm.it/timelinejs/examples/pundit.html?notebook-ids=6290cd68

What is Pundit
Pundit is a novel web annotation tool that, in the DM2E project, we are continuously developing and experimenting with it as a collaborative tool for scholars. Annotations in Pundit are more that side comments to a document, but rather pieces of structured data that scholars create and share, and that web applications can consume to produce interactive visualizations and navigations.

In Pundit, users collect annotations in "notebooks": collections of data ready to be shared and reused by other tools. TimeLineJS (http://timeline.knightlab.com/), a webapp to build interactive timelines, is one such tool.

About this demonstration
This tutorial guides you trough an "exercise" that shows you how to create annotations to be displayed in a Timeline.

You can build a timeline about "ancient maps", by collecting, commenting and tagging them, as in the Ancient Maps Example: http://metasound.dibet.univpm.it/timelinejs/examples/pundit.html?notebook-ids=20f99b8f

... or you can build a timeline about your city, as in the City of Ancona Timeline Example (http://metasound.dibet.univpm.it/timelinejs/examples/pundit.html?notebook-ids=6290cd68) or choose your favorite topic.

Note: To make this demo work, you will need one of the Google Chrome, Firefox or Safari browsers.

= Description =

Get the Pundit bookmarklet
The Pundit Timeline demo bookmarlet is available here: http://thepund.it/bm/demo-timeline You just have to drag&drop the “Pundit-Timeline-Demo” link to your browser’s bookmark-toolbar.

Prepare for annotating
You can annotate both text excerpts or images you find on the Web. However be careful: the bookmarklet is not guaranteed to work exactly on every web page! In particular Pundit does not work on image viewers with zooming functions etc. (it would be impossible to integrate with all possible systems), so please choose simple good old HTML pages if possible.

Some examples of annotatable resources

 * Search maps in the British National Library: Example page to annotate: http://www.bl.uk/onlinegallery/sacredtexts/mparis.html
 * Ancient Maps of Jerusalem: Example page: http://www.jnul.huji.ac.il/dl/maps/jer/html/jer220.htm
 * Antique Maps and Atlases: Example page: http://www.helmink.com/Antique_Map_Ortelius_East_Indies_1/
 * The British Museum: Example page: http://www.britishmuseum.org/research/collection_online/collection_object_details/collection_image_gallery.aspx?assetId=332551&objectId=1349928&partId=1
 * Search Europeana for content to annotate. Note that not all the resources you find are directly annotable with the current Pundit implementation.
 * Once you are in the web page you want to annotate, click the
 * “Pundit-Timeline-Demo” button you find in your browser bookmarks-toolbar, to load
 * Pundit and start annotating.

Create a new notebook and set it as current notebook in pundit
In the Pundit top bar, go to “Your User Name” > “Manage Notebooks” Under “Create a new notebook” type the name of your new notebook Set the new notebook as “current notebook”. To do so click on the gear button corresponding to the notebook and choose “Set as Current Notebook”

Create “triples” with Pundit
An annotation in Pundit is a triple; a very simple “sentence” that says something about the annotated content. For example, “this text is citing this philosopher” or “this picture depicts this city” and so on. A triple is of the form: subject - predicate - object. For example: “some text” - cites - Plato

To learn how to create your triples, refer to the following steps.

Create triples with the triple composer
Select a text fragment you want to annotate and click “annotate text fragment”. The triple composer will open.



For images, mouse over the image, click on the icon that appears at the top-left and choose "annotate image"



Select the predicate by clicking on the yellow “predicate” box date



Select the object by clicking on the red “object” box. Search the available vocabularies (Freebase gives good results usually) and pick from results or, if you are using one of the textual relations (comment, title) type in a text, or a valide date when required.



To add a new triple click the “Add a new triple” button. Drag the text-fragment from the “subject” box to the empty “subject” box. Select the predicate by clicking on the empty yellow “predicate” box. Select the object by clicking on the empty red “object” box. Click “Save”.

Note: if you forgot a triple you can add it later by selecting the very same image or text fragment.

Create timeline compliant annotations
To make your annotation visible in the TimelineJS demo you only need to add date information by creating the following triple:

text-fragment -  dates to  -  "YYYT-MM-DD" or, for an image:

image -  dates to  -  "YYYY-MM-DD" Alternatively you can specify a period in time by using the following two triples:

image -  start date  -  "YYYY-MM-DD" image -  end date  -  "YYYY-MM-DD"

Add more info to your annotation
To make your annotation more interesting you can use all the relations you find in Pundit to create additional triples.

For example:

add a nice title to be displayed: image  -  title   -  "The Dome of Ancona" add a comment: image  -  comment  -  "I used to work close to the Dome" specify the author: image  -  has creator  -  SOME-FREEBASE_PERSON Need help with the Triple Composer?

To learn more about Pundit annotation read the Quick Start Guide at http://www.thepund.it/documentation/quick-start-guide-to-pundit/ or watch the Introductory Videos at http://www.thepund.it/introductory-videos/

Visualize your notebook in Ask the Pundit
Go to http://ask.as.thepund.it and find your public notebook, or click on “My Ask” to login and find your personal notebooks. Click the “browse” button and your annotations will be shown.



You can find the notebook we used to create this demo at http://ask.as.thepund.it/#/notebooks/6290cd68

Visualize Your Annotations in the TimelineJS Demo
Once you opened your notebook in Ask the Pundit, click on the “Timeline demo” green button at the bottom of the page.

Iterate the procedure to create more annotations, Refresh the visualization page to update it.

Be kind, leave feedback!

When done, please spend 5 minutes to fill this form: https://docs.google.com/forms/d/11-bGn_w8aPY0-0Igui4JUoMZe0x7taQsDXowVEaYv5c/viewform?usp=sharing&edit_requested=true

Want to see more use cases and visualizations? Learn about the Philosophers Demo at http://www.thepund.it/visualization-demos/philosophers-demo-howto/