Nerd Alert! TimelineJS, a great way to make a programmed Web timeline

TimelineJS makes creating and publishing an interactive event timeline painless

My friend Bobby has been developing a book about her daughter's struggle with epilepsy with me as her editor and for her second draft I suggested that she revise her text by writing a blog ... and thus was Gabriela created. 

Now, some 83 installments and more than 80,000 words later (not including the epilogue) Bobbi's now working on a prologue and starting to investigate publishing options.

The story is complicated and in an effort to get the major events visually organized I wanted her to create a timeline. I looked around for way to make this easier and I found TimelineJS, an open-source JavaScript tool that "enables you to build visually-rich interactive timelines and is available in 40 languages ... it can [also] pull in media from different sources and has built in support for: Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia, SoundCloud and more media types are regularly added."

The beauty of this tool is that all you have to do is create a Google spreadsheet (the authors supply a template) and populate it, at a minimum, with the start date, end date, and headline. Optionally you can add text, a link to media, text for a media credit to be placed underneath the media, a caption for the media, a link to thumbnail for the media,  an entry type, and define up to six tags which will ensure that identically tagged events are aligned on the timeline. If a Google spreadsheet isn't the way you want to go you can also create a JSON-formatted file of the events instead.

Once you've assembled your data you tell Google to publish the spreadsheet to the Web and enter the export URL into the TimeLineJS generator. You can set height and width parameters for the output as well as map style (you'll need a Google Maps key for this), select the fonts to be used, adjust the zoom level, select which event to start at, choose whether to start at the end, and whether to enable "hash" bookmarks so URLs can be generated to jump to any specific event on the timeline.

The TimelineJS service outputs embed code as either an iframe or as shortcode to be used with the TimelineJS Wordpress plugin.

Here's Bobbi's timeline. Descriptions of events and links to posts still need to be added but the basic framewrok is all there. Try clicking on events, zooming in and out using the controls on the left, and try a drag and release (ballistic motion, cool, eh?):

The beauty of TimelineJS is that it's so easy to create a good-looking timeline that has style and polish. If you know of anything better, let me know ...

Gibbs is lined by time. Make an event below or with gearhead@gibbs.com and follow him on TwitterApp.net, and Facebook.

Join the Network World communities on Facebook and LinkedIn to comment on topics that are top of mind.
Must read: Hidden Cause of Slow Internet and how to fix it
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.