JSFiddle - React, Tailwind, and code Playground

by sventies

HTML

<div id="viz" style="background-color: lightblue;"></div>

JavaScript

var dataset = {className:"root", children:[
    {name:"subtree-1",  packageName:'aa', value:20},
    {name:"subtree-2",  packageName:'aa', value:40},
    {name:"subtree-3", packageName:'bb', value: 80},
    {name:"subtree-4", packageName:'bb', value: 100},
    {name:"subtree-4", packageName:'bb', value: 50},
    {name:"subtree-4", packageName:'bb', value: 10},
    {name:"subtree-4", packageName:'bb', value: 20},
    {name:"subtree-4", packageName:'bb', value: 30},
    {name:"subtree-4", packageName:'bb', value: 10},
    {name:"subtree-4", packageName:'bb', value: 20},
    {name:"subtree-4", packageName:'bb', value: 10},
]};

var width = 600, height = 300;
var pack = d3.layout.pack()
    .sort(null)
    .size([width, height]);

var container = d3.select("#viz").append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "container")

var node = container.selectAll("g.node")
    .data(pack.nodes(dataset))
    .enter().append("svg:g")
        .attr("class", "node")
        .attr("transform", function(d) {
        		if (d.className === "root") {
            console.log(d)
            return "translate(" + d.x + "," + d.y + ")scale(1,1)";
            }
            return "translate(" + d.x + "," + d.y + ")"; });

node.append("svg:circle")
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return d.children ? 'red' : 'orange'; })