Public
Edited
Nov 1, 2024
Plot.plot({
width: 1200, height: 500,
color: { scheme: "tableau10", legend: false },
x: ({domain: [new Date(2023,9,31,17,0), new Date(2023,9,31,20,30)], ticks: d3.timeMinute.every(30), tickFormat: fmtTime}),
y: ({domain: [0, 130]} ),
marks: [
Plot.ruleY([0]),
Plot.lineY(data, {x: "Time", y: "Total", z: "Year", stroke: "Year", strokeWidth: 3, curve: "step-after"}),
Plot.tip(data, Plot.pointer(
{x: "Time", y: "Total", title: d => [d.Year, `${d.Total} kids`, `${fmtTime(d.Time)}pm`].join("\n")}
)),
Plot.axisY({anchor: "left", label: null}),
Plot.axisY({anchor: "right", label: "Total", labelAnchor: "top"}),
Plot.gridY(),
Plot.textX(datalabels, {x: "Time", y: "Total", text: d => `${d.Total}`, dy: -8, fontSize: 14}),
Plot.arrow(arrows, {x1: "x1", y1: "y1", x2: "x2", y2: "y2", bend: true}),
Plot.text(arrows, {x: "x1", y: "y1", text: "Year", fill: "blue", stroke: "white", fontSize: 14}),
]
})
arrows = [
{Year: "2019", x1: new Date(2023,9,31,19,16), x2: new Date(2023,9,31,19,16), y1: 30, y2: 57},
{Year: "2021", x1: new Date(2023,9,31,18,30), x2: new Date(2023,9,31,18,45), y1: 100, y2: 91},
{Year: "2022", x1: new Date(2023,9,31,19,40), x2: new Date(2023,9,31,19,40), y1: 125, y2: 113},
{Year: "2023", x1: new Date(2023,9,31,19,24), x2: new Date(2023,9,31,19,24), y1: 75, y2: 89},
{Year: "2024", x1: new Date(2023,9,31,19,50), x2: new Date(2023,9,31,19,50), y1: 90, y2: 100},
]
Halloween@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data = rawdata.map(d => {
d.Timestamp = d.Time;
let [hours, minutes] = d.Time.split(":");
d.Time = new Date(2023, 9, 31, hours, minutes);
return d
})
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.
