Git Product home page Git Product logo

timeline's Introduction

Super Awesome Vertical Timeline

Timeline shows a series of events in a vertically time-sorted structure.

Timeline utilizes a handful of super cool libraries, including Tabletop.js (for the data storage) and Isotope for the layout.

A running example can be found here.

How to Use

1) Set up your data using Tabletop.js

Create a Google Spreadsheet with the following columns:

  • title
  • date
  • display date
  • photo url
  • caption
  • body
  • read more url

Please note that the the display date column must be in the format Month day, Year (April 25, 2012) for proper javascript parsing. Also, all columns must be plain text format, including the two date columns.

Now follow the instructions over at Tabletop.js to publish the Spreadsheet.

The Spreadsheet used in the example index.html file is at https://docs.google.com/spreadsheet/ccc?key=0AsmHVq28GtVJdG1fX3dsQlZrY18zTVA2ZG8wTXdtNHc

2) Insert the Spreadsheet key into script.js

Find your Spreadsheet key (see Tabletop.js for instructions), and replace the sample key on line 3 of js/script.js with the key to your Spreadsheet.

You also need to update the name of the spreadsheet 'sheet' that holds the data on line 4 of 'js/script.js'.

3) Enjoy!

Bugs

  • None? Tested on Chrome, Firefox, Safari, & IE 7-9.

Possible Improvements

  • Turn this into a jQuery plugin.
  • Remove hard coded Tabletop.js Spreadsheet key
  • Remove hard coded #timeline element from script, and allow for multiple Timelines per page

Credits

Balance Media for the design and coding.

The following plugins/libraries are used: jQuery, Isotope, Tabletop.js, Handlebars.js, jQuery imagesLoaded plugin, and jQuery resize event

NOTE: All of the elements are free for non-commercial use. Commercial use of Isotope requires a $25 license.

timeline's People

Contributors

robdecker 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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

timeline's Issues

Photos on timeline not appearing on website

I like this tool and had two issues that I haven't been able to resolve. 1.) I wasn't able to link to youtube video from the photo_url column (which I thought was equivalent to media) 2.) While working in the html index the photos displayed fine but don't' display in IFrame of website.

Combine with Vertical Timeseries or Map

Thanks for this awesome timeline - have been looking for something alike for month. Heres a question from a non coding journalist: Can you think (and explain to me) a way to combine this timeline with a vertical timeseries-graph, that would move in accordance to the time on the timeline and is programmed so that the point on the timeseries is highlighted, that corresponds with the object in the timeline I am looking at? This would give this timeline great potential. Also, is there a way to sort of anchor the objects on a map, that appears on one side of the timeline? Do you still work on this app? If not, can you recommend, whom to ask? Would be a great help.

Tanks, Miriam

Can't make it work

Hi,

Thank you for this great timeline !

I'm trying to use it, but I can't make it work. The formats are well text format everywhere because I've made a copy of your sheet and I've renamed it and share it to everyone and plublished it to the web.

I've also change the key and the name of the file in the sheet.

I really wonder what's wrong !

Can Year Headers group events under Decades instead?

This timeline tool is amazing, it's almost perfect but I hope there's a way to adjust one crucial aspect so it'll be even more useful for storytelling. The "year" headers ought to communicate more than the year if, for instance, I want to show events that occur every few years, decades or centuries. It would be tremendous if I could have alternate ways of labeling the headers.

I attempted to layout a timeline of certain election day results only to discover that many of my boxes won't alternate sides, most just stack on the left side because the headers occur too frequently (which makes the page longer than it has to be).

Is it possible to make headers group events under decades instead of years?

Please let me know your thinking on this.

Here's my attempt:
http://seezie.com/tests/dataviz/electoral_timeline/

Malik

license

I want to try to use this for a open source project but I want to know what the license behind this is?

Thanks

For Journalists

Also, if you really want this to bee used by journalists, who dont have a technical departement as a resource, you may want to add something like this to your supereasy how to use - section:

(after "publish the sheet as described at tabletop")
"Click on the button "copy repository" and download the zipfile on your computer. Unzip it. The file "index" contains the html with the timeline. It needs access to the folder "css", "images" and "js" . Copy all three folders plus the index-file to the place, where you want to publish the site. You can also copy those items manually.

Cheers Miriam

JSON as source

Hi - beautiful timeline!
Can this script be adapted / extended to use other sources?
eg. PHP-made JSON from data on a private server:
many thanks, Mike
(Ed: having an intensive course on what Tabletop actually does... :)

example, as static image?

Since the example has been broken for the last 6 years (as of 2021) - #13, #14, I wonder if anyone has a working example elsewhere they could screenshot.

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.