Senior Art Editor at Nature News in London.
chart = {
console.log(m);
const root = pack();
const svg = d3.select(DOM.svg(width, height));
if (grouped) svg.append("g")
.attr("fill", "none")
.attr("stroke", "#ccc")
.selectAll("circle")
.data(root.descendants().filter(d => d.height === 1))
.join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => d.r);
svg.append("g")
.selectAll("circle")
.data(root.leaves())
.join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => d.r)
.attr("fill", "#0000ff");
return svg.node();
}
pack = () => d3.pack()
.size([width, height])
.padding(1)
(d3.hierarchy(data)
.sum(d => d.value + 100))
// data = ({
// children: [
// {children: [
// {group: 1, value: 10}
// ]},
// {children: [
// {group: 2, value: 10},
// {group: 2, value: 10},
// {group: 2, value: 10}
// ]}
// ]
// })
data = ({
children: Array.from(
d3.group(
Array.from({length: n}, (_, i) => ({
group: Math.random() * m | 0,
value: 8
})),
d => d.group
),
([, children]) => ({children})
)
})
color = d3.scaleOrdinal(d3.range(m), d3.schemeCategory10)
height = 600
d3 = require("d3@5", "d3-array@2")
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.
