The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
May 12, 2023
5 forks
4 stars
Plot.plot({
inset: 60,
aspectRatio: 1,
axis: null,
marks: [
Plot.dot(nodes, {r: 40}),
Plot.arrow(edges, {
x1: ([[x1]]) => x1,
y1: ([[, y1]]) => y1,
x2: ([, [x2]]) => x2,
y2: ([, [, y2]]) => y2,
bend: true,
strokeWidth: ([,, value]) => value,
strokeLinejoin: "miter",
headLength: 24,
inset: 48
}),
Plot.text(nodes, {text: ["A", "B", "C"], dy: 12}),
Plot.text(edges, {
x: ([[x1, y1], [x2, y2]]) => (x1 + x2) / 2 + (y1 - y2) * 0.15,
y: ([[x1, y1], [x2, y2]]) => (y1 + y2) / 2 - (x1 - x2) * 0.15,
text: ([,, value]) => value
})
]
})
matrix = [[3, 2, 5], [1, 7, 2], [1, 1, 8]]
nodes = matrix.map((m, i) => d3.pointRadial(((2 - i) * 2 * Math.PI) / matrix.length, 100))
edges = matrix.flatMap((m, i) => m.map((value, j) => ([nodes[i], nodes[j], value])))
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.
