JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<!--sample d3-->
<div id="breadcrumb"></div>
<div id="icicle"></div>

CSS

rect {
  stroke: black;
}

JavaScript

var width = 960,
    height = 500;

var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([0, height]);

var color = d3.scaleOrdinal(d3.schemeCategory20c);

var vis = d3.select('#icicle').append("svg")
    .attr("width", width)
    .attr("height", height)

var partition = d3.partition()
    .size([width, height])
    .padding(0)
    .round(true);

// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = {
  w: 150, h: 30, s: 3, t: 10
};

var rect = vis.selectAll("rect");
var fo = vis.selectAll("foreignObject");
var totalSize=0;

d3.json("https://raw.githubusercontent.com/ssethubalan/json-test/master/data.json", function(error, root) {
  if (error) throw error;

  root = d3.hierarchy(d3.entries(root)[0], function(d) {
      return d3.entries(d.value)
    })
    .sum(function(d) { return d.value })
    .sort(function(a, b) { return b.value - a.value; });

  partition(root);

  //add breadcrumb
  initializeBreadcrumbTrail();
  var percentage = 100;
      var percentageString = percentage + "%";

      d3.select("#percentage")
          .text(percentageString);

      d3.select("#explanation")
          .style("visibility", "");

      var sequenceArray = root.ancestors().reverse();
      //sequenceArray.shift(); // remove root node from the array
      updateBreadcrumbs(sequenceArray, percentageString);

  rect = rect
      .data(root.descendants())
    .enter().append("rect")
      .attr("x", function(d) { return d.x0; })
      .attr("y", function(d) { return d.y0; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .attr("height", function(d) { return d.y1 - d.y0; })
      .attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); })
      .on("click", clicked);

    fo = fo
        .data(root.descendants())
        .enter().append("foreignObject")
      .attr("x", function(d) { return d.x0; })
      .attr("y", function(d) { return d.y0; })
      .attr("width", function(d) {...