2e:null 2f:["$","title",null,{"children":"Mapping Color Scales with SVG Filters | Fabian Iwand | Observable"}] 34:[] 32:{"id":"018f072392869505","slug":"svg-filter-scales","title":"Mapping Color Scales with SVG Filters","thumbnail":"16ab3503bb05149c74c0e7e56d6682aa301f0d999d449e0612ae1619609ae844","access_level":"public","create_time":"$D2019-09-26T09:31:42.666Z","update_time":"$D2020-01-09T22:10:42.469Z","view_time":null,"first_public_time":"$D2019-09-26T20:43:00.170Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":584,"publish_version":584,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"e3842c7642c32750","slug":"tools","title":"Tools & Techniques","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Mapping Color Scales with SVG Filters","cells":[{"id":0,"value":"md`# Mapping Color Scales with SVG Filters\n\nInspired by Sahil Chinoy's [Hillshader](https://observablehq.com/@sahilchinoy/hillshader), this notebook demonstrates how SVG filters can be used to apply color scales to images.\n\nSelect a color scale to recolor the image:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"viewof selectedFilter = {\n const s = DOM.select(['(original)'].concat(Object.keys(scales)));\n s.querySelector('option[value=\"Hypsometric\"]').setAttribute('selected', true);\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"scales = {\n const m = d3ScaleChromatic, custom = {}, scheme = {}, sequential = {};\n // Map custom scales.\n custom['Hypsometric'] = SCALE_HYPSOMETRIC;\n \n // Map schemes.\n for(let [p, a] of Object.entries(m)) {\n if(!p.match(/^scheme/) || !Array.isArray(a[a.length - 1])) continue;\n scheme[p.slice(6)] = a[a.length - 1];\n }\n // Map remaining sequential scales.\n for(let [p, fn] of Object.entries(m)) {\n if(!p.match(/^interpolate/) || scheme[p.slice(11)]) continue;\n sequential[p.slice(11)] = sample(fn);\n }\n\n return {...custom, ...sequential, ...scheme}; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"html`