Published
Edited
Jan 5, 2021
1 fork
md`# Circle Packing`
chart = {
var root = d3.hierarchy(data);
var packLayout = d3.pack();
packLayout.size([width, height]);
root.count();
root.sort((a, b) => b.value - a.value);
packLayout.padding(5);
//jedes element muss ein "value" feld haben bevor es der packLayout funktion übergeben werden kann
packLayout(root);
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height]);
const node = svg.selectAll("g")
.data(root.descendants().slice(1))
.enter()
.append('circle')
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; })
.attr('r', function(d) { return d.r; })
.attr("fill", d => d.children ? color(d.depth) : "white")
.attr('stroke', 'white');
return svg.node();
}
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.
