JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

CSS

path {
  stroke: #fff;
  fill-rule: evenodd;
}

JavaScript

var initItems = {

  "name": "Root",
  "children": [{
    "name": "A1",
    "children": [{
      "name": "B1",
      "size": 30
    }, {
      "name": "B2",
      "size": 40
    }, {
      "name": "B3",
      "children": [{
        "name": "C1",
        "size": 10
      }, {
        "name": "C2",
        "size": 15
      }]
    }]
  }, {
    "name": "A2",
    "children": [{
      "name": "B4",
      "size": 40
    }, {
      "name": "B5",
      "size": 30
    }, {
      "name": "B6",
      "size": 10
    }]
  }, {
    "name": "A3",
    "children": [{
        "name": "B7",
        "size": 50
      }, {
        "name": "B8",
        "size": 15
      }

    ]
  }]
}

var newItems = {
  "name": "Root",
  "children": [{
    "name": "A2",
    "children": [{
      "name": "B4",
      "size": 40
    }, {
      "name": "B5",
      "size": 30
    }, {
      "name": "B6",
      "size": 10
    }]
  }, {
    "name": "A3",
    "children": [{
        "name": "B7",
        "size": 50
      }, {
        "name": "B8",
        "size": 15
      }

    ]
  }]
}

var width = 500,
  height = 500,
  radius = Math.min(width, height) / 2;

var x = d3.scale.linear()
  .range([0, 2 * Math.PI]);

var y = d3.scale.sqrt()
  .range([0, radius]);

var color = d3.scale.category10();

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ") rotate(-90 0 0)");

var partition = d3.layout.partition()
  .value(function(d) {
    return d.size;
  });

var arc = d3.svg.arc()
  .startAngle(function(d) {
    return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
  })
  .endAngle(function(d) {
    return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
  })
  .innerRadius(function(d) {
    return Math.max(0, y(d.y));
  })
  .outerRadius(function(d) {
    return Math.max(0, y(d.y + d.dy));
  });

//d3.json("/d/4063550/flare.json", function(error, root) {
var root = initItems;

var g =...