{
const width = 600,
height = 500;
const pack = d3
.pack()
.size([width, height])
.padding(options.padSize);
const hierarchy = d3.hierarchy(data).sum(d => d.value);
if (options.sortFlag == "Sorted") hierarchy.sort((a, b) => b.value - a.value);
const root = pack(hierarchy);
const svgNode = DOM.svg(width, height);
const svg = d3.select(svgNode);
svg
.append('g')
.selectAll("circle")
.data(root.leaves())
.join('circle')
.attr('transform', d => `translate(${d.x},${d.y})`)
.attr('r', d => d.r)
.style("fill", "steelblue")
.style("stroke", "none");
svg
.append("circle")
.datum(root)
.attr('transform', d => `translate(${d.x},${d.y})`)
.attr("r", d => d.r)
.style("fill", "none")
.style("stroke", "black");
return svgNode;
}
data = ({
name: "Root",
children: d3.range(N).map(i => ({ name: `${i}`, value: Math.random() * 1 }))
})
md`### External Libraries & Imports`
import { columns } from "@bcardiff/observable-columns"
import { slider, radio } from "@jashkenas/inputs"
d3 = require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
