Public
Edited
Dec 15, 2023
Insert cell
Insert cell
Plot.plot({
style: "overflow: visible;",
height: 200,
y: {grid: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(stocks, {x: "Date", y: "Close", stroke: "Symbol"}),
Plot.text(stocks, occlusionY(Plot.selectLast({x: "Date", y: "Close", z: "Symbol", text: "Symbol", textAnchor: "start", dx: 3})))
]
})
Insert cell
Insert cell
stocks = [
["AAPL", await FileAttachment("aapl.csv").csv({typed: true})],
["AMZN", await FileAttachment("amzn.csv").csv({typed: true})],
["GOOG", await FileAttachment("goog.csv").csv({typed: true})],
["IBM", await FileAttachment("ibm.csv").csv({typed: true})],
].flatMap(([Symbol, values]) => values.map(d => ({Symbol, ...d})))
Insert cell
import {occlusionY} from "@observablehq/plot-slope-chart"
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