The avatar for @datavisufs
Data Visualisation
Public
Worksheets: Learn Plot
Edited
May 1, 2023
13
Worksheets: Learn Plot
Plot ResourcesWhat is Plot?TableScatterplotBar Chart🏁 Checkpoint: Interactive Visualization of Your Data🏁 Assignment: Build a Plot and Tweak ItLine ChartArea Chart
🏁 Assignment: Upgrade Your Line Chart
Candlestick Chart🏁 Assignment: Upgrade Your Dashboard👥 Assignment: Technical Analysis DashboardGroup Assignment #2: Your Data on Observable
Insert cell
Insert cell
Insert cell
Insert cell
import {data_standardized} from "@datavisufs/line-chart"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {interval} from '@mootari/range-slider'
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
my_slider
Insert cell
Insert cell
Insert cell
earliestYear_slider = my_slider[0]
Insert cell
latestYear_slider = my_slider[1]
Insert cell
Insert cell
Insert cell
earliestYear_slider_asTime = new Date(my_slider[0], 1).getTime()
Insert cell
latestYear_slider_asTime = new Date(my_slider[1], 1).getTime()
Insert cell
Insert cell
Insert cell

data_standardized_filtered= aq.from(data_standardized)
.filter(aq.escape(d => d["Date"]>earliestYear_slider_asTime))
.objects()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Uncomment to activate

import {Plot} from "@mkfreeman/plot-tooltip"
Insert cell
Insert cell
Plot.plot({
color: {
legend: true
},
y:{
grid: true,
nice: true,
label: "Z-Score"
},
x:{
grid: true,
nice: true
},
marks: [
Plot.dot(data_standardized_filtered, {
x:"Date",
y: "VolumeStandardized",
r: 1,
fill: "blue",
title: d=> d3.format(".4s")(d["Volume"]),
opacity: 1
}),
Plot.dot(data_standardized_filtered, {
x:"Date",
y: "CloseStandardized",
r: 1,
fill: "red",
title: "CloseStandardized",
opacity: 1
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke:"salmon"
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke:"dodgerblue",
curve: "step"
})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
color: {
legend: true
},
y:{
grid: true,
nice: true,
label: "Z-Score"
},
x:{
grid: true,
nice: true
},
marks: [
Plot.dot(data_standardized_filtered, {
x:"Date",
y: "VolumeStandardized",
r: 3,
fill: "blue",
title: d=> d3.format(".4s")(d["Volume"]),
opacity: 0
}),
Plot.dot(data_standardized_filtered, {
x:"Date",
y: "CloseStandardized",
r: 3,
fill: "red",
title: "CloseStandardized",
opacity: 0
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke:"salmon"
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke:"dodgerblue",
curve: "step"
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
color: {
legend: true
},
y:{
grid: true,
nice: true,
label: "Z-Score"
},
x:{
grid: true,
nice: true
},
marks: [
Plot.dot(data_standardized_filtered, {
x:"Date",
y: "VolumeStandardized",
r: 3,
fill: "blue",
title: d => (d["Volume"] / 1_000_000_000).toFixed(1) + " Billion USD",
opacity: 0
}),
Plot.dot(data_standardized_filtered, {
x:"Date",
y: "CloseStandardized",
r: 3,
fill: "red",
title: d => d["CloseStandardized"].toFixed(1) + "USD",
opacity: 0
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "CloseStandardized",
stroke:"salmon"
}),
Plot.lineY(data_standardized_filtered, {
x: "Date",
y: "VolumeStandardized",
stroke:"dodgerblue",
curve: "step"
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {imageToDo} from "@clokman/student-blocks"
Insert cell
imageToDo
Insert cell
import {howTo} from "@clokman/howto"
Insert cell
import {showMe} from "@observablehq/show-me"
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