6 ms·
TimelineJS: build visually rich interactive timelines
- mooreds 13y agoI 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!
- BaconJuice 13y agoThis very very cool. I can not wait to use this!
- shreyas-satish 13y agoThis 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!
- hardwaresofton 13y agoWow, this is amazing -- great job
- tsieling 13y agoNice, clear and simple. This is great.
- cubecul 13y agoLet's not forget that Northwestern's Knight Lab also played a part in its development, not just verite.co! Thanks to them both!
- quizotic 13y agoCan anyone compare/contrast this with http://www.simile-widgets.org/timeline/ http://www.simile-widgets.org/timeline/ ? I've used the latter before
- dbarlett 13y agoTimeline 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.
- the_cat_kittles 13y agoIts 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.
- nir 13y agoGreat 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 13y agoNice 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 13y agoThanks! 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 13y agoI 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 13y agoGot 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.
- symr 13y agoLooks really good.
- timeglider 13y agodisclosure: Tooting own horn. Give our Timeglider widget a look too: http://timeglider.com/widget http://timeglider.com/widget
- quizotic 13y agoBeautiful!
- dblock 13y agoCheck out http://timelines.artsy.net/artist/pablo-picasso http://timelines.artsy.net/artist/pablo-picasso :)
- feniv 13y agoIt 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 13y agoI 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.
- alexfringes 13y agoAlmost 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.
- deleted 13y ago[deleted]
- swang 13y agoWhy 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 13y agoIf you just want to [s]embed[/s] try it out you can follow the Make a Timeline directions on the homepage.
- callmeed 13y agoThis seems like it would be awesome for several types of online classes. Anyone using it for that yet?
- atacrawl 13y agoReally excellent work, both the library itself and the simple ability for anyone to make an example timeline.
- jwillgoesfast 13y agofunny 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!
- derrick_l_grant 13y agoI 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