Plot.plot({
x: {
domain: [new Date("2000-10-01"), new Date("2001-04-30")],
// map all dates to 2000 or 2001 by removing n * 365.24 days; Feb 29 will not create a gap
transform: (d) => d3.utcDay.offset(d, ((d.getUTCMonth() >= 9 ? 2000 : 2001) - d.getUTCFullYear()) * 365.24),
tickFormat: "%b",
line: true
},
y: { nice: true, grid: true, zero: true },
marks: [
Plot.line(tidy_data, {
x: "date",
y: "accumulated_snowfall",
stroke: "season", // z separates the lines
})
]
})
station_call_params = ({
sid: selected_valid_station[0].sids[0],
sdate: selected_valid_station[0].valid_daterange[0][0],
edate: selected_valid_station[0].valid_daterange[0][1],
elems: [
{
name: "snow",
interval: "dly",
duration: "std",
season_start: [10, 1],
reduce: {
reduce: "sum",
add: "date"
}
}
],
meta: "valid_daterange,name,ll,sids"
})
data = fetch(`${api_url}/StnData?params=${JSON.stringify(station_call_params)}`)
.then((response) => response.json())
station_metadata = fetch(
`${api_url}/StnMeta?params=${JSON.stringify(mn_station_params)}`
).then((response) => response.json())
.then(data => data.meta.sort((a, b) => {
let nameA = a.name.toUpperCase(); // convert name to uppercase for consistent comparison
let nameB = b.name.toUpperCase(); // convert name to uppercase for consistent comparison
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
}));
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.
