JSFiddle - React, Tailwind, and code Playground

by Mike Rawling

HTML

<script src="https://rawgithub.com/DLarsen/jquery-hottie/master/jquery.hottie.js"></script>
<table id="myTable">
    <tr><td>2.59</td><td>0.68</td><td>1.35</td><td>1.35</td><td>2.03</td><td>1.60</td></tr>
    <tr><td>1.39</td><td>0.70</td><td>1.22</td><td>1.08</td><td>1.00</td><td>2.12</td></tr>
    <tr><td>2.87</td><td>0.59</td><td>1.22</td><td>0.57</td><td>1.08</td><td>3.00</td></tr>
    <tr><td>0.99</td><td>0.25</td><td>0.48</td><td>0.50</td><td>0.99</td><td>1.77</td></tr>
</table>


<ul id="test1">
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>

</ul>

<ul id="test2">

  <li data-hist="1.1">Alabama</li>
  <li data-hist="1.2">Alaska</li>
  <li data-hist="1.3">Arizona</li>
  <li data-hist="2.1">Arkansas</li>
  <li data-hist="2.4">California</li>
  <li data-hist="2.8">Colorado</li>
  <li data-hist="2.9">Connecticut</li>

</ul>

<ul id="test3">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
</ul>

CSS

ul { margin-bottom: 10px; width:10em; }
table { margin: 10px; }
td { padding: 4px; }

JavaScript

$("#myTable td").hottie({
    colorArray : [ 
        "#63BE7B",
        "#FBE983",
        "#F8696B"
    ]
});
$("#test1 li").hottie();

    $("#test2 li").hottie({
      readValue : function(e) {
        return $(e).attr("data-hist");
      },
      colorArray : [ 
        "#000000",
        "#bb0000",
        "#ffff00"
      ]
    });

    $("#test3 li").hottie({
      colorArray : [ 
        "#000000",
        "#bb0000",
        "#ffff00"
      ]
    });