JSFiddle - React, Tailwind, and code Playground

by turaaa

HTML

<div id="demo-div"></div>

CSS

.treemap-node {
  box-sizing: border-box;
  border: 1px solid #fff;
  padding: 0.5em;
  overflow: hidden;
  color: #fff;
  text-shadow: 1px 1px #333;
}
.treemap-legend {
  width: 500px;
  padding: 0 1em;
  box-sizing: border-box;
  border: 1px solid #fff;
  overflow: hidden;
  color: #fff;
  text-shadow: 1px 1px #333;
  background-image: -webkit-linear-gradient(left, #93C 0%, cyan 20%, lime 40%, yellow 60%, orange 80%, red 100%);
}
.treemap-legend-end {
  float: right;
}

JavaScript

// http://rexmac.com/projects/jquery//treemap/



(function(e,t,r,n){"use strict";function a(e,t,r,n){this.x=e,this.y=t,this.width=r,this.height=n}a.prototype.style=function(){return{top:this.y,left:this.x,width:this.width,height:this.height}};var s,i={init:function(t){return s=e.extend({},e.fn.treemap.defaults,t),this.each(function(){var t,r,i,l,o,d,u,g,b,p,f,c=e(this),m=c.data("treemap");if(!m&&(s.data===n&&c.is("ul")&&(s.data=[],c.children().each(function(){var t=e(this);s.data.push({label:t.html(),value:parseInt(t.attr("value"),10)})})),n!==s.data)){for(t=e("<div/>").addClass("treemap").css("position","relative"),t.css({width:s.width,height:s.height}),r=new a(0,0,t.width(),t.height()),i=JSON.parse(JSON.stringify(s.data)),i.sort(function(e,t){return t.value-e.value}),h.tessellate(i,r),p=[h.hex2hsb(s.colors[0]),h.hex2hsb(s.colors[1])],l=0,o=i.length,g=i[o-1].value,b=i[0].value;o>l;++l)d=i[l],u=e("<div/>").addClass("treemap-node"),d.id&&u.attr("id",d.id),d["class"]&&u.addClass(d["class"]),u.html(d.label),u.data("value",d.value),u.css(e.extend(d.bounds.style(),{position:"absolute",backgroundColor:"#"+h.rgb2hex(h.hsb2rgb(h.lerpHsb(d.value,b,p[0],p[1])))})),u.appendTo(t);c.is("ul")?c.after(t).hide():t.appendTo(c),s.legend&&(f=e("<div/>").addClass("treemap-legend"),f.append(e("<span/>").addClass("treemap-legend-begin").text(s.legendLabels[0])),f.append(e("<span/>").addClass("treemap-legend-end").text(s.legendLabels[1])),"top"===s.legendPosition?f.insertBefore(t):f.insertAfter(t)),c.data("treemap",{treemap:t,legend:f})}})},destroy:function(){return this.each(function(){var t=e(this),r=t.data("treemap");r&&(r.legend&&r.legend.remove(),r.treemap.remove(),t.removeData("treemap"),t.is("ul")&&t.show())})}},h={tessellate:function(e,t){if(0!==e.length){if(1===e.length)return e[0].bounds=t,n;var...