Public
Edited
Mar 17
Insert cell
Insert cell
chart = {
// Specify the chart’s dimensions.
const width = 928;
const height = 600;

// Create the container SVG.
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("style", "max-width: 100%; height: auto;");

simulation.restart();
// Append links.
const link = svg
.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.join("line");

// Append nodes.
const node = svg
.append("g")
.attr("fill", "#fff")
.attr("stroke", "#000")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("fill", (d) => (d.children ? null : "#000"))
.attr("stroke", (d) => (d.children ? null : "#fff"))
.attr("r", 3.5)
.call(drag(simulation));

node.append("title").text((d) => d.data.name);

simulation.on("tick", () => {
link
.attr("x1", (d) => d.source.x)
.attr("y1", (d) => d.source.y)
.attr("x2", (d) => d.target.x)
.attr("y2", (d) => d.target.y);

node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
});

invalidation.then(() => simulation.stop());

return svg.node();
}
Insert cell
Insert cell
simulation = d3
.forceSimulation(nodes)
.force(
"link",
d3
.forceLink(links)
.id((d) => d.id)
.distance(100)
.strength(1)
)
.force("charge", d3.forceManyBody().strength(-500))
.force("x", d3.forceX())
.force("y", d3.forceY())
.restart()
Insert cell
nodes = roots.descendants()
Insert cell
Insert cell
roots = d3.hierarchy(data)
Insert cell
Insert cell
import { Tooltip } from "@clhenrick/tooltip-component"
Insert cell

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.
Learn more