Designer, writer, and developer exploring how to tell more engaging stories with interactive, data-driven experiences.
chart = {
// Specify the dimensions of the chart.
const width = 928;
const height = width;
const margin = 1; // to avoid clipping the root circle stroke
const names = (d) => d["Name"];
// Specify the number format for values.
const format = d3.format(",d");
// Create the pack layout.
const pack = d3
.pack()
.size([width - margin * 2, height - margin * 2])
.padding(3);
// Compute the hierarchy from the (flat) data; expose the values
// for each node; lastly apply the pack layout.
const root = pack(d3.hierarchy({ children: data }).sum((d) => d.acres));
console.log(root)
console.log(root);
// Create the SVG container.
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-margin, -margin, width, height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;")
.attr("text-anchor", "middle");
// Place each (leaf) node according to the layout’s x and y values.
const node = svg
.append("g")
.selectAll()
.data(root.leaves())
.join("g")
.attr("transform", (d) => `translate(${d.x},${d.y})`);
// Add a title.
node.append("title").text((d) => `${d.data["Name"]}\n${format(d.value)}`);
// Add a filled circle.
node
.append("circle")
.attr("fill-opacity", 0.7)
.attr("r", (d) => d.r);
return Object.assign(svg.node());
}
minneapolisLakesData.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data = (await minneapolisLakes).filter(({ value }) => value !== null)
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.
