JSFiddle - React, Tailwind, and code Playground

by Mike Rawling

HTML

<div class="sharerank-heatmap">
<div id="placeholder_945930d9-a540-4bcf-be3f-47bba1cfe0f6" class="" style="opacity: 1;"><table id="confirmit_agg_table_5" class="t5_table Table">
    <table id="confirmit_agg_table_5" class="t5_table Table">
  <thead>
    <tr class="t5_tr TableRow">
      <td class="t5_cc">
      </td><td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
      <td class="t5_chc">Intense</td>
    </tr>
  </thead>
  <tbody>
    <tr class="t5_tr TableRow">
      <td class="t5_rhc">Betrayal</td>
      <td class="t5_dc TableDataCell">15%</td>
      <td class="t5_dc TableDataCell">0%</td>
      <td class="t5_dc TableDataCell">35%</td>
      <td class="t5_dc TableDataCell">21%</td>
      <td class="t5_dc TableDataCell">17%</td>
      <td class="t5_dc TableDataCell">30%</td>
      <td class="t5_dc TableDataCell">14%</td>
      <td class="t5_dc TableDataCell">14%</td>
      <td class="t5_dc TableDataCell">54%</td>
    </tr>
    <tr class="t5_tr TableRow">
      <td class="t5_rhc">Panda</td>
      <td class="t5_dc TableDataCell">25%</td>
      <td class="t5_dc TableDataCell">14%</td>
      <td class="t5_dc TableDataCell">26%</td>
      <td class="t5_dc TableDataCell">31%</td>
      <td class="t5_dc TableDataCell">33%</td>
      <td class="t5_dc TableDataCell">40%</td>
      <td class="t5_dc TableDataCell">0%</td>
      <td class="t5_dc TableDataCell">0%</td>
      <td class="t5_dc TableDataCell">42%</td>
    </tr>
    <tr class="t5_tr TableRow">
      <td class="t5_rhc">VisaBoat</td>
      <td class="t5_dc TableDataCell">17%</td>
      <td class="t5_dc TableDataCell">10%</td>
      <td class="t5_dc TableDataCell">21%</td>
      <td class="t5_dc TableDataCell">11%</td>
      <td class="t5_dc TableDataCell">0%</td>
     ...

CSS

/* utils */

.hide,
.h{
    display:none;
}

/* main */

table.vis-heatmap{
    display:none;
}


table.vis-heatmap,
td.sharerank-heatmap,
div.sharerank-heatmap {
    width:100%
    border-collapse: collapse;
}

table.vis-heatmap th,
table.vis-heatmap td,
div.sharerank-heatmap table th,
div.sharerank-heatmap table td{
border:1px solid #fff;
    text-align:center;
    padding:10px;
}

table.vis-heatmap thead tr{
    height:60px;
}
table.vis-heatmap thead,
table.vis-heatmap td[scope=row],
div.sharerank-heatmap table thead,
div.sharerank-heatmap table td:nth-of-type(1){
    font-weight:bold;
}

body div.sharerank-heatmap table td:nth-of-type(1){
    color:#222121 !important;    
}

table.vis-heatmap th[scope=row],
div.sharerank-heatmap table td:nth-of-type(1){
    width:100px;
}

div.sharerank-heatmap table tbody td{
    width:60px;
    height:60px;
}

div.sharerank-heatmap table.sharerank-heatmap-legend  tbody td{
    width:10px;
}

.sharerank-heatmap td.TableDataCell{ /* DEBUG */
    Xbackground-color:#94cedf;
    Xcolor:#fff;
}

div.sharerank-heatmap table  td.low{/* 5,6 */
    color:#79c6e1;
    background-color:#79c6e1;
}

div.sharerank-heatmap table  td.lower{/* 3,4 */
    color:#94cedf;
    background-color:#94cedf;
}

div.sharerank-heatmap table tr td.lowest{ /* 1,2 */
    color:#d6f6ff;
    background-color:#d6f6ff;
}

div.sharerank-heatmap table  td.higher{/* 9,10 */
    color:#4792bf;
    background-color:#4792bf;
}

div.sharerank-heatmap table  td.high{/* 7,8 */
    color:#5da6cf;
    background-color:#5da6cf;
}
div.sharerank-heatmap table tbody tr td.highest{ /* 11,12 */
    color:#195c9c;
    background-color:#195c9c
}

JavaScript

$( document ).ready(function() {

function getColor(value){
            //value from 0 to 1
            var hue=((value+210)*0.75).toString(10);
            return ["hsl(",hue,",65%,59%)"].join("");
} 

// $('div.sharerank-heatmap table tr tbody td.TableDataCell').css("color","#ff0000");

function makeHeat(){

$('div.sharerank-heatmap table tbody tr td.TableDataCell').each(function() {
        
        var myCellData = parseInt($(this).text(), 10); 
        
    //$('div.sharerank-heatmap table tr tbody td.TableDataCell').css("color","#ff0000");

        if(myCellData <= 10){
            $(this).css("color",getColor(myCellData)).css("background-color",getColor(myCellData)).addClass("10");
        }else if(myCellData <= 20){
            $(this).css("color",getColor(myCellData)).css("background-color",getColor(myCellData)).addClass("20");
        }else if(myCellData <= 30){
            $(this).css("color",getColor(myCellData)).css("background-color",getColor(myCellData)).addClass("30");
        }else if(myCellData <= 40){
            $(this).css("color",getColor(myCellData)).css("background-color",getColor(myCellData)).addClass("40");
        }else if(myCellData <= 50){
            $(this).css("color",getColor(myCellData)).css("background-color",getColor(myCellData)).addClass("50");
        }else if(myCellData <= 60){
            $(this).css("color",getColor(myCellData)).css("background-color",getColor(myCellData)).addClass("60");
        }else if(myCellData <= 70){
            $(this).css("color",getColor(myCellData)).css("background-color",getColor(myCellData)).addClass("70");
        }else if(myCellData <= 80){
            $(this).css("color",getColor(myCellData)).css("background-color",getColor(myCellData)).addClass("80");
        }else if(myCellData <= 90){
            $(this).css("color",getColor(myCellData)).css("background-color",getColor(myCellData)).addClass("90");
        }else if(myCellData <= 100){
           ...