Public
Edited
Mar 20, 2024
Insert cell
Insert cell
Insert cell
Plot.plot({
marginBottom: 60,
// height: 100,
// x: "date",

marks: [
Plot.axisX(data,{
x: "date",
dy: 0,
tickPadding: 6,
fontSize: 12,
ticks: 10,
tickFormat: (d) => d.date.getDate() + 1
}),
Plot.axisX(
[
new Date("2024-03-13"),
new Date("2024-03-15")
],
{
dy: 18,
textAnchor: "middle",
ticks: [
new Date("2024-03-13"),
new Date("2024-03-15")
],
tickFormat: (d) => formatDay(d),
color: "slategrey"
}),
]
})
Insert cell
formatDay = (dateString) => {
const date = new Date(dateString);
console.log('date', dateString)
return Plot.formatMonth("de-DE", "short")(dateString.getMonth())
// return "November";
}
Insert cell
Insert cell
Insert cell
Insert cell
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