JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <label><input type="radio" name="mode" value="size"> Size</label>
  <label><input type="radio" name="mode" value="count" checked> Count</label>
</form>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 700px;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

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

JavaScript

var width = 960,
    height = 700,
    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.category20c();

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

var partition = d3.layout.partition()
    .sort(null)
    .value(function(d) { return 1; });

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)); });

// Keep track of the node that is currently being displayed as the root.
var node;

	var root =  [{"name":"Subject","children":[{"name":"Health","children":[{"name":"Thomson", "children":[ {"name":"1","colour":"#ebd3e7"}]}, {"name":"Vivek", "children":[ {"name":"2","colour":"#cbe9eb"}]}, {"name":"Kora", "children":[ {"name":"2","colour":"#94a9b9"}]}]}, {"name":"Science","children":[{"name":"Thomson", "children":[ {"name":"1","colour":"#ebd3e7"}]}, {"name":"Vivek", "children":[ {"name":"2","colour":"#cbe9eb"}]},{"name":"Kora", "children":[ {"name":"2","colour":"#94a9b9"}]}]}]}] ;

  node = root;
  var nodes = partition.nodes(root)
//	.filter(function(d) {
//		return (d.dx > 0.005); // 0.001 radians = 0.05 degrees
//     })
    ;
	 
  var path = svg.datum(root).selectAll("path")
      .data(nodes)
    .enter().append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
      .on("click", click)
      .each(stash);

  d3.selectAll("input").on("change", function change() {
    var value = this.value === "count"
        ? function() { return 1; }
        : function(d) { return...