Git Product home page Git Product logo

timeline's Introduction

Timeline

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 is split into /src and /build directories, with a build.ps1 PowerShell script in the root of the project which combines and minifies 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 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

Watchers

 avatar  avatar

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.