Published
Edited
Apr 10, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
height: 400,
marginTop: 20,
marginBottom: 20,
x: {
type: "point",
axis: "top",
tickSize: 0,
label: "",
tickFormat: (d) => `${d3.timeFormat("%A %p")(d)}\n ${d3.timeFormat("%m-%d-%y")(d)}`,
fontSize: 12, //doesn't work?
},
y: {
label: "",
},
marks: [
Plot.image(days.slice(0,5), {
x: "startTime",
y: null,
src: "icon",
height: 100,
dy: -100,
}),
Plot.text(days.slice(0,5), {
x: "startTime",
y: null,
text: "detailedForecast",
frameAnchor: "top",
fontSize: 12,
lineWidth: 9,
lineHeight: 1.2,
textAnchor: "start",
dx: -50,
dy: 150,
}),
]
})
Insert cell
Insert cell
Insert cell
forecast = await d3.json("https://api.weather.gov/gridpoints/HNX/55,101/forecast")
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