Unlisted
Edited
Aug 11, 2023
Insert cell
Insert cell
Plot.plot({
// size
height: 400,
width: 1200,
margin: 30,
inset: 20,
grid: false,
marks: [

(index, { y }) => htl.svg`<defs>
<linearGradient id="gradient" gradientUnits="userSpaceOnUse"
x1=0 x2=0 y1=${y(100)} y2=${y(60)}>
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="white" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>`,
Plot.barY(data, {x: "Date", y1: "rLo", y2: "rHi", fill: "url(#gradient)"}),
Plot.ruleY([0])
],
})
Insert cell
Insert cell
Insert cell
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