JSFiddle - React, Tailwind, and code Playground

by Mike Rawling

HTML

<script src="https://rawgithub.com/DLarsen/jquery-hottie/master/jquery.hottie.js"></script>
<h3 class="FileterLabel">Emotional intensity illustration</h3>

<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">
  <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...

CSS

/* 
ul { margin-bottom: 10px; }
table { margin: 10px; }
td { padding: 4px; }
*/

/* utils */

.hide,
.h{
    display:none;
}
body {
    font-family:"Trebuchet MS", Ubuntu;
    text-align:center;
}

/* main */

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

div.sharerank-heatmap table td.TableHeaderLines{
  text-align: left;
  font-weight:bold;
  font-size:1.3em;
}

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;
}

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:40px;
    height:40px;
}

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

JavaScript

$(".sharerank-heatmap td.TableDataCell-SPLIT").hottie({
        colorArray : [ 
            "#066581", // highest value
            "#0BBBEF",
            "#00E0FF"  // lowest value
            // add as many colors as you like...
        ]
    });
    $(".sharerank-heatmap td.TableDataCell").hottie({
            colorArray : [ 
                "#915004", // highest value
                "#ff9900",
                "#FFA507"  // lowest value
                // add as many colors as you like...
            ]
        });