Area chart with gradient

A custom function mark returns a svg gradient (generated with Hypertext Literal), that can be referenced as a funciri color in the area mark.

Plot.plot({
  y: {grid: true},
  marks: [
    () => htl.svg`<defs>
      <linearGradient id="gradient" gradientTransform="rotate(90)">
        <stop offset="20%" stop-color="steelblue" stop-opacity="0.5" />
        <stop offset="100%" stop-color="brown" stop-opacity="0" />
      </linearGradient>
    </defs>`,
    Plot.areaY(aapl, {x: "Date", y: "Close", fill: "url(#gradient)"}),
    Plot.lineY(aapl, {x: "Date", y: "Close", stroke: "steelblue"}),
    Plot.ruleY([0])
  ]
})

const aapl = FileAttachment("data/AAPL.csv").csv({typed: true}).then(display);