30:[] 2e:{"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"},{"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"},{"id":92,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":98,"value":"html`