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.

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.