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

$.getJSON( "https://gist.githubusercontent.com/mbostock/4348373/raw/85f18ac90409caa5529b32156aa6e71cf985263f/flare.json", function( data ) {

			console.log(data);


			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 = g.append("g")
			.attr("pointer-events", "none")
			.attr("text-anchor", "middle")
			.style("user-select", "none")
			.selectAll("text")
			.data(root.descendants().slice(1))
			.enter().append("text")
			.attr("dy", "0.35em")
			.attr("fill-opacity", d =>...