2d:null 2e:["$","title",null,{"children":"Plot: Area chart with gradient | Observable | Observable"}] 33:[] 31:{"id":"db2b79dafedfada9","slug":"plot-area-chart-with-gradient","title":"Plot: Area chart with gradient","thumbnail":"e2ae9f4cddffe1790723f0b4d660f6d2a1149e3803886c6413fdb9b5ebe8cc2b","access_level":"public","create_time":"$D2023-04-14T03:54:03.792Z","update_time":"$D2023-05-10T22:35:52.227Z","view_time":null,"first_public_time":"$D2023-05-10T22:34:55.149Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":78,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"group","id":"76aea96fc709f166","login":"8233674146ba4cfe","name":"Plot","avatar_url":null,"tier":"public","role":"editor"},{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":22,"collection":null,"type":"notebook","body":{"title":"Plot: Area chart with gradient","cells":[{"id":0,"value":"

Plot: Area chart with gradient

Observable Plot › Gallery

\n\n# Area chart with gradient\n\nA custom [function mark](https://observablehq.com/plot/features/marks) returns a svg gradient (generated with [Hypertext Literal](https://observablehq.com/@observablehq/htl)), that can be referenced as a [funciri](https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#funciri) color in the [area](https://observablehq.com/plot/marks/area) mark.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"Plot.plot({\n y: {grid: true},\n marks: [\n () => htl.svg`\n \n \n \n \n `,\n Plot.areaY(aapl, {x: \"Date\", y: \"Close\", fill: \"url(#gradient)\"}),\n Plot.lineY(aapl, {x: \"Date\", y: \"Close\", stroke: \"steelblue\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"