2d:null 2e:["$","title",null,{"children":"Plot: Gradient encoding | Observable | Observable"}] 33:[{"id":"b78f8bcd4b540922c6c36bbf0c3dac9109bcf248ccaeb4e26d573e5b236ee39bb47a553d352e9255ed2cd0d01bccf35b142536c1b1e963040a31000ea619b875","href":"https://static.observableusercontent.com/files/b78f8bcd4b540922c6c36bbf0c3dac9109bcf248ccaeb4e26d573e5b236ee39bb47a553d352e9255ed2cd0d01bccf35b142536c1b1e963040a31000ea619b875","name":"sf-temperatures.csv","type":"text/csv","lastModified":1691759638505.244,"size":15106}] 31:{"id":"3f47ed8b95cda87a","slug":"plot-gradient-encoding","title":"Plot: Gradient encoding","thumbnail":"7ffaace7bcbf229df87f0ce2f3e51a7ee40b07723c14f6018411a542290dd21e","access_level":"public","create_time":"$D2023-08-11T13:12:34.403Z","update_time":"$D2023-08-11T13:43:21.665Z","view_time":null,"first_public_time":"$D2023-08-11T13:37:14.873Z","has_unpublished_edits":null,"fork":{"id":"db2b79dafedfada9","slug":"plot-area-chart-with-gradient","title":"Plot: Area chart with gradient","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"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":182,"publish_version":null,"role":null,"authored":false,"authors":[],"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":"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":5,"collection":null,"type":"notebook","body":{"title":"Plot: Gradient encoding","cells":[{"id":0,"value":"

Plot: Gradient encoding

Observable Plot › Gallery

\n\n# Gradient encoding\n\nA custom [function mark](https://observablehq.com/plot/features/marks) returns a [SVG gradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients) (generated with [Hypertext Literal](https://observablehq.com/@observablehq/htl) and based on the color scale), that can be referenced as a [funciri](https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#funciri) stroke color in the [line](https://observablehq.com/plot/marks/line) mark.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"Plot.plot({\n y: {nice: true},\n color: { domain: [45, 75], scheme: \"turbo\", legend: true, ticks: 7, label: \"temperature (°F)\" },\n marks: [\n Plot.line(sftemp, {\n x: \"date\",\n y: \"high\",\n stroke: \"url(#gradient)\",\n curve: \"step-before\"\n }),\n \n (_index, { y, color }) => htl.svg`\n ${d3.ticks(0, 1, 10).map(\n (t) =>\n htl.svg``\n )}`\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"sftemp = FileAttachment(\"sf-temperatures.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"