25:["$","title",null,{"children":"Plot: Gradient encoding | drbagwell | Observable"}] 49:[{"id":"b78f8bcd4b540922c6c36bbf0c3dac9109bcf248ccaeb4e26d573e5b236ee39bb47a553d352e9255ed2cd0d01bccf35b142536c1b1e963040a31000ea619b875","href":"https://static.observableusercontent.com/files/b78f8bcd4b540922c6c36bbf0c3dac9109bcf248ccaeb4e26d573e5b236ee39bb47a553d352e9255ed2cd0d01bccf35b142536c1b1e963040a31000ea619b875","name":"sf-temperatures.csv","type":"text/csv","lastModified":1721911867689.661,"size":15106}] 29:{"id":"2f1212e92ef6cfc9","slug":null,"title":"Plot: Gradient encoding","thumbnail":"43fe52eed45f1b1d42969f8b096e5f6e5777faf409dac4ecdaee810edf3caf4d","access_level":"public","create_time":"$D2024-07-25T12:51:07.689Z","update_time":"$D2024-07-25T12:51:07.689Z","view_time":null,"first_public_time":"$D2024-07-25T12:51:07.689Z","has_unpublished_edits":null,"fork":{"id":"3f47ed8b95cda87a","slug":"plot-gradient-encoding","title":"Plot: Gradient encoding","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3df590ff6b5ddeb9","login":"drbagwell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/44febcf38b1a0e9ddfc1c4d6c2df40de4227fc13f07d386ae87a7053ec79b220","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":182,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f52baf2f7ed93665","login":"drbagwell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/44febcf38b1a0e9ddfc1c4d6c2df40de4227fc13f07d386ae87a7053ec79b220","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"3df590ff6b5ddeb9","login":"drbagwell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/44febcf38b1a0e9ddfc1c4d6c2df40de4227fc13f07d386ae87a7053ec79b220","tier":"starter_2024","role":"editor"},{"type":"individual","id":"f52baf2f7ed93665","login":"drbagwell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/44febcf38b1a0e9ddfc1c4d6c2df40de4227fc13f07d386ae87a7053ec79b220","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null