Simple Heatmap plugin
JavaScript HTML
Latest commit d950620 Aug 17, 2016 @DLarsen committed on GitHub Merge pull request #3 from natalan/master
add package.json

JQuery Hottie Plugin

"Awesome! You just saved my life."  - JQuery Hottie User.

Easy heatmap-style background-coloring for HTML elements.

In its most simple form, it parses the html contents of the selected elements and parses them as floats.

Given the following markup:

<ul id="example1">

$('ul#example1 li').hottie();

Frequently, the numeric values used for coloring will not be found in the contents of the selected elements. You can pass a function as an option which tells the plug-in how to retrieve the numeric value.

<ul id="example2">
  <li data-hist="4">Alabama</li>
  <li data-hist="3">Alaska</li>
  <li data-hist="7">Arizona</li>
  <li data-hist="1">Arkansas</li>
  <li data-hist="9">California</li>
  <li data-hist="5">Colorado</li>

$('ul#example2 li').hottie(
readValue : function(e) {
  return $(e).attr("data-hist");

You can also pass in a color scheme as an array. Low order colors correspond to low values. High order values correspond to high values.

<table id="myTable">

$("#myTable td").hottie({
    colorArray : [ 

See this all in an example on JSFiddle.