Public
Edited
Apr 5
1 star
Plot.plot({
height: 250,
y: { inset: 20 },
color: { domain: [true, false], range: ["lightblue", "#FFD580"] },
marks: [
Plot.rectX(
data,
Plot.binX(
{
x1: "min",
x2: "max",
// This compares the last day of last week with the last day of this week:
fill: (w) => data[w[0] - 1]?.Close < data[w.at(-1)].Close
},
{
x: "Date", // bins on date
interval: "week",
x1: "Date", // for min
x2: "Date", // for max
fill: (_, i) => i
}
)
),
Plot.lineY(data, {
x: "Date",
y: "Close",
z: (d) => d3.utcWeek(d.Date), // Group by week to create the broken line
marker: true
})
]
})
data = aapl.slice(198, 300) // this dataset has *Date* and *Close*
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.
