import {data_standardized} from "e6e83eefa5a9b8a1"
data_standardized
import {interval} from "@mootari/range-slider"
// Get the earliest date in a dataset and assign it to a variable:
earliestYearInData = d3.min(data_standardized, d => d["Date"])
// Do the same for the latest date:
latestYearInData = d3.max(data_standardized, d => d["Date"])
slider_years
earliestYear_slider = slider_years[0]
latestYear_slider = slider_years[1]
earliestYear_slider_asTime = new Date(earliestYear_slider, 1).getTime()
latestYear_slider_asTime = new Date(latestYear_slider, 1).getTime()
data_standardized_filtered =
aq.from(data_standardized)
.filter(aq.escape(d => d["Date"] > earliestYear_slider_asTime && d["Date"] < latestYear_slider_asTime))
.objects() // Uncomment to return an array of objects
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"
})
]
})
// Uncomment to activate
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"
}),
Plot.dot(data_standardized_filtered, {
x: "Date",
y: "CloseStandardized",
fill: "salmon",
r: 1.5,
title: "Close"
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step"
}),
Plot.dot(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
fill: "dodgerblue",
r: 1.5,
title: d => (d["Volume"] / 1_000_000_000).toFixed(2) + "G"
})
]
})
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.dot(data_standardized_filtered, {
x: "Date",
y: "CloseStandardized",
fill: "salmon",
r: 1.5,
title: "Close",
opacity: 0
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step"
}),
Plot.dot(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
fill: "dodgerblue",
r: 1.5,
title: d => (d["Volume"] / 1_000_000_000).toFixed(2) + "G",
opacity: 0
})
]
})
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.dot(data_standardized_filtered, {
x: "Date",
y: "CloseStandardized",
fill: "salmon",
r: 1.5,
title: d => d["Close"].toFixed(1) + " USD",
opacity: 0
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke: "dodgerblue",
curve: "step"
}),
Plot.dot(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
fill: "dodgerblue",
r: 1.5,
title: d => (d["Volume"] / 1_000_000_000).toFixed(1) + " Billion USD",
opacity: 0
})
]
})
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.
