Public
Edited
Aug 16, 2023
3 forks
2 stars
Insert cell
Insert cell
Plot.plot({
height: 1080,
marginLeft: 100,
axis: null,
x: {domain: [0, 1]}, // see https://github.com/observablehq/plot/issues/1541
color: {domain: d3.range(10), unknown: "#ccc"},
marks: [
Plot.dot(miserables.nodes, {x: 0, y: "id", fill: "group", sort: {y: "fill"}}),
Plot.text(miserables.nodes, {x: 0, y: "id", text: "id", textAnchor: "end", dx: -6, fill: "group"}),
Plot.arrow(miserables.links, {x: 0, y1: "source", y2: "target", sweep: "-y", bend: 90, headLength: 0, stroke: samegroup, sort: samegroup, reverse: true})
]
})
Insert cell
samegroup = {
const groups = new Map(miserables.nodes.map((d) => [d.id, d.group]));
return ({source, target}) => {
source = groups.get(source);
target = groups.get(target);
return source === target ? source : null;
};
}
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