JSFiddle - React, Tailwind, and code Playground

by nancynancy

HTML

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

JavaScript

var nodeData = {
  "name": "TOPICS",
  "children": [{
      "name": "Topic A",
      "children": [{
        "name": "Sub A1",
        "children": [{
            "name": "Sub A1 kids1",
            "size": 4,
          },
          {
            "name": "Sub A1 kids2",
            "size": 4,
          }
        ],

      }, {
        "name": "Sub A2",
        "children": [{
            "name": "Sub A2 kids1",
            "size": 4,
          },
          {
            "name": "Sub A2 kids2",
            "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 = 200;
var height = 200;
var radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal(["#173BD0", "#00AD7F", "#FFAA00"]);

let x = d3.scaleLinear().range([0, 2 * Math.PI]);
let y = d3.scaleSqrt().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.partition()
  .size([2 * Math.PI, radius]);

// Find data root
var root = d3.hierarchy(nodeData)
  .sum(function(d) {
    return d.size
  });

// Size arcs
partition(root);
/* console.log({
  root
}) */

// tak the descendents of partitioned hierarchy of the data 
var arc = d3.arc()
  .startAngle(function(d) {
    return d.x0
  })
  .endAngle(function(d) {
    return d.x1
  })
  .innerRadius(function(d) {
    return d.y0
  })
  .outerRadius(function(d) {
    return d.y1
  });


function getColorKey(d) {
  if (d.data.name == 'TOPICS') {
    return d.data.name;
 ...