

TimelineJS: build visually rich interactive timelines - cnivolle
http://timeline.verite.co/

======
alexfringes
Almost rolled my own D3 timeline before adopting TimelineJS. Saved a bunch of
time and still got a look that matched the rest of the project:
[http://bulger.wbur.org/story/1977/?location=44444](http://bulger.wbur.org/story/1977/?location=44444)
Can only recommend this. Caveat: getting it to be responsive down to the phone
will require some work on your end.

------
feniv
It would be nice if the duration of the "slide" animation was based on the
time difference between the two slides. This adds some implicit context to the
timeline. Things that happened back-to-back will appear quickly (like 300 ms)
whereas things with a long time gap in between will appear slowly (2-3
seconds).

~~~
skore
I also found the easing function on the zoom action annoying. It starts slow
and ends fast - the other way around would make it feel a _lot_ more
responsive.

------
mooreds
I used this when creating a farm share timeline:
[http://coloradocsas.info/pages/farm_share_timeline](http://coloradocsas.info/pages/farm_share_timeline)

It was an extremely easy way to put together a very professional looking user
interface. I especially love the google spreadsheets integration, which make
managing the data for the timeline trivial.

Highly recommended!

------
shreyas-satish
This is an awesome library. Customizable, flexible and looks slick. I used
this in my previous job to present a list of important events in history
chronologically. Here's a demo for Bangalore -
[http://bangalore.localheritage.in/timeline](http://bangalore.localheritage.in/timeline)

Really cool that they support Google Spreadsheets, which is what allowed us to
hit the ground running. And when we started managing a lot of data, it was
trivial to move our data to the DB and render the timeline using JSON.

Thanks verite.co!

------
nir
Great lib, I used it for [http://nli-labs.net/jerusalem_maps/](http://nli-
labs.net/jerusalem_maps/) and it worked beautifully, easily integrating with
some other 3rd party JS libs.

(Source here, in case it's useful for anyone: [https://github.com/nli-
labs/jerusalem_maps](https://github.com/nli-labs/jerusalem_maps) )

~~~
alexfringes
Nice use of imageLens! I like this a lot. Seems like somebody should add an
intelligent lazyload to timelineJS or jerusalem_maps at some point. Your
project really tests the limits on that front.

~~~
nir
Thanks!

I didn't get the part about lazy load - the images are pretty big, but only
get loaded when you view them, isn't that what LL is about?

~~~
alexfringes
I get this state for a while on a speedy connection and current machine:
[http://cl.ly/QbEs](http://cl.ly/QbEs)

Chrome dev tools show a bunch of other images being loaded before the one that
matters gets taken care of. (at 10s I get the image for the initial timeline
point: [http://cl.ly/QbZx](http://cl.ly/QbZx) and here is what's happening
beforehand: [http://cl.ly/Qbee](http://cl.ly/Qbee))

Looks like this is partially thumbnails (which take a while despite their
small size - not sure what's going on here) plus some larger images that
aren't the first timeline point's image.

~~~
nir
Got it. Good catch, thanks! We put the site together pretty quickly, so left
the images at their original, slower server. I need to move them to gh-pages
and check performance again.

------
the_cat_kittles
Its very pretty. I stumbled across it when I was looking for a library to make
management resource planning. Too bad its very limited. I ended up using CHAP
links' Timeline [http://almende.github.io/chap-links-
library/timeline.html](http://almende.github.io/chap-links-
library/timeline.html), which is an excellent, flexible library.

~~~
usea
I also used this timeline for a small project with lots of data this week. I
strongly recommend it. Excellent documentation and examples, too.

------
quizotic
Can anyone compare/contrast this with [http://www.simile-
widgets.org/timeline/](http://www.simile-widgets.org/timeline/) ?

I've used the latter before

~~~
dbarlett
Timeline JS can pull data directly from a Google Spreadsheet and automatically
embeds a YouTube player, Flickr thumbnail, Google Map, etc if you link the
entry to it.

------
timeglider
disclosure: Tooting own horn. Give our Timeglider widget a look too:
[http://timeglider.com/widget](http://timeglider.com/widget)

~~~
quizotic
Beautiful!

------
derrick_l_grant
I love this thing I've been watching the peeps at verite develop it for the
past couple of years and I'd love to combine it with some of the stuff we do
at Podiium [http://www.podiium.com/debate/youtube-vs-
vimeo/](http://www.podiium.com/debate/youtube-vs-vimeo/) to have super
interesting debates cnivolle shout me

------
cubecul
Let's not forget that Northwestern's Knight Lab also played a part in its
development, not just verite.co!

Thanks to them both!

------
swang
Why is it so difficult to find a link to download this? Not writing this with
some sense of entitlement, just frustration.

This looks cool, I want to try it out, are they really forcing me to dig
through GitHub (which I may not be familiar enough with) to find the release
page that has a .zip file that may or may not be what I want?

~~~
jlogsdon
If you just want to [s]embed[/s] try it out you can follow the Make a Timeline
directions on the homepage.

------
dblock
Check out [http://timelines.artsy.net/artist/pablo-
picasso](http://timelines.artsy.net/artist/pablo-picasso) :)

------
atacrawl
Really excellent work, both the library itself and the simple ability for
anyone to make an example timeline.

------
callmeed
This seems like it would be awesome for several types of online classes.

Anyone using it for that yet?

------
jwillgoesfast
funny to see this post, I tweeted about this 1 year ago, saw it pop up on
Timehop, and built a quick rough draft on my blog this morning. very cool
library!

------
BaconJuice
This very very cool. I can not wait to use this!

------
tsieling
Nice, clear and simple. This is great.

------
hardwaresofton
Wow, this is amazing -- great job

------
symr
Looks really good.

