Public
Edited
Mar 4, 2024
1 fork
2 stars
import { stocks } from "@observablehq/plot-index-chart"
stocks
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.line(stocks, {
x: "Date",
y: "Close",
stroke: "Symbol"
})
]
})
Plot.plot({
color: {
legend: true
},
marks: [
Plot.line(
stocks,
Plot.normalizeY("first", {
x: "Date",
y: "Close",
stroke: "Symbol",
tip: true
})
)
]
})
viewof index = Inputs.range([0, aapl.length - 1], {
label: "Index",
value: 0,
step: 1
})
Plot.plot({
y: {
domain: [-100, 100],
label: "↑ Close (%)",
transform: (y) => (y - 1) * 100,
tickFormat: "+d"
},
color: {
legend: true
},
marks: [
Plot.ruleX([aapl[index].Date]),
Plot.ruleY([1]),
Plot.lineY(
stocks,
Plot.normalizeY((Y) => Y[index], {
x: "Date",
y: "Close",
stroke: "Symbol",
tip: true
})
)
]
})
import { Scrubber } from "@mbostock/scrubber"
{
const bisector = d3.bisector((i) => stocks[i].Date);
const basis = (I, Y) => Y[I[bisector.center(I, date)]];
return Plot.plot({
style: "overflow: visible;",
y: {
type: "log",
grid: true,
label: "Change in price (%)",
tickFormat: (
(f) => (x) =>
f((x - 1) * 100)
)(d3.format("+d"))
},
marks: [
Plot.ruleY([1]),
Plot.ruleX([date]),
Plot.lineY(
stocks,
Plot.normalizeY(basis, {
x: "Date",
y: "Close",
stroke: "Symbol"
})
),
Plot.text(
stocks,
Plot.selectLast(
Plot.normalizeY(basis, {
x: "Date",
y: "Close",
z: "Symbol",
text: "Symbol",
textAnchor: "start",
dx: 3
})
)
)
]
});
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
