Public
Edited
Aug 11, 2023
3 stars
Insert cell
Insert cell
Plot.plot({
y: {nice: true},
color: { domain: [45, 75], scheme: "turbo", legend: true, ticks: 7, label: "temperature (°F)" },
marks: [
Plot.line(sftemp, {
x: "date",
y: "high",
stroke: "url(#gradient)",
curve: "step-before"
}),
(_index, { y, color }) => htl.svg`<defs>
<linearGradient id="gradient" gradientUnits="userSpaceOnUse"
x1=0 x2=0 y1=${y(45)} y2=${y(75)}>${d3.ticks(0, 1, 10).map(
(t) =>
htl.svg`<stop
offset=${t * 100}%
stop-color=${color(45 * (1 - t) + 75 * t)} />`
)}`
]
})
Insert cell
sftemp = FileAttachment("sf-temperatures.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