Sortable Heatmap with sorttable.js from @sil

The advantage of an HTML heat map is that it can be made sortable.  I've been happily using Stuart Langridge's sorttable.js code but  I didnt think I could use it on the heat map because the cell values are spaces.

However reading the code, I see that Stuart supports sorting on an attribute sortable_customkey, so I could enable sorting of the heatmap  by:

  • adding :  sorttable_customkey="{$value}"  when generating the table cells
  • including the javascript :<script type="text/javascript" src="../jscripts/sorttable.js"></script>
  • adding a class to the table: <table class="sortable">

The result is a better visualization. I applied it to the scores computed in my readability analysis done earlier this week. Sorting the map helps me see much more clearly that the Fog and Flesch-Kinaid scores are positively correlated, which Flesch alone is negatively correlated with these scores.  I would not have seen that in the static heatmap.

Thanks again @sil