- Copyright (c) 2013 The Wellcome Library
- License: MIT
- Uses: jQuery, jQueryUI, moment, iScroll, jQuery Address, easyXDM, json2
The timeline can be seen in action here
The aim of the project was to provide a reusable presentation mechanism that was easily integrated into the Wellcome Library’s content management system and other data sources. The timeline can be embedded on any page, much like a YouTube video. Instead of a video file it loads a chunk of data in JSON format that provides it with text and graphics for all the events it needs to render. Anyone who can provide a file in this format can use the timeline to render their own events.
In this example the JSON is generated from a CMS – but it could come from any data source, or even be hand-crafted. Here is an example of the same timeline component loading JSON data generated from a SPARQL query to DBpedia:
The timeline shows more events as you zoom in, smoothly expanding the canvas until there is enough room for the chosen event.
You will notice that the Example Timeline has an 'embed' option in the bottom-left corner.
You can use the code in this panel to embed the timeline on your own website, e.g:
The timeline also supports 'deep linking' to events, where a hash value is appended to the Url as you browse e.g:
The timeline project uses a
wellcomeTimeline.min.js, (right click > Run with PowerShell).
You will need Google Closure Compiler - and a Java runtime - and will need to edit the build.ps1 file to point to it).
embed.min.js- creates an iframe within
wellcomeTimeline.min.js- contains all the jQueryUI widgets used to create the user interface, plus a few utility scripts.
To get the project running on localhost, create a website pointing to the
/src directory with a virtual directory called 'build' pointing to the
Alternatively, to run with Visual Studio's built-in web server 'Cassini' open the
/src directory as a Web Site and change the solution's Virtual Path in the properties panel to
It is not possible to create a virtual directory to
/build with Cassini, so follow the steps in the next paragraph to use the unminified scripts.
To debug individual scripts, open
timeline.html, comment out
wellcomeTimeline.min.js and uncomment the scripts directly underneath.
index.html and change the src of the script tag from
However, the code controlling the main user interface only deals in
Providers could be created to work with any arbitrary date format that can be converted to
To change the provider, edit the
provider option of the
wellcomeTimeline widget in
data-uri attribute of
div.timeline to set the path to your custom data source.
/* wordpress fix */ empty script in the embed code is for convenience when using the Wordpress WYSIWYG editor, which will otherwise strip out the script tags.