Heat Map

A Heat Map using jQuery

by edgardleal

HTML

<table> 
    <tbody>
    </tbody>
</table>

CSS

.heat {
    display : fixed;
    width : 5px;
    height : 5px;
}

JavaScript

color_scale = ["#000033", "#000099",
              "#0066CC", "#00CCCC",
              "#00CC66", "#00CC00",
              "#66CC00", "#CCCC00",
              "#CC6600", "#CC0000"];


$(document).ready(function(){
    var $table = $("table tbody");
    var total = 0;
    var media = 0;
    for(i = 0; i < 24; i++){
      html = "<tr>";
        for(j = 0; j < 30;j++){
            index = Math.round(Math.random() * 9);
            total += index;
            html += 
            "<td class='heat' style='"+ 
                "background-color: " +
                color_scale[index] + 
                "'></td>";
        }
        html += "</tr>";
        $table.append(html);

    }
    
    html = "Total: " + total +
            "<br>" + 
            "Media: " + Math.round(
                total / (24 * 30));
   $('body').append(html);
});