The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Mar 15, 2022
3 forks
15 stars
Plot.plot({
inset: 6,
width: 960,
grid: true,
y: {
label: "↑ Apple stock price ($)"
},
color,
marks: [
Plot.ruleX(aapl, {
x: "Date",
y1: "Low",
y2: "High"
}),
Plot.ruleX(aapl, {
x: "Date",
y1: "Open",
y2: "Close",
stroke: (d) => Math.sign(d.Close - d.Open),
strokeWidth: 4,
strokeLinecap: "round"
}),
]
})
color = ({ domain: [-1, 0, 1], range: ["#e41a1c", "#000000", "#4daf4a"] })
Plot.plot({
inset: 6,
width: 960,
y: {
label: "↑ Apple stock price ($)"
},
color,
marks: [
Plot.ruleY(aapl, Plot.selectFirst({
y: d => d.Open,
stroke: 'grey',
strokeDasharray: "3,2",
})),
Plot.ruleX(aapl, {
x: "Date",
y1: "Low",
y2: "High"
}),
Plot.ruleX(aapl, {
x: "Date",
y1: "Open",
y2: "Close",
stroke: (d) => Math.sign(d.Close - d.Open),
strokeWidth: 4,
strokeLinecap: "round"
}),
]
})
Plot.plot({
width: 960,
inset: 6,
x: {
// week days
domain: d3.utcDays(...d3.extent(aapl, (d) => d.Date))
.filter((d) => d.getUTCDay() > 0 && d.getUTCDay() < 6),
// Monday ticks
ticks: d3.utcMondays(...d3.extent(aapl, (d) => d.Date)),
tickFormat: "%-m/%-d",
label: null
},
y: { label: "↑ Apple stock price ($)", grid: true },
color,
marks: [
Plot.ruleX(aapl, { x: "Date", y1: "Low", y2: "High" }),
Plot.ruleX(aapl, {
x: "Date",
y1: "Open",
y2: "Close",
stroke: (d) => Math.sign(d.Close - d.Open),
strokeWidth: 4,
strokeLinecap: "round"
})
]
})
Plot.plot({
inset: 6,
width: 960,
height: 280,
y: { label: "Apple stock price ($): Daily Difference between Open & Close" },
color: {
domain: [-1, 0, 1],
range: ["#e41a1c", "#000000", "#4daf4a"]
},
marks: [
Plot.ruleY([0]),
Plot.ruleX(aapl, {
x: "Date",
y1: (d) => d.Low - d.Open, // instead of starting the rule at the "Low" value, this function now calculates the difference between "Low" and "Open" for each datapoint.
y2: (d) => d.High - d.Open
}),
Plot.ruleX(aapl, {
x: "Date",
y1: 0,
y2: (d) => d.Close - d.Open,
stroke: (d) => Math.sign(d.Close - d.Open),
strokeWidth: 4,
strokeLinecap: "round"
})
]
})
aapl = FileAttachment("AAPL@1.csv").csv({typed: true})
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.
