I wrote once similar one using heat map ages ago (document structure on HN changed at least twice in mean time, I didn't care about being logged in), I always wanted to better it a bit to show (it is color-blind friendly half way - right?, when number of comments is to big regarding vertical resolution don't mind the oldest - right?, shall the bar be on the right side maybe? is it right to add new history entry if clicked on timestamp instead of open comment? etc.) - but now you have to/may enjoy it as it is:

  javascript:
  var n,r='',A=[],a=document.getElementsByClassName("default"); 
  for(i=0;i<a.length;i++){
    n=a[i].firstChild.firstChild.children[1].firstChild;
    if(!n)break; 
    n=n.href;n=n.substring(n.length-8,n.length); 
    A.push({name:n,element:a[i]});
  }   
  A.sort(function(a,b){return b.name-a.name}); 
  var Al=A.length,dh=document.body.clientHeight,ah= dh/Al-1; 
  for(j in A){
    var c=(270/Al)*j+30,l=75+(20/Al)*j,s=100- (80/Al)*j, 
    bc="hsl("+c+","+s+"%,"+l+"%)"; 
    A[j].element.style.backgroundColor=bc; 
    A[j].element.setAttribute('onmouseover',"document.getElementById('map_"+A[j].name+"').style.width='40px'"); 
    A[j].element.setAttribute('onmouseout',"document.getElementById('map_"+A[j].name+"').style.width='20px'");
    A[j].element.setAttribute('onclick',"document.location.href=document.location.href.split('#')[0]+'#up_"+A[j].name+"';return false;");  
    r+="<a id='map_"+A[j].name+"' " 
    +"style='display:block;margin-bottom:1px;width:20px; max-height:"+ah+"px;background-color:"+bc+";' " 
    +"href='#up_"+A[j].name+"' " +"onmouseover=document.location.replace(document.location.href.split('#')[0]+'#up_"+A[j].name+"');return true;>&nbsp;</a>"
  } 
  var sp=document.createElement("div"); 
  sp.setAttribute('style','position:fixed;top:0px;width:80px;height:'+dh+'px;'); 
  document.body.appendChild(sp);sp.innerHTML=r;void('');