JSFiddle - React, Tailwind, and code Playground

by fwait

HTML

<script src="http://jstreemap.com/js/jquery.ui.treemap.js"></script>
<div id="treemap"></div>

CSS

#treemap {
  width: 400px;
  height:300px;
  background:cyan;
}

JavaScript

$("#treemap").treemap({
										    colorStops : [
        {"val":0,"color":"#48f"},
        {"val":0.3,"color":"#0f0"},
        {"val":1,"color":"#040"}
    ],
                    "nodeData": {
                        "id":"2fc414e2", "children":[
                            {"id":"node 1", "size":[.25], "color":[0.1]},
                            {"id":"node 2", "size":[.25], "color":[0.5]},
                            {"id":"node 3", "size":[.16667], "color":[0.3]},
                            {"id":"node 4", "size":[.125], "color":[0.4]},
                            {"id":"node 5", "size":[.083333], "color":[0.5]},
                            {"id":"node 6", "size":[.083333], "color":[0.6]},
                            {"id":"node 7", "size":[.041666667], "color":[0.7]}
                        ]
                    }
                });