sunburst d3

collapsible, 2 levels

by stefanu

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="container" style="width:350px;height:350px;border:1px solid red">

</div>

JavaScript

var data = {"children":[{"children":[{"size":12,"name":"În editare"},{"size":0,"name":"În validare"}],"name":"Clasa a V-a"},{"children":[{"size":9,"name":"În editare"},{"size":0,"name":"În validare"}],"name":"Clasa a VI-a"},{"children":[{"size":7,"name":"În editare"},{"size":0,"name":"În validare"}],"name":"Clasa a VII-a"},{"children":[{"size":5,"name":"În editare"},{"size":0,"name":"În validare"}],"name":"Clasa a VIII-a"}],"name":"grades","target":"campiomate-sunburst-canvas","width":350,"height":350};

partition = data => {
    const root = d3.hierarchy(data)
    .sum(d => d.size)
    .sort((a, b) => b.value - a.value);
    return d3.partition()
        .size([2 * Math.PI, root.height + 1])
    (root);
}


var color = d3.scaleOrdinal().range(d3.quantize(d3.interpolateRainbow, data.children.length + 1));
var format = d3.format(",d");

var width = 350;
var radius = width / 6;

var arc = d3.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
.padRadius(radius * 1.5)
.innerRadius(d => d.y0 * radius)
.outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))


const root = partition(data);

root.each(d => d.current = d);

// const svg = d3.select(DOM.svg(width, width))
const svg = d3.select("#container").append("svg")
.style("width", width)
.style("height", width)
.style("font", "10px sans-serif");

const g = svg.append("g")
.attr("transform", `translate(${width / 2},${width / 2})`);

const path = g.append("g")
.selectAll("path")
.data(root.descendants().slice(1))
.enter().append("path")
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0)
.attr("d", d => arc(d.current));

path.filter(d => d.children)
    .style("cursor", "pointer")
    .on("click", clicked);

path.append("title")
    .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);

const label =...