While gawking at some of the really cools toys by Moritz Stefaner , I got particularly interested in his post about visualizing time gaps in data and had a moment of inspiration.

Instead of vertically gaping the data, you could “timeline” the data like we used to do in gradeschool. (I was also looking at some sparklines today too…).

So, I implemented the idea on the blog here. Now, this post won’t serve well to illustrate the effect, but if you fly back to a post that had some activity, you’ll find that as you read the comments, the yellow tick above each comment shows you the relative position in the discussion when the comment took place. Neat, out of the way, and very easy to grep. I like it.

For those who care, the code is really, really simple. For Wordpressers, in you comments.php add these lines right after <ol class=”commentlist”>

<?php
$last_comment = $comments[count($comments)-1]->comment_date;
$bar_length = strtotime($last_comment) - strtotime($post->post_date);
$bar_length = $bar_length + ($bar_length*.04); // 4% slack, width of each 'tick mark'
?>

Then, inside the foreach ($comments as $comment) loop and right after the <li>, add this:

<div class="commenttimeline"><div style="left: <?php
echo floor( ((strtotime($comment->comment_date) - strtotime($post->post_date)) / $bar_length ) * 100 );
?>%"></div></div>

Then you set up some basic styles for the bar (these will vary a LOT depending on your theme/style/etc):

.commentlist li {
position: relative;
_height: 1px;
}
.commenttimeline {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: #666;
_width: 102.5%;
}
.commenttimeline div {
position: absolute;
top: 0;
background: #cc0;
height: 2px;
width: 4%;
_line-height: 1px;
_font-size: 1px;
}

Yes, a few IE hacks were needed. :/

And ta da, instant comment timeline above each comment. Pretty cool.