Git Product home page Git Product logo

timeline's Introduction

Timeline

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.

Embedding

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:

<div class="timeline" data-uri="/content/timelines/history-of-genetics-timeline/" data-eventid="" style="width:600px; height:600px; background-color: #000"></div>
<script type="text/javascript" src="http://wellcomelibrary.org/plugins/timeline/embed.min.js"></script><script type="text/javascript">/* wordpress fix */</script>

The timeline also supports 'deep linking' to events, where a hash value is appended to the Url as you browse e.g:

http://wellcomelibrary.org/.../genetics-timeline/#16121

##Developers

The timeline project uses a build.ps1 PowerShell script in the root of the project to combine and minify the various JavaScript files into embed.min.js and 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).

To get the project running on localhost, create a website pointing to the /src directory with a virtual directory called 'build' pointing to the /build directory.

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. Also open index.html and change the src of the script tag from build/embed.min.js to js/embed.js

Data Format

The example timeline data employs the use of Julian days. These are useful for plotting applications as they represent a calendar-independent, absolute unit of time.

However, the code controlling the main user interface only deals in moment objects.

The timeline loosely employs the Provider Model, which abstracts the date parsing out to wellcomeTimelineProvider.js.

Providers could be created to work with any arbitrary date format that can be converted to moment objects.

To change the provider, edit the provider option of the wellcomeTimeline widget in timeline.html.

Use the data-uri attribute of div.timeline to set the path to your custom data source.

Notes

The /* 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.

timeline's People

Contributors

edsilv avatar tomcrane avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

timeline's Issues

Cross Platform Build

The build system is currently Microsoft specific and also requires a JRE to be installed for the google closure compiler. These dependencies limit who can use it and also make it difficult to get started. There is a lot of momentum behind using Grunt (which depends on Node.js) to do Javascript builds now because it runs everywhere and has a great package management system to install dependencies. Moving to grunt would reduce your dependencies to just Node.js (which many people already have) and give you cross platform. I would be happy to explain how this works if you like and even do the work

API?

Hey, great work!
Is there a way that can add/delete entry in a loaded timeline?

Running in localhost

Hey,
I cant make it run in my localhost.
Uhm.. there is no error showing in my chrome console.
Just a ajaxloader keep loading something.

Timelines with many events spanning a short period

Timeline is brilliant, but it would be great to have greater control of the zoom level so that timelines spanning a short time period but with many events (e.g. 1939-1945) don't display in an overlapping lump.

Is there a way this can be achieved, so that the zoom level can be increased right down to a single month, and also set at a high zoom level by default?

Convert to run from IIIF manifest with navDate

This timeline predates the IIIF Presentation API (or at least, Wellcome's use of it).

However, the data model (label, description, images, image services, dates) maps nicely to a IIIF manifest, or a collection. It would be good to drive the timeline from a manifest or collection, to give a different/alternative/interesting rendering of IIIF material that has date info available.

The is useful because lots of people already have the material as IIIF, they don't need to do too much to manage new timeline data. Any ad hoc IIIF resources, for storytelling can be stored in a Presentation API server if necessary. For example a IIIF Collection created specifically to sequence a set of works for a blog post.

I would add an extra, optional, timeline-specific service to provide the "loose" date format the timeline supports (e.g., Romans leave Britain: 410 CE) for which IIIF navDates (“YYYY-MM-DDThh:mm:ssZ”) are inappropriate. Lots of people would be be happy driving a timeline off of navDates only, so if that's all there is use that; otherwise, get the more historical friendly date format, without misleading precision - provide this as a service extension.

Use cases:

  1. Display of newspaper issues, periodicals, etc - likely to already to have navDate anyway, and be in Gregorian calendar to boot. Show highlighted front pages from a particular journal. Easy win.
  2. IIIF Collection of works by particular author/creator - see timeline of published novels; paintings by artist over career, albums, etc (David Bowie albums with covers on timeline)
  3. Archival items over the course of a career; thumbnail service on item-level manifest gives appropriate highlight (see also https://groups.google.com/forum/#!topic/iiif-discuss/2pKcLuxic4I); trace emergence of ideas from an ad-hoc IIIF collection (links between manifests/canvases as hotlink annotations to reconstruct correspondence). Trace emergence of scientific ideas through correspondence over time.
  4. other cool stuff. Any collection, manifest or canvas level search results returned as IIIF collection (see IIIF Discovery) could be rendered on a timeline if date info available.

Our site using a modified version of Wellcometrust timeline viewer.

Hello,

I forgot to post about this :

We have used the Wellcometrust timeline for one of our projects. It was published in autumn 2017, you can see it here (in french, there could be geographic restrictions also).

1eaf79ce-adee-4ba6-afa4-a2f9182d9b00

The events are also discoverable from our main application (indexed in a SOLR database, you can see it here.

The « app » is hosted in a angular app and there is communication between both app to share data and functionality. The backend the « editors » are using to create the events is an Apex application.

I fixed a few bugs and added a few functionnalities that where requested for the needs of the project, like « filters » to be able to select a subset of events (implemented client side but using some precalculated data / index, a second source of data). The SOLR indexation was added after the autumn release, we could probably add a filter based on text content or facetted search now.

The timeline library / app worked well overall, I tought the code quality was pretty good. On the negative side there are performance issue when there is alot of events and I was not able to fix it without introducing some issues in the animation. Also, the model of « hidden » events and how zoom affect the result is sometimes hard to understand, we have added the display of a informative text to help the understanding.

Our project budget doesnt let us go further in improving it but the rendering of the events and animation could surely benefit from a rewrite.

Thanks for sharing the sources of timeline!

Incompatibilities when deploying on another site

Hello,

I have to integrate Timeline in our Angular application (a copy that we will customize) that have it's own deployment constraints (and I also need to be able to test on a local server setup and a shared server) and encountered a few issues. I will be able to fix that but I wanted to share the information in case that would be usefull to someone else.

  1. The loading of files expect a precise folder organisation. It's not possible to move all the files within a common "Timeline" folder. By ex. domain/build/. It's problematic in our case because I have to mix the files with our applications files instead of having them in the same "vendor" folder (img and css is relatively loaded, so no problem there).

  2. The calculation of the scriptUri in embed.js is is done using the last script tag. This is not compatible with our use of Angular component as the script tag is then in the middle of the DOM. I have not investigated this one completely but I noticed that the domain was the domain of the hosting app, not the one of the source embed file.

  3. updateParentHash manipulate directly window.parent.document.location. It was working fine at first (I just had to add a "reloadOnSearch: false" in the route definition to prevent unintented route change when clicking on a "event") but things stopped working when i corrected scriptUri to refer to the common server hosted files (and embedding the timeline in my local server), very likely because of CORS /security limitation. I think it would be more appropriate to add a custom message on easyXDM.Socket and update the url through the embed bootstrap script (or explore other solution to be able to relay the message at the angular app level).

Thanks for sharing Timeline, it's very nice!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.