TimelineJS: build visually rich interactive timelines | Hacker News Reader

TimelineJS: build visually rich interactive timelines

timeline.verite.co

199 pointscnivolle29 comments

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 Can only recommend this. Caveat: getting it to be responsive down to the phone will require some work on your end.

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).

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.

I used this when creating a 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!

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

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!

Great lib, I used it for 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 )

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.

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?

I get this state for a while on a speedy connection and current machine: 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 and here is what's happening beforehand: 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.

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.

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, which is an excellent, flexible library.

I love the flexibility of CHAP links' Timeline.

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

Can anyone compare/contrast this with http://www.simile-widgets.org/timeline/ ?

I've used the latter before

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.

disclosure: Tooting own horn. Give our Timeglider widget a look too: http://timeglider.com/widget

Beautiful!

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/ to have super interesting debates cnivolle shout me

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

Thanks to them both!

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?

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

Check out http://timelines.artsy.net/artist/pablo-picasso :)

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

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

Anyone using it for that yet?

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!

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

Nice, clear and simple. This is great.

Wow, this is amazing -- great job

Looks really good.

Reply on news.ycombinator.com