JSFiddle - React, Tailwind, and code Playground

by noobiecode

HTML

<div id="body">

CSS

rect {
		  fill: none;
		  stroke: #fff;
		}
		
		rect:hover{
			opacity: 0.5;
		}

		text {
			font-family:"Times New Roman",Times,serif;
			font-size: 12px;
		}

JavaScript

var pathJson = {
 "name": "Sample data",
 "children": [
        {
           "name": "Title 1", "size":1,
           "children": [
                    {
                     "name": "Title 1-1", "size":1,
                     "children": [
                        {"name": "1-1-1", "size": 1},
                        {"name": "1-1-2", "size": 1},
                        {"name": "1-1-3", "size": 1},
                        {"name": "1-1-4", "size": 1}
                      ]
                  },  
                  {
                     "name": "Title 1-2", "size":1,
                     "children": [
                        {"name": "1-2-1", "size": 1},
                        {"name": "1-2-2", "size": 1},
                        {"name": "1-2-3", "size": 1}
                      ]
                  },  
                  {
                     "name": "Title 1-3", "size":1,
                     "children": [
                        {"name": "1-3-1", "size": 1}
                      ]
                  }
               ]
        }
     ]
}

var w = 1280 - 80,
        h = 800 - 180,
        x = d3.scale.linear().range([0, w]),
        y = d3.scale.linear().range([0, h]),
        color = d3.scale.category10(),
        root,
        node;
          var headerHeight = 20;
    var headerColor = "#555555";
    var transitionDuration = 500;

        var treemap = d3.layout.treemap()
            .round(false)
            .size([w, h])
            .sticky(true)
            .padding([10, 0, 0, 0])
            .value(function(d) { return d.size; });

        var svg = d3.select("#body").append("div")
            .attr("class", "chart")
            .style("width", w + "px")
            .style("height", h + "px")
          .append("svg:svg")
            .attr("width", w)
            .attr("height", h)
          .append("svg:g")
            .attr("transform", "translate(.5,.5)");

        
          node = root = pathJson;
          
          var nodes = treemap.nodes(root)
...