2c:null 2d:["$","title",null,{"children":"Interpolate colors with Catmull-Rom/Cubic/Monotone…? | Fil | Observable"}] 32:T4bb,md`# Interpolate colors with Catmull-Rom/Cubic/Monotone…? Using the Catmull-Rom spline generator from Three.js (as imported by [@mattdesl](https://observablehq.com/@mattdesl/perceptually-smooth-multi-color-linear-gradients)), we apply it to D3’s color schemes. The resulting colors appear to be much more vivid, and also more true to the exact values of the original schemes, than D3’s current interpolator, which is based on a Basis interpolation of the colors. In the charts below five bands are presented: 1. The array of colors in the scheme (11 or 9 colors) 2. The current interpolator in D3 (if it exists) 3. The RGB Catmull-Rom interpolator 4. The L\\*a\\*b Catmull-Rom interpolator 5. The L\\*a\\*b cubic interpolator **new** in this version, thanks [@danburzo](/@danburzo/interpolate-colors-with-catmull-rom)! 6. The RGB cubic interpolator 7. The RGB monotone interpolator 8. The RGB basis interpolator (similar to 2 if it exists) The proposal [[#28](https://github.com/d3/d3-scale-chromatic/issues/28)] is to use ~~the L\\*a\\*b Catmull-Rom or Cubic~~ the RGB **Monotone** interpolator instead of the RGB **Basis** interpolator. See how much more vivid PuOr PrGn PiYG… would be! `33:T66a,ramps = scheme => { const array = d3["scheme" + scheme][0] ? d3["scheme" + scheme] : d3["scheme" + scheme].slice().pop(); return html`

${scheme}

${ramp(t => array[Math.round((array.length - 1) * t)])} ${ d3["interpolate" + scheme] ? html`

${"interpolate" + scheme}

${ramp(d3["interpolate" + scheme])}` : html`` }

interpolateRgbCatmullRom(${scheme})

${ramp(interpolateRgbCatmullRom(array))}

interpolateLabCatmullRom(${scheme})

${ramp(interpolateLabCatmullRom(array))}

interpolateLabCubic(${scheme})

${ramp(interpolateLabCubic(array))}

interpolateRgbCubic(${scheme})

${ramp(interpolateRgbCubic(array))}

interpolateRgbMonotone(${scheme})

${ramp(interpolateRgbMonotone(array))}

d3.interpolateRgbBasis(${scheme})

${ramp(d3.interpolateRgbBasis(array))} `; }34:T4e2,function monotone(values, type) { let n = values.length - 1, k; values = values.slice(); switch (type) { case "closed": values.unshift(values[n]); values.push(values[1]); values.push(values[2]); n += 2; k = 1 - 1 / n; return t => monotone(k * frac(t)); case "open": throw new Error('open monotone spline not implemented yet'); case "clamped": default: values.push(2 * values[n] - values[n - 1]); values.unshift(2 * values[0] - values[1]); return t => monotone(clamp(t, 0, 1)); } function monotone(t) { const i = Math.min(n - 1, Math.floor(t * n)), y_im1 = values[i], y_i = values[i + 1], y_ip1 = values[i + 2], y_ip2 = values[i + 3], d = t * n - i, s_im1 = n * (y_i - y_im1), s_i = n * (y_ip1 - y_i), s_ip1 = n * (y_ip2 - y_ip1), yp_i = (sign(s_im1) + sign(s_i)) * min(abs(s_im1), abs(s_i), 0.25 * n * abs(y_ip1 - y_im1)), yp_ip1 = (sign(s_i) + sign(s_ip1)) * min(abs(s_i), abs(s_ip1), 0.25 * n * abs(y_ip2 - y_i)); return ( (((yp_i + yp_ip1 - 2 * s_i) * d + (3 * s_i - 2 * yp_i - yp_ip1)) * d + yp_i) * (d / n) + y_i ); } }35:[] 30:{"id":"d5895fd0f17aff6c","slug":"interpolate-colors-with-catmull-rom","title":"Interpolate colors with Catmull-Rom/Cubic/Monotone…?","thumbnail":"71ce17d3b711ae4bcb933c5f0b7182fc9d8e3f26d114674db1c7a906d1a1983e","access_level":"public","create_time":"$D2020-07-02T09:36:25.056Z","update_time":"$D2020-07-05T11:37:50.132Z","view_time":null,"first_public_time":"$D2020-07-02T14:01:36.468Z","has_unpublished_edits":null,"fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"da2a32154638c457","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":"starter_2024"},"version":335,"publish_version":335,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[{"id":"159228bb4c3809b4","reply_to_id":null,"content":"The results seem to vary greatly depending on when a cell gets executed. Perhaps they'd be more representative if all of the tests were to execute in a single combined cell?","create_time":"$D2020-07-03T10:21:20.121Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"f9afaea4b5b3de38","reply_to_id":"159228bb4c3809b4","content":"done :)","create_time":"$D2020-07-03T10:42:44.756Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"042d90cc04d1facd","slug":"color","title":"Color","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"type":"notebook","body":{"titling":"auto","title":"Interpolate colors with Catmull-Rom/Cubic/Monotone…?","cells":[{"id":0,"value":"$32","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":77,"value":"speedtest = md`### Speed test`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"[\n d3.interpolatePiYG,\n interpolateRgbCatmullRom(d3.schemePiYG[11]),\n interpolateLabCatmullRom(d3.schemePiYG[11]),\n interpolateLabCatmullRom(d3.schemePiYG[11]),\n interpolateLabCubic(d3.schemePiYG[11]),\n interpolateRgbCubic(d3.schemePiYG[11]),\n (() => {\n const a = interpolateLabCubic(d3.schemePiYG[11]);\n return t => a(t).hex();\n })(),\n (() => {\n const a = interpolateRgbCubic(d3.schemePiYG[11]);\n return t => a(t).hex();\n })()\n].map(time)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"function time(interpolate) {\n const time = performance.now();\n for (let i = 0; i < 50000; i++) interpolate(i / 50000);\n return performance.now() - time;\n}","pinned":true,"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":"$33","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":102,"value":"interpolateLabCubic = colors => {\n const { l, a, b } = transpose(colors.map(d => d3.lab(d)));\n const L = cubic(l),\n A = cubic(a),\n B = cubic(b);\n return t => d3.lab(L(t), A(t), B(t));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"interpolateRgbCubic = colors => {\n const { r, g, b } = transpose(colors.map(d => d3.rgb(d)));\n const R = cubic(r),\n G = cubic(g),\n B = cubic(b);\n return t => d3.rgb(R(t), G(t), B(t));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"function cubic(values, type = \"default\") {\n const n = values.length - 1;\n values = values.slice();\n switch (type) {\n case \"default\":\n values.push(2 * values[n] - values[n - 1]);\n values.unshift(2 * values[0] - values[1]);\n return t => cubic(Math.max(0, Math.min(t, 1)));\n case \"closed\":\n values.push(values[0]);\n values.unshift(values[n + 1]);\n return t => cubic(t - Math.floor(t));\n case \"open\":\n throw new Error('open monotone spline not implemented yet');\n }\n\n function cubic(t) {\n const i = Math.min(n - 1, Math.floor(t * n)),\n v0 = values[i],\n v1 = values[i + 1],\n v2 = values[i + 2],\n v3 = values[i + 3],\n d = t * n - i,\n s20 = v2 - v0,\n s31 = v3 - v1,\n s21 = (v2 - v1) * 2;\n return (\n (d / 2) *\n (((s20 + s31 - 2 * s21) * d + (3 * s21 - 2 * s20 - s31)) * d + s20) +\n v1\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"interpolateRgbMonotone = colors => {\n const { r, g, b } = transpose(colors.map(d => d3.rgb(d)));\n const R = monotone(r),\n G = monotone(g),\n B = monotone(b);\n return t => d3.rgb(R(t), G(t), B(t));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"function cubicClosed(values) {\n return cubic(values, \"closed\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"function monotoneClosed(values) {\n return monotone(values, \"closed\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"import { abs, floor, max, min, sign } from \"@fil/math\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"function frac(t) {\n return t - floor(t);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"function clamp(t, lo, hi) {\n return t < lo ? lo : t > hi ? hi : t;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"monotoneClosed([0, 1, 2, 3])(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"import { transpose } from \"dff751d1da207b30\"","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"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"