Published
Edited
Mar 3, 2020
{
let pack = data => d3.pack()
.size([width / 2, 400])
.padding(0)
(d3.hierarchy({children: data})
.sum(d => d))
const root = pack(rand);
const svg_hex = d3.create("svg")
.attr("viewBox", [0, 0, width, 400])
const container = svg_hex.append("g")
.attr("transform", `translate(${width / 4}, 0)`);
const leaf = container.selectAll("g")
.data(root.leaves())
.enter().append("g")
.attr("transform", d => {
return `translate(${d.x},${d.y})`
});
leaf.append("g")
.append("path")
.attr("d", d => `M${0},${0}${hex(d.r, true)}`)
.style("fill", "#B7C7EF")
.style("stroke", "#A7BBEC")
.style("stroke-width", 2);
return svg_hex.node();
}
{
let pack = data => d3.pack()
.size([width / 2, 400])
.padding(0)
(d3.hierarchy({children: data})
.sum(d => d))
const root = pack(uniform);
const svg_hex = d3.create("svg")
.attr("viewBox", [0, 0, width, 400])
const container = svg_hex.append("g")
.attr("transform", `translate(${width / 4}, 0)`);
const leaf = container.selectAll("g")
.data(root.leaves())
.enter().append("g")
.attr("transform", d => {
return `translate(${d.x + 1},${d.y + 1})`
});
leaf.append("g")
.append("path")
.attr("d", d => `M${0},${0}${hex(d.r, false)}`)
.style("fill", "#B7C7EF")
.style("stroke", "#A7BBEC")
.style("stroke-width", 4);
return svg_hex.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.
