2c:null 2d:["$","title",null,{"children":"Interpolating colors: Catmull-Rom vs. Monotone Spline | Dan Burzo | Observable"}] 32:T4d0,ramps = scheme => { const array = d3["scheme" + scheme][0] ? d3["scheme" + scheme] : d3["scheme" + scheme].slice().pop(); let mono = culori.interpolateSplineMonotone(); const labmono = culori.interpolate(array, 'lab', { l: mono, a: mono, b: mono }); const rgbmono = culori.interpolate(array, 'rgb', { r: mono, g: mono, b: mono }); const lrgbmono = culori.interpolate(array, 'lrgb', { r: mono, g: mono, b: mono }); return html`

None ${ramp(t => array[Math.round((array.length - 1) * t)]) /* 1 */} RGB linear${ramp(t => culori.formatHex(culori.interpolate(array, 'rgb')(t)))/* 7 */} LRGB linear${ramp(t => culori.formatHex(culori.interpolate(array, 'lrgb')(t)))/* 7 */} LRGB linear*${ramp(t => chroma.scale(array).mode('lrgb')(t).hex())/* 7 */} Lab linear${ramp(d3.piecewise(d3.interpolateLab, array)) /* 6 */} Lab CatmullRom${ramp(interpolateLabCatmullRom(array))/* 4 */} Lab Monotone${ramp(t => culori.formatHex(labmono(t)))/* 7 */} RGB Monotone${ramp(t => culori.formatHex(rgbmono(t)))/* 7 */} LRGB Monotone${ramp(t => culori.formatHex(lrgbmono(t)))/* 7 */}

`; }33:[] 30:{"id":"c65e371b2c144e7b","slug":"interpolate-colors-with-catmull-rom","title":"Interpolating colors: Catmull-Rom vs. Monotone Spline","thumbnail":"5595b24a32e5e335b790fbc3260180dbfaa19f14557f45e67d236c470ac643d1","access_level":"public","create_time":"$D2020-07-02T12:33:35.633Z","update_time":"$D2021-10-01T15:33:19.724Z","view_time":null,"first_public_time":"$D2020-07-02T14:27:35.547Z","has_unpublished_edits":null,"fork":{"id":"d5895fd0f17aff6c","slug":"interpolate-colors-with-catmull-rom","title":"Interpolate colors with Catmull-Rom/Cubic/Monotone…?","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"stars":2,"starred":false,"owner":{"type":"team","id":"d2d1bf09f301c5bc","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":"starter_2024"},"version":253,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0303102bdc18d54b","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":null}],"members":[{"type":"individual","id":"0303102bdc18d54b","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"25ad2faf7b7ce40b","slug":"culori","title":"Culori","owner":{"id":"d2d1bf09f301c5bc","login":"danburzo","name":"Dan Burzo"}},"type":"notebook","body":{"titling":"auto","title":"Interpolating colors: Catmull-Rom vs. Monotone Spline","cells":[{"id":0,"value":"md`# Interpolating colors: Catmull-Rom vs. Monotone Spline\n\nNote: Asterisk (*) denotes LRGB interpolation from [chroma.js](https://github.com/gka/chroma.js/) for control.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"html`${[\n \"schemeBrBG\",\n \"schemeBuGn\",\n \"schemeBuPu\",\n \"schemeGnBu\",\n \"schemeOrRd\",\n \"schemePRGn\",\n \"schemePiYG\",\n \"schemePuBu\",\n \"schemePuBuGn\",\n \"schemePuOr\",\n \"schemePuRd\",\n \"schemeRdBu\",\n \"schemeRdGy\",\n \"schemeRdPu\",\n \"schemeRdYlBu\",\n \"schemeRdYlGn\",\n \"schemeSpectral\",\n \"schemeYlGn\",\n \"schemeYlGnBu\",\n \"schemeYlOrBr\",\n \"schemeYlOrRd\"\n]\n .map(d => d.replace(/^scheme/, \"\"))\n .map(s => {\n return md`### ${s}\n${ramps(s)}\n`;\n })}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`----\n\n\nAnd to see the effect on all the schemes (including those that are not meant to be interpolated)…\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"html`${Object.keys(d3)\n .filter(d => d.match(/^scheme/))\n .map(d => d.replace(/^scheme/, \"\"))\n .map(s => {\n return md`### ${s}\n${ramps(s)}\n`;\n })}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"interpolateLabCatmullRom = colors => {\n const getpoint = CatmullRomSpline3D(\n colors.map(d => d3.lab(d)).map(d => [d.l, d.a, d.b]),\n {\n closed: false,\n tension: 0.5\n }\n ).getPoint;\n\n return t => d3.lab(...getpoint(t)).hex();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"interpolateRgbCatmullRom = colors => {\n const getpoint = CatmullRomSpline3D(\n colors.map(d => d3.rgb(d)).map(d => [d.r, d.g, d.b]),\n {\n closed: false,\n tension: 0.5\n }\n ).getPoint;\n\n return t => d3.rgb(...getpoint(t)).hex();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { ramp } from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import { CatmullRomSpline as CatmullRomSpline3D } from \"@mattdesl/perceptually-smooth-multi-color-linear-gradients\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"culori = import('culori@0.11.2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"chroma = require('chroma-js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"