Published
Edited
Sep 7, 2020
3 forks
2 stars
{
const g = new dagreD3.graphlib.Graph().setGraph({})
g.setNode("A", { label: "Node A" })
g.setNode("B", { label: "Node B" })
g.setNode("C", { label: "Node C" })
g.setNode("D", { label: "Node D" })
g.setEdge("A", "B", { style: "stroke: #f00;" })
g.setEdge("A", "C", { style: "stroke: #0f0;" })
g.setEdge("B", "D", { style: "stroke: #00f;" })
g.setEdge("C", "D", { style: "stroke: #00f;" })
const render = new dagreD3.render()
const svg = d3.select("svg")
const svgInner = svg.select("g")
render(svgInner, g)
const centre = (svg.attr("width") - g.graph().width) / 2
svgInner.attr("transform", `translate(${centre}, 20)`)
svg.attr("height", g.graph().height + 40)
}
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.
