Public
Edited
Sep 11, 2023
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// see Terpstra-AristoxenusDiagrams.pdf page 8
// see https://observablehq.com/plot/marks/arrow

plotter =
({text = "name", scale = 1} = {}) => // settings
({tones, links}) => // data
Plot.plot({
marks: [
// Plot.ruleY([0, 1, .705, .606]),
Plot.ruleY([0]),
Plot.text(
toner(tones),
{
y: 0,
x: "id",
text,
// textAnchor: "end",
dy: +12
}),
Plot.text(
links,
{
x: ({source, target}) => (source + target) / 2,
y: ({source, target}) => .71 * Math.abs(source - target) / (tones.length - 1),
dy: 10,
text: ({source, target}) => Math.abs(source - target) * scale,
}
),
Plot.arrow(links, {y: 0, x1: "source", x2: "target", sweep: "-x", bend: 90, headLength: 0, reverse: true})
],
marginLeft: 18,
marginRight: 18,
marginBottom: 72,
height: 500,
axis: null,
y: {domain: [0, 1]}, // see https://github.com/observablehq/plot/issues/1541
})
Insert cell
settings = ({text, scale})
Insert cell
toner = (list) => list.map((name, id) => ({id, name}))
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