Public
Edited
Sep 17, 2023
1 fork
{
const svg = d3.create("svg").attr("width", 800).attr("height", 600);
// The container will be scaled
const container = svg.append("g").call((g) =>
g.append(() =>
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
fill: "species"
}).plot()
)
);
svg
.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "transparent")
.call(
d3
.zoom()
.on("zoom", ({ transform }) => container.attr("transform", transform))
);
// The foreignObject will accept pointer events
const fo = svg
.append("foreignObject")
.attr("width", 300)
.attr("height", 200)
.append("xhtml:div")
.style("background", "#feffff")
.style("overflow-y", "auto");
fo.append(() => Inputs.table(penguins));
return svg.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.
