Twitter timeline proof-of-concept

Reading Stowe Boyd’s thoughts on plurk and writing my own post on the topic I began to wonder how much work it would really be to add a timeline view using something like the Simile Timeline library.

As a quick proof of concept I saved my twitter homepage to my laptop and added a little javascript. As well as calling in the timeline library from http://simile.mit.edu/timeline/api/timeline-api.js and using the first javascript iso8601 code I found through google, I added:

  jQuery(document).ready(function() {
    jQuery('body').prepend('
'); var eventSource = new Timeline.DefaultEventSource(); evts = []; jQuery('.hentry_hover').each(function (index, elem) { var $elem = jQuery(elem); var dateEvent = new Date(); dateEvent.setISO8601($elem.find('.published')[0].getAttribute('title')); var evt = new Timeline.DefaultEventSource.Event( dateEvent, //start dateEvent, //end dateEvent, //latestStart dateEvent, //earliestEnd true, //instant $elem.find('.content a:first').text(), //text $elem.find('.entry-content').text() //description ); eventSource.add(evt); }); var bandInfos = [ Timeline.createBandInfo({ width: "100%", intervalUnit: Timeline.DateTime.MINUTE, intervalPixels: 10, eventSource: eventSource, }), ]; tl = Timeline.create(jQuery("#my-timeline")[0], bandInfos); });

and pretty quickly I had a basic timeline view at the top of my twitter page.

sample of twitter simile mashup

Obviously this isn’t a very practical solution, but it’s an indicator of just how easy it would be to build something, whether as a GreaseMonkey script, or a proper client that uses the API and maybe loads tweets using AJAX as someone scrolls through the timeline.

Tags: , , ,

Comments are closed.