Public
Edited
Apr 7, 2023
chart = {
const root = pack(group);
const svg = d3
.select(DOM.svg(width, height))
.style("font", "10px sans-serif")
.style("width", "100%")
.style("height", "auto")
.style("overflow", "visible")
.attr("class", "chart-container");
svg
.append("g")
.attr("fill", "#ccc")
.selectAll("circle")
// .data(root.descendants().slice(1))
.data(root.leaves())
.join("circle")
.attr("transform", (d) => `translate(${d.x},${d.y})`)
.attr("r", (d) => d.r)
// .attr("fill-opacity", 0)
.attr("fill", (d) => (d.data[0] == "United States" ? "#A0CAE2" : "white"))
.attr("stroke", (d) =>
d.data[0] == "United States" ? "lightblue" : "grey"
)
.attr("stroke-width", 3);
// .append("title")
// .text(d => `${d.ancestors().map(d => d.data[0]).reverse().join("/")}\n${format(d.value)}`);
svg
.append("g")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.selectAll("text")
.data(root.leaves().filter((d) => d.r > 15))
.join("text")
.attr("transform", (d) => `translate(${d.x},${d.y}) scale(${d.r / 30})`)
.selectAll("tspan")
.data((d) => (d.data[0] + "").split(/\s+/g))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
.text((d) => d);
// const label = svg.append("g")
// .style("font", "10px sans-serif")
// .attr("pointer-events", "none")
// .attr("text-anchor", "middle")
// .selectAll("text")
// .data(root.descendants())
// .join("text")
// .style("fill-opacity", d => d.parent === root ? 1 : 0)
// .style("display", d => d.parent === root ? "inline" : "none")
// .text(d => d.data[0]);
return svg.node();
}
pack = d3.pack()
.size([width, height])
.padding(8)
root = pack(group)
root.leaves()
root.descendants()
group = d3.hierarchy(d3.rollup(data_no_group, s => s.length, d => d.type, d => d.country))
.sum(d => d[1])
// .sort((a, b) => d3.descending(a.value, b.value))
dateParser = d3.utcParse("%m/%d/%Y")
date = "05/09/2021"
dateParser(date)
data_no_group
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
