JSFiddle - React, Tailwind, and code Playground

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)
	  .filter(function(d) {
	    return !d.children;
	  });

	var header = nodes.filter(function(d) {
	  return d.children;
	});

	var headerCells = svg.selectAll("g.cell.header")
	  .data(header, function(d) {
	    console.log(header);
	    return d.name;
	  });

	var headerEnterTransition = headerCells.enter()
	  .append("g")
	  .attr("class", "cell header")
	  .on("click", function(d) {
	    zoom(d);
	 ...