31:T488,colorScaleData = function ( colors, { fnCvd = _.identity, fnSpace100 = _.flow( colorSpaces.munsell.fromSRgb, colorSpaces.munsell.to100 ), label = "", dark = dark } = {} ) { const colorsOriginal = colors.map((x, i) => ({ i, sRgb: asSRgb(x), space100: _.flow(asSRgb, fnSpace100)(x), hex: asHex(x) })); const colorsCvd = tidy.tidy( colorsOriginal, tidy.mutate({ sRgb: (d) => fnCvd(d.sRgb), space100: (d) => fnSpace100(d.sRgb), hex: (d) => colorUtils.hexFromSRgb(d.sRgb) }) ); const distancesCvd = tidy.tidy( [], tidy.expand({ a: colorsCvd, b: colorsCvd }), tidy.transmute({ i: (d) => d.a.i, j: (d) => d.b.i, distance: (d) => math.distance(d.a.space100, d.b.space100) }), tidy.filter((d) => d.i < d.j) ); const chromaOriginal = tidy.tidy( colorsOriginal, tidy.mutate({ polar100: (d) => colorUtils.toPolar(d.space100) }) ); const maxChroma = math.max(chromaOriginal.map((x) => x.polar100[1])); return { colorsOriginal, colorsCvd, distancesCvd, maxChroma, dark }; }32:T4e4,colorScalePlot = function ({ colorsOriginal = [], colorsCvd = [], distancesCvd = [], maxChroma = 20, dark = false } = {}) { const margins = { marginTop: 25, marginRight: 40, marginBottom: 30, marginLeft: 35 }; // TODO: nail-down widths to achieve orthographic projection const ab = 250; const widthAB = ab + margins.marginLeft + margins.marginRight; const widthLum = (ab * 100) / (2 * maxChroma) + margins.marginLeft + margins.marginRight; const aB = aBPlot({ colorsOriginal, colorsCvd, distancesCvd, maxChroma, width: widthAB, margins, dark }); const lumB = lumBPlot({ colorsOriginal, colorsCvd, distancesCvd, maxChroma, width: widthLum, margins, dark }); const aLum = aLumPlot({ colorsOriginal, colorsCvd, distancesCvd, maxChroma, width: widthAB, margins, dark }); const distance = distancePlot({ colorsOriginal, colorsCvd, distancesCvd, dark }); return html`

${aB}

${lumB}

${aLum}

${distance}

`; }33:T4b0,aBPlot = function ({ colorsOriginal = [], colorsCvd = [], maxChroma = 20, width = 300, margins = { marginTop: 20, marginRight: 20, marginBottom: 30, marginLeft: 35 }, dark = false } = {}) { const hexOriginal = joinCvd(colorsOriginal, colorsCvd); return Plot.plot({ aspectRatio: 1, width: width, ...margins, grid: true, y: { domain: [-maxChroma, maxChroma], label: "b", ticks: 5 }, x: { domain: [-maxChroma, maxChroma], label: "a", ticks: 5 }, marks: [ Plot.dot(colorsCvd, { x: (d) => d.space100[1], y: (d) => d.space100[2], sort: (d) => d.space100[0], r: 10, fill: (d) => d.hex }), Plot.dot( hexOriginal, Plot.pointer({ x: (d) => d.space100[1], y: (d) => d.space100[2], r: 12, stroke: (d) => d.hexOriginal, strokeWidth: 2 }) ), Plot.text( hexOriginal, Plot.pointer({ x: (d) => d.space100[1], y: (d) => d.space100[2], text: (d) => d.hexOriginal, textAnchor: "start", dx: 17 }) ) ] }); }34:T4ac,lumBPlot = function ({ colorsOriginal = [], colorsCvd = [], maxChroma = 20, width = 500, margins = { marginTop: 20, marginRight: 20, marginBottom: 30, marginLeft: 35 }, dark = false } = {}) { const hexOriginal = joinCvd(colorsOriginal, colorsCvd); return Plot.plot({ aspectRatio: 1, width: width, ...margins, grid: true, y: { domain: [-maxChroma, maxChroma], label: "b", ticks: 5 }, x: { domain: [100, 0], label: "luminance", ticks: 11 }, marks: [ Plot.dot(colorsCvd, { x: (d) => d.space100[0], y: (d) => d.space100[2], sort: (d) => d.space100[1], r: 10, fill: (d) => d.hex }), Plot.dot( hexOriginal, Plot.pointer({ x: (d) => d.space100[0], y: (d) => d.space100[2], r: 12, stroke: (d) => d.hexOriginal, strokeWidth: 2 }) ), Plot.text( hexOriginal, Plot.pointer({ x: (d) => d.space100[0], y: (d) => d.space100[2], text: (d) => d.hexOriginal, textAnchor: "start", dx: 17 }) ) ] }); }35:T4c1,aLumPlot = function ({ colorsOriginal = [], colorsCvd = [], maxChroma = 20, width = 200, margins = { marginTop: 20, marginRight: 20, marginBottom: 30, marginLeft: 35 }, dark = false } = {}) { const hexOriginal = joinCvd(colorsOriginal, colorsCvd); return Plot.plot({ aspectRatio: 1, width: width, ...margins, grid: true, x: { domain: [-maxChroma, maxChroma], label: "a", ticks: 5 }, y: { domain: [100, 0], reverse: true, label: "luminance", ticks: 11 }, marks: [ Plot.dot(colorsCvd, { x: (d) => d.space100[1], y: (d) => d.space100[0], sort: (d) => d.space100[2], r: 10, fill: (d) => d.hex }), Plot.dot( hexOriginal, Plot.pointer({ x: (d) => d.space100[1], y: (d) => d.space100[0], r: 12, stroke: (d) => d.hexOriginal, strokeWidth: 2 }) ), Plot.text( hexOriginal, Plot.pointer({ x: (d) => d.space100[1], y: (d) => d.space100[0], text: (d) => d.hexOriginal, textAnchor: "start", dx: 17 }) ) ] }); }36:T6a5,distancePlot = function ({ colorsOriginal = [], colorsCvd = [], distancesCvd = [], dark = false } = {}) { const nColor = colorsOriginal.length; const marginLeft = 0; const marginRight = 50; const cell = { width: 30, padding: 0.05 }; const width = nColor * cell.width + cell.padding * cell.width * (nColor + 1) + marginLeft + marginRight; // correct aspectRatio for margin const aspect = width / (width - 50); return Plot.plot({ caption: "Euclidean distance through color space", marginLeft: marginLeft, marginRight: marginRight, width: width, padding: cell.padding, aspectRatio: aspect, x: { axis: false }, y: { axis: false, reverse: true }, color: { scheme: "greys", domain: [1, 100], reverse: !dark, type: "log" }, marks: [ Plot.cell(distancesCvd, { x: "i", y: "j", fill: "distance", rx: cell.width / 10, ry: cell.width / 10 }), Plot.text( distancesCvd, colorContrast({ x: "i", y: "j", text: (d) => d3.format(".1f")(d.distance), fill: "distance" }) ), Plot.dot(colorsCvd, { x: "i", y: "i", fill: "hex", r: 10 }), Plot.dot( colorsOriginal, Plot.pointer({ x: "i", y: "i", r: 12, stroke: (d) => d.hex, strokeWidth: 2 }) ), Plot.text( colorsOriginal, Plot.pointer({ x: "i", y: "i", text: (d) => d.hex, textAnchor: "start", dx: 17 }) ) ] }); }37:[] 2f:{"title":"Categorical Color-Scale Viewer","cells":[{"id":0,"value":"# Categorical Color-Scale Viewer\n\nThis is a first attempt at a tool for designing categorical color-scales, while taking into account color-vision deficiency (CVD) and dark mode.\n\nEach of the colors has an input, where you can change the color; you can add and remove colors using the buttons.\nThe initial set is a six-color scale, using Tableau10 as inspiration. I cannot make a \"good\" color scale, respecting CVD, with more than six colors; maybe you can :)\n\nTo save your work, use this ${bookmark.create(colorsPicked, \"bookmark to this notebook, containing the picked colors\")}. You can also follow this custom link to Elijah Meeks' and Susie Lu's [Vis Palette tool](${paletteLink}).","pinned":false,"hidden":false,"mode":"md"},{"id":758,"value":"scheme = colorsPicked.colors","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"viewof colorsPicked = makePicker(colors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"makeChanger(viewof colorsPicked)","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof dark = inputMode({ value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"viewof cvd = inputCvd()","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof space = Inputs.radio(colorUtils.mapColorSpaces(), {\n label: \"Color space\",\n value: \"munsell\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"swatchNew(\n csd.colorsOriginal.map((x) => x.hex),\n { caption: \"No CVD simulation\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"{\n const cols = scheme.map(\n _.flow([\n colorUtils.hexToSRgb,\n colorUtils.linearRgbFromSRgb,\n (x) => math.multiply(matCvd, x),\n colorUtils.clampRgbGamut,\n colorUtils.linearRgbToSRgb,\n colorUtils.hexFromSRgb\n ])\n );\n\n return swatchNew(\n csd.colorsCvd.map((x) => x.hex),\n { caption: label }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"colorScalePlot(csd)","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"There's a *lot* going on with this notebook. The main purposes are to:\n \n - help you evaluate the effectiveness of a categorical color-scale\n - under various forms of color-vision deficiency\n - by showing you:\n - an orthographic projection of the colors with a given color space\n - showing you the difference between each color-pair, calculated using Euclidean distance within that color space\n \nAlthough it does not affect the distance calculations, you can also view the charts using either light mode or dark mode.\n\nFor protan and detueran color-vision deficiencies, pay attention to the *lunminance-b* plane (upper right) for color separation; for tritan, pay attention to the lower-left. ","pinned":false,"hidden":false,"mode":"md"},{"id":689,"value":"This notebook has a lot of its plumbing on the outside. By this, I mean that there are a lot of notebook cells dedicated to managing the animated transitions between different states, e.g. CVD conditions or color spaces.\n\nAn unfortunate consequence is that there is not a concise set of cells that you can import into your own notebook. You are very welcome to use this for your own purposes, but it may be easier for you, instead, to fork and adapt this notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"## Calculations","pinned":false,"hidden":false,"mode":"md"},{"id":688,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":687,"value":"All of the calculations are based on `scheme`, an array of hex strings. This can be for a categorical scale, or for an evenly-sampled continuous scale. In this case, `scheme` is set using the input at the top of the notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":731,"value":"colors = bookmark.read().colors ?? [\n \"#4b94d8\",\n \"#f0a70a\",\n \"#65d0d7\",\n \"#518c31\",\n \"#fbd82d\",\n \"#d17b95\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":683,"value":"The only place `scheme` is used is to create `csd`, \"color-scale data\". If you want to bypass the `scheme` input, you can substitute your own array and the rest of the notebook will respond.","pinned":false,"hidden":false,"mode":"md"},{"id":777,"value":"paletteLink = `https://projects.susielu.com/viz-palette?colors=${JSON.stringify(\n scheme\n)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":682,"value":"csd = colorScaleData(scheme, {\n fnCvd: fnCvd,\n fnSpace100: fnSpace100,\n label: \"\",\n dark: dark\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"### Plots","pinned":false,"hidden":false,"mode":"md"},{"id":679,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":678,"value":"aBPlot(csd)","pinned":true,"hidden":false,"mode":"ojs"},{"id":677,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":676,"value":"lumBPlot(csd)","pinned":true,"hidden":false,"mode":"ojs"},{"id":675,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":674,"value":"aLumPlot(csd)","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":672,"value":"distancePlot(csd)","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"### Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":669,"value":"joinCvd = function (orig, cvd) {\n return tidy.tidy(\n orig,\n tidy.transmute({\n i: (d) => d.i,\n hexOriginal: (d) => d.hex\n }),\n tidy.leftJoin(cvd, { by: [\"i\"] })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"asSRgb = function(x) {\n // caution - very simple, not a lot of validation\n if (Array.isArray(x)) {\n return x\n }\n\n if (typeof x === \"string\") {\n return colorUtils.hexToSRgb(x)\n }\n\n throw \"asSRgb() input unknown\"\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"asHex = function (x) {\n // caution - very simple, not a lot of validation\n if (typeof x === \"string\") {\n return x;\n }\n\n if (Array.isArray(x)) {\n return colorUtils.hexFromSRgb(x);\n }\n\n throw \"asHex() input unknown\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"margins = ({ marginTop: 20, marginRight: 20, marginBottom: 30, marginLeft: 35 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":462,"value":"label = {\n const filtered = transCvd.filter((x) => x.weight > 0);\n const state = filtered[0].state;\n const isTransition = filtered.length > 1;\n const isNone = cvd.severity == 0 || state == \"none\";\n\n return isTransition\n ? \"In transition\"\n : isNone\n ? \"No CVD simulation\"\n : `CVD simulation: ${state} ${d3.format(\".0%\")(cvd.severity)}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"swatchNew = function (colors, { caption = \"\" } = {}) {\n const data = colors.map((x, i) => ({ i, hex: x }));\n\n return Plot.plot({\n width: data.length * 35,\n aspectRatio: 1,\n caption: caption,\n padding: 0,\n margin: 0,\n marginBottom: 5,\n x: { axis: false, grid: false },\n y: { axis: false, grid: false },\n marks: [Plot.cell(data, { x: \"i\", y: 0, fill: \"hex\", r: 20 })]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":663,"value":"swatchNew([\"#663399\", \"#808080\"], { caption: \"A caption\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"### Color data","pinned":false,"hidden":false,"mode":"md"},{"id":256,"value":"chromaMax = tidy.tidy(\n [],\n tidy.expand({\n space: Array.from(colorUtils.mapColorSpaces().values()),\n hex: [\"#0000FF\", \"#00FF00\", \"#00FFFF\", \"#FF0000\", \"#FF00FF\", \"#FFFF00\"],\n condition: [\"none\", \"protan\", \"deuteran\", \"tritan\"]\n }),\n tidy.mutate({\n sRgb: (d) => colorUtils.hexToSRgb(d.hex),\n sRgbCvd: (d) =>\n _.flow([\n colorUtils.linearRgbFromSRgb,\n (x) => math.multiply(matrixCvd(d.condition, 1), x),\n colorUtils.clampRgbGamut,\n colorUtils.linearRgbToSRgb\n ])(d.sRgb),\n space100Cvd: (d) =>\n _.flow([colorSpaces[d.space].fromSRgb, colorSpaces[d.space].to100])(\n d.sRgbCvd\n ),\n chroma: (d) => math.distance([0, 0], d.space100Cvd.slice(1))\n }),\n tidy.groupBy(\"space\", [\n tidy.summarize({\n chroma: tidy.max(\"chroma\")\n })\n ])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"### Transitions","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"viewof transSpace = Inputs.input()","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"transitionFilter(\n transitionGenerator(viewof space, {\n states: Array.from(colorUtils.mapColorSpaces().values())\n }),\n viewof transSpace\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"transSpace","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"transSpace","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"viewof transCvd = Inputs.input()","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"transitionFilter(\n transitionGenerator(viewof cvd.children[1], {\n states: [\"none\", \"protan\", \"deuteran\", \"tritan\"]\n }),\n viewof transCvd\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"matCvd = transitionInterpolate(transCvd, (state) =>\n matrixCvd(state, cvd.severity)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"fnCvd = (x) => {\n const matCvd = transitionInterpolate(transCvd, (state) =>\n matrixCvd(state, cvd.severity)\n );\n \n return _.flow([\n colorUtils.linearRgbFromSRgb,\n (x) => math.multiply(matCvd, x),\n colorUtils.clampRgbGamut,\n colorUtils.linearRgbToSRgb\n ])(x);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":649,"value":"fnSpace100 = (x) =>\n transitionInterpolate(transSpace, (space) =>\n _.flow([colorSpaces[space].fromSRgb, colorSpaces[space].to100])(x)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":583,"value":"## Change Log","pinned":false,"hidden":false,"mode":"md"},{"id":588,"value":"changeTable([\n {\n date: new Date(\"2023-08-01\"),\n change: [\"- convert to design categorical colors\"].join(\"\\n\")\n },\n {\n date: new Date(\"2023-07-26\"),\n change: [\n '- introduce \"driving-distance\" graphic',\n \"- repurpose as color-scale viewer\",\n \"- refactor\",\n '- rename to \"Color-Scale Viewer\"',\n \"- document\"\n ].join(\"\\n\")\n },\n {\n date: new Date(\"2023-07-20\"),\n change: [\"- hot fix for difference-table\"].join(\"\\n\")\n },\n {\n date: new Date(\"2023-07-18\"),\n change: [\n \"- add introduction\",\n \"- add custom-scheme\",\n \"- adapt Okabe-Ito to light or dark mode\"\n ].join(\"\\n\")\n },\n {\n date: new Date(\"2023-07-17\"),\n change: [\"- make public\"].join(\"\\n\")\n }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"math = import(\"https://cdn.skypack.dev/mathjs@11.8.2?\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"tidy = import(\"https://unpkg.com/@tidyjs/tidy@2.5.2/dist/es/index.js?module\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":645,"value":"import { colorContrast } from \"@observablehq/plot-colorcontrast-custom-transform\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"import { makePicker, makeChanger } from \"@ijlyttle/color-picker-bookmark\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":726,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":728,"value":"import { bookmark } from \"@severo/bookmark\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"import {\n transitionGenerator,\n transitionFilter,\n transitionInterpolate,\n Easing\n} from \"@ijlyttle/transition-helper\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"import { colorSpaces, colorUtils, ColorSpace } from \"@ijlyttle/color-utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"import { changeTable } from \"@ijlyttle/change-log\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"import { inputCvd, matrixCvd } from \"@ijlyttle/cvd-widget\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"import { apcaTextColor } from \"@ijlyttle/apca-w3-color-contrast\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { inputMode, invokeMode, styleDark } from \"@ijlyttle/dark-mode-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"invokeMode(dark)","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"styleDark()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}