Senior Art Editor at Nature News in London.
Public
Edited
Dec 15, 2023
data = {
const csv = await FileAttachment("data.csv").csv({ typed: true });
const data = csv.map((d) => {
const date = new Date(d.date);
return {
...d,
date
};
});
return data;
}
d3.extent(data, (d) => d.delivered)
d3.extent(data, (d) => d.produced)
key = [
{ date: new Date("11/01/2022"), value: 0.1 },
{ date: new Date("11/01/2022"), value: 1 },
{ date: new Date("11/01/2022"), value: 2 },
{ date: new Date("11/01/2022"), value: 3 },
{ date: new Date("11/01/2022"), value: 4 }
]
Plot.plot({
y: { grid: true, domain: [new Date("01/01/2024"), new Date("11/01/2022")] },
r: { range: [0, 30], domain: [0, 4] },
marks: [
Plot.ruleX([0]),
Plot.dot(key, {
y: "date",
x: 0,
stroke: "#000",
strokeWidth: 1,
r: "value"
}),
Plot.dot(data, {
y: "date",
x: 0,
stroke: "none",
fill: "#000",
r: 1.5
}),
Plot.dot(data, {
y: "date",
x: 0,
stroke: "#36a9e1",
strokeWidth: 1,
r: "delivered"
}),
Plot.dot(data, {
y: "date",
x: 0,
stroke: "#eb5b25",
strokeWidth: 1,
r: "produced"
}),
Plot.text(data, {
y: "date",
x: 0,
dx: 100,
textAnchor: "start",
text: "name"
})
]
})
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.
