Public
Edited
Dec 4, 2022
1 fork
1 star
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.ruleX(pairs, { // first
x: (d, i) => i,
y1: ([a]) => a[0],
y2: ([a]) => a[1],
stroke: "steelblue",
strokeWidth
}),
Plot.ruleX(pairs, { // second
x: (d, i) => i,
y1: ([, b]) => b[0],
y2: ([, b]) => b[1],
stroke: "goldenrod",
strokeWidth
}),
Plot.ruleX(pairs, { // overlap
filter: overlap,
x: (d, i) => i,
y1: (d) => d.flat().sort()[1],
y2: (d) => d.flat().sort()[2],
stroke: "black",
strokeWidth
})
],
width: strokeWidth * pairs.length + 30,
marginLeft: 30,
marginRight: 0
})
Insert cell
strokeWidth = 2
Insert cell
part2 = pairs.filter(overlap)
Insert cell
overlap = ([[a1, a2], [b1, b2]]) =>
(b1 <= a1 && a1 <= b2) ||
(b1 <= a2 && a2 <= b2) ||
(a1 <= b1 && b1 <= a2) ||
(a1 <= b2 && b2 <= a2)
Insert cell
part1 = pairs.filter(
([[a1, a2], [b1, b2]]) => (b1 <= a1 && a2 <= b2) || (a1 <= b1 && b2 <= a2)
)
Insert cell
pairs = data
.trim()
.split("\n")
.map((l) => l.split(",").map((a) => a.split("-").map(Number)))
Insert cell
sample = `
2-4,6-8
2-3,4-5
5-7,7-9
2-8,3-7
6-6,4-6
2-6,4-8
`
Insert cell
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