JSFiddle - React, Tailwind, and code Playground

by nancynancy

HTML

<head>
    <script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
    <svg></svg>
</body>

JavaScript

var nodeData = {
  "name": "TOPICS",
  "children": [{
    "name": "Topic A",
    "children": [{
      "name": "Sub A1",
      "size": 4
    }, {
      "name": "Sub A2",
      "size": 4
    }]
  }, {
    "name": "Topic B",
    "children": [{
      "name": "Sub B1",
      "size": 3
    }, {
      "name": "Sub B2",
      "size": 3
    }, {
      "name": "Sub B3",
      "size": 3
    }]
  }, {
    "name": "Topic C",
    "children": [{
      "name": "Sub A1",
      "size": 4
    }, {
      "name": "Sub A2",
      "size": 4
    }]
  }]
};

// Variables
var width = 300;
var height = 300;
var radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal().range(["#173BD0", "#00AD7F", "#FFAA00"]);

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

// Create primary <g> element
var g = d3.select('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

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

let 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)); });
    
 console.log(partition.nodes(nodeData))
 
         function getColorKey(d) {
            if (d.name == 'ALL') {
                return d.name;
            }
            while (d.parent && d.parent.name != 'ALL') {
                d = d.parent;
            }
            return d.name;
        }

    // Put it all together
g.selectAll('path')
  .data(partition.nodes(nodeData))
  .enter().append('path')
/*  .attr("display", function(d) {
  return d.depth ? null : "none";
  }) */
  .attr("d", arc)
  .style('stroke', '#fff')
  .style("fill", function(d) { return...