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.line(stocks, Plot.normalizeY({
x: "Date",
y: "Close",
stroke: "Symbol"
})),
Plot.text(stocks, Plot.selectLast(Plot.normalizeY({
x: "Date",
y: "Close",
z: "Symbol",
text: "Symbol",
textAnchor: "start",
dx: 3
})))
]
})
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})))
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.
