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({
y: {
grid: true
},
x: {
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
aq.from(data_standardized)
.filter(d => d["Date"] > 1078145679826.4642)
// .objects() // Uncomment to return an array of objects
data_standardized[0].Date.constructor.name
new Date (startYear_slider, 1).getTime()
viewof startYearFixed_slider = Inputs.range([1985, 2023], {label: "Start Year", step: 1})
starYear_slider_asTimeObject = new Date(startYearFixed_slider, 1).getTime()
data_standardized_filtered=aq.from(data_standardized)
.filter( aq.escape(d => d["Date"] > starYear_slider_asTimeObject))
.objects()
Plot.plot({
x: {
grid: true
},
y: {
grid: true
},
marks: [
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon"
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue"
})
]
})
Plot.plot({
x: {
grid: true
},
y: {
grid: true
},
marks: [
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon"
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step"
})
]
})
Plot.legend({
color: {
type: "categorical",
domain: ["Close", 'Volume'],
range: ["salmon", "dodgerblue"]
}
})
Plot.plot({
x: {
grid: true,
nice: true
},
y: {
grid: true,
nice: true,
label: "Z-Score"
},
marks: [
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon"
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step"
})
]
})
import {Plot} from "@mkfreeman/plot-tooltip"
Plot.plot({
x: {
grid: true,
nice: true
},
y: {
grid: true,
nice: true,
label: "Z-Score"
},
marks: [
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon",
title: "Close"
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step",
title: d => d3.format(".4s")(d["Volume"])
})
]
})
Plot.plot({
x: {
grid: true,
nice: true
},
y: {
grid: true,
nice: true,
label: "Z-Score"
},
marks: [
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon",
title: (d) => `Close: ${d3.format(".4s")(d["Close"])}
Open: ${d3.format(".4s")(d["Open"])}
High: ${d3.format(".4s")(d["High"])}
Low: ${d3.format(".4s")(d["Low"])}`
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step",
title: d => d3.format(".4s")(d["Volume"])
})
]
})
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.
