JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<p id="chart"></p>

CSS

#chart {
  width: 960px;
  height: 500px;
  background: #ddd;
}

text {
  pointer-events: none;
}

.grandparent text {
  font-weight: bold;
}

rect {
  fill: none;
  stroke: #fff;
}

rect.parent,
.grandparent rect {
  stroke-width: 2px;
}

.grandparent rect {
  fill: orange;
}

.grandparent:hover rect {
  fill: #ee9700;
}

.children rect.parent,
.grandparent rect {
  cursor: pointer;
}

.children rect.parent {
  fill: #bbb;
  fill-opacity: .5;
}

.children:hover rect.child {
  fill: #bbb;
}

JavaScript

var csvData = JSON.parse('[{"Ticker":"DRI ","Short Name":"DARDEN RESTAURAN","GICS Sector":"Consumer Discretionary","GICS Ind Name":"Hotels, Restaurants & Leisure","GICS Ind Grp Name":"Consumer Services","GICS SubInd Name":"Restaurants","Market Cap":"5820741632","Price:D-1":"44.080002","P/E":"22.690161","Total Return YTD":"-16.14983","Revenue T12M":"8091600128","EPS T12M":"2.19","Color":"-1"},{"Ticker":"GPS ","Short Name":"GAP INC/THE","GICS Sector":"Consumer Discretionary","GICS Ind Name":"Specialty Retail","GICS Ind Grp Name":"Retailing","GICS SubInd Name":"Apparel Retail","Market Cap":"17461483520","Price:D-1":"39.669998","P/E":"15.161768","Total Return YTD":"3.128036","Revenue T12M":"16193000192","EPS T12M":"2.65","Color":"1"}]');



var margin = {top: 20, right: 0, bottom: 0, left: 0},
    width = 960,
    height = 500 - margin.top - margin.bottom,
    formatNumber = d3.format(",d"),
    transitioning;

var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, height])
    .range([0, height]);

var treemap = d3.layout.treemap()
    .children(function(d, depth) { return depth ? null : d._children; })
    .sort(function(a, b) { return a.value - b.value; })
    .ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
    .round(false);

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.bottom + margin.top)
    .style("margin-left", -margin.left + "px")
    .style("margin.right", -margin.right + "px")
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .style("shape-rendering", "crispEdges");

var grandparent = svg.append("g")
    .attr("class", "grandparent");

grandparent.append("rect")
    .attr("y", -margin.top)
    .attr("width", width)
    .attr("height", margin.top);

grandparent.append("text")
    .attr("x", 6)
    .attr("y", 6 - margin.top)
    .attr("dy", ".75em");

var data =...