Public
Edited
Apr 10, 2024
1 star
bumpChart(data)
bumpChart = () => {
const accessors = {
x: (d) => d.date,
z: (d) => d.campaign,
y: (d) => d.rankByDate
};
const [startDate, endDate] = d3.extent(Plot.valueof(data, accessors.x));
return Plot.plot({
x: {
interval: "month"
},
y: {
axis: null,
insetBottom: 25,
insetTop: 25,
reverse: true
},
marks: [
Plot.line(data, {
...accessors,
x: (d) => d.date,
y: (d) => d.rankByDate,
stroke: accessors.z,
curve: "bump-x",
fill: null,
strokeWidth: 5
}),
Plot.dot(data, {
...accessors,
filter: (d) => d.rankByDate < 5,
fill: accessors.z,
r: 10
}),
Plot.text(data, {
...accessors,
fill: "black",
text: accessors.y
})
]
});
}
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.
