AAPL.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data
X
Date
Y
Close
Color
#ff5375
Size
—
Facet X
—
Facet Y
—
Mark
line
Type Chart, then Shift-Enter. Ctrl-space for more options.
data
X
Date
Y
Close
Color
#ff5375
Size
—
Facet X
—
Facet Y
—
Mark
area
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.auto(data, {
x: "Date",
y: "Close",
color: "#ff5375",
mark: "line"
}).plot()
Plot.plot({
marks: [Plot.ruleY([0]), Plot.lineY(data, { x: "Date", y: "Close" })]
})
Plot.plot({
x: {
grid: true
},
y: {
grid: true
},
marks: [
Plot.ruleY([0]),
Plot.lineY(data, {
x: "Date",
y: "Close",
stroke: "salmon"
})
]
})
Plot.plot({
x: {
grid: true
},
y: {
grid: true
},
marks: [
Plot.ruleY([0]),
Plot.lineY(data, {
x: "Date",
y: "Close",
stroke: "salmon"
}),
Plot.lineY(data, {
x: "Date",
y: (d) => d["Volume"] / 100_000_000,
stroke: "dodgerblue"
})
]
})
// Uncomment to activate
// `Close` is standardized for you.
// You should do the `Volume` yourself
data_standardized = aq
.from(data)
.derive({
CloseStandardized: (d) =>
(d.Close - op.mean(d.Close)) / op.stdev(d.Close) || 0
})
.derive({
VolumeStandardized: (d) =>
(d.Volume - op.mean(d.Volume)) / op.stdev(d.Volume) || 0
})
.objects()
Inputs.table(data_standardized)
Plot.plot({
x: {
grid: true
},
y: {
grid: true
},
marks: [
Plot.lineY(data_standardized, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon"
}),
Plot.lineY(data_standardized, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue"
})
]
})
viewof startYear_slider = Inputs.range([1985, 2023], {
label: "Start Year",
step: 1
})
startYear_slider
// To use copied code replace "data" with your own variable
aq
.from(data_standardized)
.filter((d) => d["Date"] > 1078145679826.4642)
.objects() // Uncomment to return an array of objects
data_standardized[0].Date.constructor.name
data_standardized[0].Date.getTime()
startYear_slider_asTimeObject = new Date(startYearFixed_slider, 1).getTime()
data_standerdized_filtered = aq
.from(data_standardized)
.filter(aq.escape((d) => d["Date"] > startYear_slider_asTimeObject))
.objects() // Uncomment to return an array of objects
viewof startYearFixed_slider = Inputs.range([1985, 2023], {
label: "Start Year",
step: 1
})
Plot.plot({
x: {
grid: true
},
y: {
grid: true
},
marks: [
Plot.lineY(data_standerdized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon"
}),
Plot.lineY(data_standerdized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue"
})
]
})
Plot.plot({
x: {
grid: true
},
y: {
grid: true
},
marks: [
Plot.lineY(data_standerdized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon"
}),
Plot.lineY(data_standerdized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step"
})
]
})
Plot.plot({
color: {
legend: true
},
x: {
grid: true
},
y: {
grid: true
},
marks: [
Plot.lineY(data_standerdized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon"
}),
Plot.lineY(data_standerdized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step"
})
]
})
Plot.plot({
color: {
legend: true
},
x: {
grid: true,
nice: true
},
y: {
grid: true,
nice: true,
label: "↑Z-Score"
},
marks: [
Plot.lineY(data_standerdized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon"
}),
Plot.lineY(data_standerdized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step"
})
]
})
// Uncomment to activate
import { Plot } from "@mkfreeman/plot-tooltip"
Plot.plot({
color: {
legend: true
},
x: {
grid: true,
nice: true
},
y: {
grid: true,
nice: true,
label: "↑Z-Score"
},
marks: [
Plot.lineY(data_standerdized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon",
title: "Close"
}),
Plot.lineY(data_standerdized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step",
title: "Volume"
})
]
})
// ... your code here
import {Wrangler, op} from "@observablehq/data-wrangler"
import {toc} from "@nebrius/indented-toc"
import {imageToDo} from "@clokman/student-blocks"
imageToDo
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.
