31:T776,pVariations = { let c = Array(); c.push({cl: 0, type: "L", value: 0, valuePct: 0}); c.push({cl: 0, type: "L*", value: 0, valuePct: 0}); c.push({cl: 0, type: "CH", value: 0, valuePct: 0}); c.push({cl: 0, type: "G", value: 0, valuePct: 0}); c.push({cl: 0, type: "Cam", value: 0, valuePct: 0}); for (let i=0; i < (nb-1); i++){ let s1 = pColorsVals.filter(function(item) {return (item.cl == i+1 && item.type == "HSL");}) let s2 = pColorsVals.filter(function(item) {return (item.cl == i+2 && item.type == "HSL");}) c.push({cl: i+1, type: "L", value: s2[0].value - s1[0].value, valuePct : (s2[0].value - s1[0].value)*100/s1[0].value}); s1 = pColorsVals.filter(function(item) {return (item.cl == i+1 && item.type == "L*");}) s2 = pColorsVals.filter(function(item) {return (item.cl == i+2 && item.type == "L*");}) c.push({cl: i+1, type: "L*", value: s2[0].value - s1[0].value, valuePct : (s2[0].value - s1[0].value)*100/s1[0].value}); s1 = pColorsVals.filter(function(item) {return (item.cl == i+1 && item.type == "CH");}) s2 = pColorsVals.filter(function(item) {return (item.cl == i+2 && item.type == "CH");}) c.push({cl: i+1, type: "C", value: s2[0].value - s1[0].value, valuePct : (s2[0].value - s1[0].value)*100/s1[0].value}); s1 = pColorsVals.filter(function(item) {return (item.cl == i+1 && item.type == "Gr");}) s2 = pColorsVals.filter(function(item) {return (item.cl == i+2 && item.type == "Gr");}) c.push({cl: i+1, type: "G", value: s2[0].value - s1[0].value, valuePct : (s2[0].value - s1[0].value)*100/s1[0].value}); s1 = pColorsVals.filter(function(item) {return (item.cl == i+1 && item.type == "Cam");}) s2 = pColorsVals.filter(function(item) {return (item.cl == i+2 && item.type == "Cam");}) c.push({cl: i+1, type: "Cam", value: s2[0].value - s1[0].value, valuePct : (s2[0].value - s1[0].value)*100/s1[0].value}); } return c; }32:T10c9,deltaE2000 = function (color, sample, {kL = 1, kC = 1, kH = 1} = {}) { // Source : ColorJS, v0.4.5, MIT Licence, https://github.com/LeaVerou/color.js/ // Given this color as the reference // and the function parameter as the sample, // calculate deltaE 2000. // This implementation assumes the parametric // weighting factors kL, kC and kH // for the influence of viewing conditions // are all 1, as sadly seems typical. // kL should be increased for lightness texture or noise // and kC increased for chroma noise const Gfactor = 25 ** 7; const π = Math.PI; const r2d = 180 / π; const d2r = π / 180; let s1 = d3.lab(color); let [L1, a1, b1] = [s1.l, s1.a, s1.b]; let C1 = (d3.lch(color)).c; let s2 = d3.lab(sample); let [L2, a2, b2] = [s2.l,s2.a, s2.b]; let C2 = (d3.lch(sample)).c; // Check for negative Chroma, // which might happen through // direct user input of LCH values if (C1 < 0) { C1 = 0; } if (C2 < 0) { C2 = 0; } let Cbar = (C1 + C2)/2; // mean Chroma // calculate a-axis asymmetry factor from mean Chroma // this turns JND ellipses for near-neutral colors back into circles let C7 = Cbar ** 7; let G = 0.5 * (1 - Math.sqrt(C7/(C7 + Gfactor))); // scale a axes by asymmetry factor // this by the way is why there is no Lab2000 colorspace let adash1 = (1 + G) * a1; let adash2 = (1 + G) * a2; // calculate new Chroma from scaled a and original b axes let Cdash1 = Math.sqrt(adash1 ** 2 + b1 ** 2); let Cdash2 = Math.sqrt(adash2 ** 2 + b2 ** 2); // calculate new hues, with zero hue for true neutrals // and in degrees, not radians let h1 = (adash1 === 0 && b1 === 0)? 0: Math.atan2(b1, adash1); let h2 = (adash2 === 0 && b2 === 0)? 0: Math.atan2(b2, adash2); if (h1 < 0) { h1 += 2 * π; } if (h2 < 0) { h2 += 2 * π; } h1 *= r2d; h2 *= r2d; // Lightness and Chroma differences; sign matters let ΔL = L2 - L1; let ΔC = Cdash2 - Cdash1; // Hue difference, getting the sign correct let hdiff = h2 - h1; let hsum = h1 + h2; let habs = Math.abs(hdiff); let Δh; if (Cdash1 * Cdash2 === 0) { Δh = 0; } else if (habs <= 180) { Δh = hdiff; } else if (hdiff > 180) { Δh = hdiff - 360; } else if (hdiff < -180) { Δh = hdiff + 360; } else { console.log("the unthinkable has happened"); } // weighted Hue difference, more for larger Chroma let ΔH = 2 * Math.sqrt(Cdash2 * Cdash1) * Math.sin(Δh * d2r / 2); // calculate mean Lightness and Chroma let Ldash = (L1 + L2)/2; let Cdash = (Cdash1 + Cdash2)/2; let Cdash7 = Math.pow(Cdash, 7); // Compensate for non-linearity in the blue region of Lab. // Four possibilities for hue weighting factor, // depending on the angles, to get the correct sign let hdash; if (Cdash1 * Cdash2 === 0) { hdash = hsum; // which should be zero } else if (habs <= 180) { hdash = hsum / 2; } else if (hsum < 360) { hdash = (hsum + 360) / 2; } else { hdash = (hsum - 360) / 2; } // positional corrections to the lack of uniformity of CIELAB // These are all trying to make JND ellipsoids more like spheres // SL Lightness crispening factor // a background with L=50 is assumed let lsq = (Ldash - 50) ** 2; let SL = 1 + ((0.015 * lsq) / Math.sqrt(20 + lsq)); // SC Chroma factor, similar to those in CMC and deltaE 94 formulae let SC = 1 + 0.045 * Cdash; // Cross term T for blue non-linearity let T = 1; T -= (0.17 * Math.cos(( hdash - 30) * d2r)); T += (0.24 * Math.cos( 2 * hdash * d2r)); T += (0.32 * Math.cos(((3 * hdash) + 6) * d2r)); T -= (0.20 * Math.cos(((4 * hdash) - 63) * d2r)); // SH Hue factor depends on Chroma, // as well as adjusted hue angle like deltaE94. let SH = 1 + 0.015 * Cdash * T; // RT Hue rotation term compensates for rotation of JND ellipses // and Munsell constant hue lines // in the medium-high Chroma blue region // (Hue 225 to 315) let Δθ = 30 * Math.exp(-1 * (((hdash - 275)/25) ** 2)); let RC = 2 * Math.sqrt(Cdash7/(Cdash7 + Gfactor)); let RT = -1 * Math.sin(2 * Δθ * d2r) * RC; // Finally calculate the deltaE, term by term as root sume of squares let dE = (ΔL / (kL * SL)) ** 2; dE += (ΔC / (kC * SC)) ** 2; dE += (ΔH / (kH * SH)) ** 2; dE += RT * (ΔC / (kC * SC)) * (ΔH / (kH * SH)); return Math.sqrt(dE); // Yay!!! };33:[] 2f:{"title":"Color palettes luminosities and their variations","cells":[{"id":0,"value":"# Color palettes luminosities and their variations","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"viewof nb = Inputs.range(\n d3.extent(dicopal.getPalettes().map((d) => d.number)),\n {\n label: \"Number of colors\",\n step: 1,\n value: 7\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof pType = Inputs.radio(\n Array.from(new Set(dicopal.getPalettes().map((d) => d.type))),\n {\n label: \"Type\",\n value: \"sequential\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof provider = Inputs.checkbox(\n Array.from(new Set(dicopal.getPalettes().map((d) => d.provider))),\n {\n label: \"Providers\",\n value: Array.from(new Set(dicopal.getPalettes().map((d) => d.provider)))\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewof reverse = Inputs.toggle({label: \"Reverse\", value: false});","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof palette = Inputs.select(\n new Map(\n dicopal\n .getPalettes({ number: nb })\n .filter((d) => pType.includes(d.type) && provider.includes(d.provider))\n .map((d) => [`${d.name} (${d.provider}) - ${d.type} `, d.name])\n ),\n { label: \"Palette\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"{\n const form = html``;\n form.myButtonPrev.onclick = () => {\n viewof palette.input.selectedIndex = viewof palette.input.options[viewof palette.input.selectedIndex - 1].index;\n viewof palette.dispatchEvent(new Event(\"input\", {bubbles: true}));\n };\n form.myButtonNext.onclick = () => {\n viewof palette.input.selectedIndex = viewof palette.input.options[viewof palette.input.selectedIndex + 1].index;\n viewof palette.dispatchEvent(new Event(\"input\", {bubbles: true}));\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"view = {\n const doc = [];\n let pal = dicopal.getPalette(palette, nb);\n let colors = dicopal.getColors(palette, nb);\n let cols = reverse ? colors.reverse() : colors;\n let str = JSON.stringify(JSON.stringify(cols));\n doc.push(\n `${pal.name} (${pal.provider}) `\n );\n doc.push(`${drawpal(cols)}`);\n return html`${doc.join(\"
\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"### H,S,L Components","pinned":false,"hidden":false,"mode":"md"},{"id":188,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 200,\n width: 1000,\n x: {\n label: \"Palette step\",\n domain: [1, nb],\n ticks: nb\n },\n y: {\n label: \"H,S,L value\",\n grid: true\n },\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(HSLvalues, {x: \"x\", y: \"y\", stroke: \"Component\", strokeWidth: 2}),\n Plot.text(HSLvalues, Plot.selectLast({x: \"x\", y: \"y\", z: \"Component\", text: \"Component\", textAnchor: \"start\", dx: 3}))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"### Different luminosity components","pinned":false,"hidden":false,"mode":"md"},{"id":577,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 200,\n width: 1000,\n x: {\n label: \"Palette step\",\n domain: [1, nb],\n ticks: nb\n },\n y: {\n label: \"Lum. value\",\n grid: true\n },\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(pColorsVals, {x: \"cl\", y: \"value\", z: \"type\", stroke: \"type\", strokeWidth: 2}),\n Plot.text(pColorsVals, Plot.selectLast({x: \"cl\", y: \"value\", z: \"type\", text: \"type\", textAnchor: \"start\", dx: 3}))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"### Luminosity with HSL, Lab, CubeHelix and CieCAM02 color spaces","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 400,\n width: 1000,\n color: {legend: true},\n fx: {padding: 0, label: null, tickRotate: 90, tickSize: 6},\n x: {\n label: \"Color spaces by class\"\n },\n y: {\n label: \"Luminosity\",\n grid: true\n },\n marks: [\n Plot.ruleY([0]),\n Plot.barY(pColorsVals, {fx: \"cl\", x: \"type\", y: \"value\", fill: \"color\"}), //, sort: {x: \"y\"}, sort: {x: \"y\"}\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"## Luminosity variation","pinned":false,"hidden":false,"mode":"md"},{"id":272,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 400,\n width: 1000,\n color: {scheme: \"Greys\", legend: true},\n tickFormat: \".0%\", \n fx: {padding: 0, label: null, tickRotate: 90, tickSize: 6},\n x: {\n label: \"Types\"\n },\n y: {\n label: \"Luminosity variation\",\n grid: true,\n domain: [-50, 50]\n },\n marks: [\n Plot.ruleY([0]),\n Plot.barY(pVariations, {fx: \"cl\", x: \"type\", y: \"value\", fill: \"value\"}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"## Luminosity variation in %","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 400,\n width: 1000,\n tickFormat: \".0%\", \n color: {scheme: \"Greys\", legend: true},\n fx: {padding: 0, label: null, tickRotate: 90, tickSize: 6},\n x: {\n label: \"Types\"\n },\n y: {\n label: \"Luminosity variation in %\",\n grid: true,\n domain: [-100, 100]\n },\n marks: [\n Plot.ruleY([0]),\n //Plot.barY(pVariations, {fx: \"cl\", x: \"type\", y: \"valuePct\", fill: \"valuePct\"}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"### HCL, HSL and CubeHelix saturation","pinned":false,"hidden":false,"mode":"md"},{"id":408,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 400,\n width: 1000,\n color: {legend: true},\n fx: {padding: 0, label: null, tickRotate: 90, tickSize: 6},\n x: {\n label: \"Types\"\n },\n y: {\n label: \"Saturation\",\n grid: true\n },\n marks: [\n Plot.ruleY([0]),\n Plot.barY(pColorsValsSat, {fx: \"cl\", x: \"type\", y: \"value\", fill: \"color\", sort: {x: \"y\"}}), // sort: {x: \"y\"}\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"## Palettes decomposition","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"pColors = {\n let p = (dicopal.getPalette(palette, nb)).colors;\n let p2 = reverse ? p : p.reverse();\n return p2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"pColorsLstar = pColors.map(d => d3.lab(d).l);","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"pColorsHSL = pColors.map(d => d3.hsl(d).l);","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"pColorsHSLSat = pColors.map(d => d3.hsl(d).s);","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"pColorsCHLX = pColors.map(d => d3.cubehelix(d).l * 100);","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"pColorsCHLXSat = pColors.map(d => d3.cubehelix(d).s * 100);","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"pColorsHCL = pColors.map(d => d3.hcl(d).l);","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"pColorsHCLSat = pColors.map(d => d3.hcl(d).c);","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"pColorsCamJ = pColors.map(d => ciecam02.jch(d).J);","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"pColorsVals = {\n let c = Array();\n for (let i=0; i < nb; i++){\n c.push({cl: i+1, type: \"HSL\", value: pColorsHSL[i]*100, color: pColors[i]});\n //c.push({cl: i, type: \"HCL\", value: pColorsHCL[i], color: pColors[i]});\n c.push({cl: i+1, type: \"L*\", value: pColorsLstar[i], color: pColors[i]});\n c.push({cl: i+1, type: \"CH\", value: pColorsCHLX[i], color: pColors[i]});\n c.push({cl: i+1, type: \"Gr\", value: grayscale(pColors[i])/2.55, color: pColors[i]});\n c.push({cl: i+1, type: \"Cam\", value: pColorsCamJ[i], color: pColors[i]});\n }\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(pColorsVals, {x: \"cl\", y: \"value\", color: \"type\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"pColorsValsSat = {\n let c = Array();\n for (let i=0; i < nb; i++){\n c.push({cl: i, type: \"HCL\", value: pColorsHCLSat[i], color: pColors[i]});\n c.push({cl: i, type: \"HSL\", value: pColorsHSLSat[i]*100, color: pColors[i]});\n //c.push({cl: i, type: \"L*\", value: pColorsLstar[i], color: pColors[i]});\n c.push({cl: i, type: \"Cube\", value: pColorsCHLXSat[i], color: pColors[i]});\n //c.push({cl: i, type: \"Gray\", value: grayscale(pColors[i])/2.55, color: pColors[i]});\n }\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(pVariations, {x: \"cl\", y: \"valuePct\", color: \"type\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"pColorsDiff = {\n let c = Array();\n c.push({cl: 0, type: \"dE2k\", value: 0});\n for (let i=0; i < (nb-1); i++){\n c.push({cl: i+1, type: \"dE2k\", value: deltaE2000(pColors[i], pColors[i+1])});\n }\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.auto(pColorsDiff, {x: \"cl\", y: \"value\", color: \"#ff5375\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"HSLvalues = [\n [\"hue\", d3.map(d3.range(0, nb), d => ({x: d+1, y: d3.hsl(pColors[d]).h/360}))],\n [\"sat\", d3.map(d3.range(0, nb), d => ({x: d+1, y: d3.hsl(pColors[d]).s}))],\n [\"lum\", d3.map(d3.range(0, nb), d => ({x: d+1, y: d3.hsl(pColors[d]).l}))]\n].flatMap(([Component, values]) => values.map(d => ({Component, ...d})));","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"## Inspiration\nThe \"dicopal\" library from RIATE lab. : https://github.com/riatelab/dicopal.js\nSee the example pad from Nicolas https://observablehq.com/@neocartocnrs here : https://observablehq.com/@neocartocnrs/dicopal-library","pinned":false,"hidden":false,"mode":"md"},{"id":353,"value":"### NB\nThe \"Next palette\" button uses a view state technique to modify the value of the Inputs.select drop-down list, to quickly review the different palettes.","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"// Weighted RGB conversion to grayscale\ngrayscale = function(c) {\n let d = d3.rgb(c);\n return (0.2989 * d.r + 0.587 * d.g + 0.114 * d.b);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"// Source : https://observablehq.com/@mthh/hello-dicopal\ndrawpal = function (col) {\n let str = \"\";\n col.forEach((d) => {\n str += ``;\n });\n str += \"
\";\n col.forEach((d) => {\n str += `${d}`;\n });\n return str;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"dicopal = import(\"dicopal@0.4.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"ciecam02 = import(\"d3-cam02\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}