31: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 */}

`; }32:[] 2f:{"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"},{"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"},{"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"},{"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"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":7,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { ramp } from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"import { CatmullRomSpline as CatmullRomSpline3D } from \"@mattdesl/perceptually-smooth-multi-color-linear-gradients\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"culori = import('culori@0.11.2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"chroma = require('chroma-js')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}