Public
Edited
May 30, 2023
7 forks
7 stars
Insert cell
Insert cell
Plot.plot({
padding: 0,
x: {axis: null},
y: {tickFormat: Plot.formatWeekday("en", "narrow"), tickSize: 0},
fy: {tickFormat: ""},
color: {scheme: "PiYG", legend: true, label: "Daily change", tickFormat: "+%", domain: [-0.06, 0.06]},
marks: [
Plot.cell(dji, {
x: (d) => d3.utcWeek.count(d3.utcYear(d.Date), d.Date),
y: (d) => d.Date.getUTCDay(),
fy: (d) => d.Date.getUTCFullYear(),
fill: (d, i) => i > 0 ? (d.Close - dji[i - 1].Close) / dji[i - 1].Close : NaN,
title: (d, i) => i > 0 ? ((d.Close - dji[i - 1].Close) / dji[i - 1].Close * 100).toFixed(1) : NaN,
inset: 0.5
})
]
})
Insert cell
dji = FileAttachment("dji.csv").csv({typed: true})
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