Public
Edited
Apr 25, 2023
Insert cell
Insert cell
Insert cell
Insert cell
data_rawaapl = aapl

Insert cell
Plot.plot({
marks: [
Plot.areaY(aapl, {x: "Date", y: "Close"}),
Plot.ruleY([140])
]
})
Insert cell
data_rawaapl
X
Date
Y
High
Color
Size
Facet X
Facet Y
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
data_rawaapl
X
Date
Y
Low
Color
Volume
Size
Facet X
Facet Y
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
apple = aapl.slice(-120)
Insert cell
import {CandlestickChart} from "@d3/candlestick-chart"
Insert cell
chart = CandlestickChart(apple, {
date: d => d.Date,
high: d => d.High,
low: d => d.Low,
open: d => d.Open,
close: d => d.Close,
yLabel: "↑ Price ($)",
width,
height: 500
})
Insert cell
Plot.plot({
y: {
grid: true
},
color: {
domain: [-1, 0, 1],
range: ["#4daf4a", "#999999", "#e41a1c"]
},
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"
})
]
})
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