Graphics Developer, Creative Coder, DataViz Cognoscenti
Plot.plot({
width,
grid: true,
x: {
type: "time"
},
y: {
label: "pm2.5 (µg/m³)",
nice: 7
},
marks: [
Plot.ruleY([0]),
Plot.lineY(
data.filter((d) => d.value > 0),
{
x: (d) => new Date(d.period.datetimeTo.utc),
y: "value",
z: "location",
opacity: 0.5,
title: (d) => {
return `${d.value} µg/m³ on ${d3.timeFormat(`%B%_d at %-I %p`)(
new Date(d.period.datetimeTo.utc)
)}\nStation ID: ${d.location}`;
},
tip: true
}
)
// Plot.text(
// data,
// Plot.selectLast({
// x: (d) => new Date(d.period.datetimeTo.utc),
// y: "value",
// z: "location",
// text: (d) => d.value,
// lineAnchor: "bottom",
// dy: -6,
// dx: 15
// })
// )
]
})
data = {
const date_from = new Date(`2023-06-05`);
const date_to = new Date(`2023-06-10`);
return Promise.all(
locations.map((location) => {
const url = new URL(
`https://api.openaq.org/v3/locations/${location}/measurements`
);
url.search = new URLSearchParams({
period_name: `hour`,
limit: 1000,
parameters_id: 2,
date_from: date_from.toISOString(),
date_to: date_to.toISOString()
});
return d3.json(url).then((data) => {
return data.results.map((d) => ({ ...d, location }));
});
})
).then((arr) => arr.flat(1));
}
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.
