import { data_standardized } from "64387482b4a7ad66"
import { interval } from "@mootari/range-slider@1786"
time_slider
erliestYear_slider = time_slider[0]
latestYear_slider = time_slider[1]
earliestYear_slider_asTime = new Date(time_slider[0], 1).getTime()
latestYear_slider_asTime = new Date(time_slider[1], 1).getTime()
data_standerdized_filtered = aq
.from(data_standardized)
.filter(aq.escape((d) => d["Date"] > earliestYear_slider_asTime))
.filter(aq.escape((d) => d["Date"] < latestYear_slider_asTime))
.objects()
Plot.plot({
nice: true,
grid: true,
y: {
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"
})
]
})
Plot.plot({
nice: true,
grid: true,
y: {
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"
}),
Plot.dot(data_standerdized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon",
title: (d) => d3.format(".4s")(d["Close"]),
r: 1
}),
Plot.dot(data_standerdized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step",
title: (d) => d3.format(".4s")(d["Volume"]),
r: 1
})
]
})
// Uncomment to activate
import { Plot } from "@mkfreeman/plot-tooltip"
Plot.plot({
nice: true,
grid: true,
y: {
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"
}),
Plot.dot(data_standerdized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon",
title: (d) => d3.format(".4s")(d["Close"]),
r: 1
}),
Plot.dot(data_standerdized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step",
title: (d) => d3.format(".4s")(d["Volume"]),
r: 1
})
]
})
Plot.plot({
nice: true,
grid: true,
y: {
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"
}),
Plot.dot(data_standerdized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon",
title: (d) => d3.format(".4s")(d["Close"]),
r: 1,
opacity: 0
}),
Plot.dot(data_standerdized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step",
title: (d) => d3.format(".4s")(d["Volume"]),
r: 1,
opacity: 0
})
]
})
Plot.plot({
nice: true,
grid: true,
y: {
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"
}),
Plot.dot(data_standerdized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke: "salmon",
title: (d) => d["Close"].toFixed() + " USD",
r: 1,
opacity: 0
}),
Plot.dot(data_standerdized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step",
title: (d) => (d["Volume"] / 1_000_000_000).toFixed() + " Billion USD",
r: 1,
opacity: 0
})
]
})
Plot.plot({
grid: true,
nice: true,
height: 150,
y: {
label: "Volume in Billion USD",
transform: (d) => d / 1_000_000_000
},
marks: [
Plot.lineY(data_standerdized_filtered, {
x: "Date",
y: "Volume",
stroke: "dodgerblue",
curve: "step"
})
]
})
import {imageToDo} from "@clokman/student-blocks"
imageToDo
import {howTo} from "@clokman/howto"
import {showMe} from "@observablehq/show-me"
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.
