Public
Edited
Apr 14, 2024
md`The data for the Partition layout is made up.`
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, w, h])
.style("width", "100%")
.style("height", "auto");
const cell = svg.selectAll("g")
.data(partitionData.descendants())
.enter().append("g");
const color = d3.scaleOrdinal(d3.schemeCategory10)
cell.append("rect")
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
.attr("fill", d => color(d.depth));
cell.append("text")
.attr("x", d => d.x0 + 5)
.attr("y", d => d.y0 + 20)
.text(d => d.data.name)
.attr("fill", "black")
.style("font", "5px sans-serif");
return svg.node();
}
d3 = require("d3@7")
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.
