Unlisted
Edited
Jun 7, 2023
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.lineY(aapl, {x: "Date", y: "Close", fy: d => (d.Date.getUTCDay() % 2) === 0}),
Plot.ruleX(aapl, {x: "Date", strokeOpacity: 0.1}),
Plot.ruleX(aapl, Plot.pointerX({x: "Date", stroke: "red"})), // 🌶️ never appears!
]
})
Insert cell
Insert cell
Plot.plot({
facet: {
data: aapl,
y: d => (d.Date.getUTCDay() % 2) === 0
},
marks: [
Plot.lineY(aapl, {x: "Date", y: "Close"}),
Plot.ruleX(aapl, {x: "Date", facet: false, strokeOpacity: 0.1}),
Plot.ruleX(aapl, Plot.pointerX({x: "Date", facet: false, stroke: "red"})), // 🌶️ never appears!
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.lineY(aapl, {x: "Date", y: "Close", fy: d => (d.Date.getUTCDay() % 2) === 0}),
Plot.ruleX(aapl, {x: "Date", fy: d => (d.Date.getUTCDay() % 2) === 0, strokeOpacity: 0.1}),
Plot.ruleX(aapl, Plot.pointerX({x: "Date", fy: d => (d.Date.getUTCDay() % 2) === 0, stroke: "red"})),
]
})
Insert cell
Insert cell
Plot.plot({
facet: {
data: aapl,
y: d => (d.Date.getUTCDay() % 2) === 0
},
marks: [
Plot.lineY(aapl, {x: "Date", y: "Close"}),
Plot.ruleX(aapl, {x: "Date", strokeOpacity: 0.1}),
Plot.ruleX(aapl, Plot.pointerX({x: "Date", stroke: "red"})),
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.lineY(aapl, {x: "Date", y: "Close"}),
Plot.ruleX(aapl, {x: "Date", strokeOpacity: 0.1}),
Plot.ruleX(aapl, Plot.pointerX({x: "Date", stroke: "red"})),
]
})
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