Plot.plot({
marginTop: 20,
marginBottom: 35,
marginLeft: 75,
marginRight: 80,
x: {
domain: quarters,
tickFormat: (d) => d.replace(/ \d\d/, "."),
label: null
},
y: {
axis: null,
domain: [9.5, 1]
},
color: {
domain: d3
.groupSort(
data,
(v) => v[0].profit,
(d) => d.territory
)
.reverse()
},
marks: [
bumpMarks(data, {
x: "quarter",
z: "territory",
order: "profit",
reverse: true
})
]
})
function bumpMarks(data, { r = 3, curve = "bump-x", tip, ...options }) {
options = Plot.stackY2(options);
return Plot.marks(
Plot.line(data, { ...options, tip, stroke: options.z, curve, fill: null }),
Plot.dot(data, { ...options, fill: options.z, r }),
Plot.text(data, { fill: options.z, dy: -9, ...options, text: options.y }),
Plot.text(
data,
Plot.selectFirst({
...options,
text: options.z,
dx: -(5 + (r || options.strokeWidth / 2)),
textAnchor: "end",
fill: "currentColor"
})
),
Plot.text(
data,
Plot.selectLast({
...options,
text: options.z,
dx: 5 + (r || options.strokeWidth / 2),
textAnchor: "start",
fill: "currentColor"
})
)
);
}
import {data} from "@analyzer2004/bump-chart"
quarters = new Set(data.map(d => d.quarter))
Plot.plot({
marginTop: 20,
marginBottom: 35,
marginLeft: 75,
marginRight: 80,
x: {
domain: quarters,
tickFormat: (d) => d.replace(/ \d\d/, "."),
label: null,
grid: true
},
y: {
axis: null,
domain: [9.5, 1]
},
color: {
domain: d3
.groupSort(
data,
(v) => v[0].profit,
(d) => d.territory
)
.reverse()
},
marks: [
bumpMarks(data, {
x: "quarter",
z: "territory",
order: "profit",
reverse: true,
curve: "linear",
r: 12,
dy: ".35em",
fill: "white"
})
]
})
Plot.plot({
marginTop: 20,
marginBottom: 35,
marginLeft: 75,
marginRight: 80,
x: {
domain: quarters,
tickFormat: (d) => d.replace(/ \d\d/, "."),
label: null,
grid: true
},
y: {
axis: null,
domain: [9.5, 1]
},
color: {
domain: d3
.groupSort(
data,
(v) => v[0].profit,
(d) => d.territory
)
.reverse()
},
marks: [
bumpMarks(data, {
x: "quarter",
z: "territory",
order: "profit",
reverse: true,
curve: "linear",
strokeWidth: 24,
strokeLinejoin: "round",
strokeLinecap: "round",
r: 0,
dy: ".35em",
fill: "white"
})
]
})
Inputs.table(data)
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.
