Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Feb 9, 2019
8 forks
23 stars
chart = {
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", d => color(d.data.group));
return svg.node();
}
pack = () => d3.pack()
.size([width, height])
.padding(1)
(d3.hierarchy(data)
.sum(d => d.value))
data = ({
children: Array.from(
d3.group(
Array.from({length: n}, (_, i) => ({
group: Math.random() * m | 0,
value: -Math.log(Math.random())
})),
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.
