45:["$","title",null,{"children":"Interpolate colors with Catmull-Rom/Cubic/Monotone…? | Fil | Observable"}] 4d: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! `4e: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))} `; }4f: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 ); } }50:[] 49:{"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","bio":"Vocateur.","followed_by_you":false,"follows_you":false},"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,"bio":"Vocateur.","followed_by_you":false,"follows_you":false}],"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":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 44:null