25:["$","title",null,{"children":"Color-Scale Viewer | Yuichi Yazaki | Observable"}] 49:T4ee,There's a *lot* going on with this notebook. The main purposes are to: - help you evaluate the effectiveness of color scales - under various forms of color-vision deficiency - by showing you: - an orthographic projection of the colors with a given color space - showing you the difference between each color-pair, calculated using Euclidean distance within that color space Although it does not affect the distance calculations, you can also view the charts using either light mode or dark mode. The notebook comes with some built-in color scales, including Okabe-Ito, which is designed to address color-vision deficiency (CVD). For protan and detueran deficiencies, pay attention to the *lunminance-b* plane (upper right) for color separation; for tritan, pay attention to the lower-left. You can use the viewer for categorical scales or for continuous scales (on an evenly-spaced sequence of points). - for categorical scales, look out for colors that are very close to each other, particularly under CVD. - for continuous scales, ensure that neighboring colors differ by roughly the same amount, and that distant colors are, in fact, distant. You can modify the "Custom" option by using your own array of hex-codes, immediately below:4a: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 }; }4b: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}

`; }4c: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 }) ) ] }); }4d: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 }) ) ] }); }4e: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 }) ) ] }); }4f: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 }) ) ] }); }50:[] 29:{"id":"36045c80c9ab4d35","slug":null,"title":"Color-Scale Viewer","thumbnail":"e8ef210c4e7cf202d019e407779bf6a518d7c1bf7af5f15f752c6f5c509c3210","access_level":"public","create_time":"$D2024-08-25T03:32:41.505Z","update_time":"$D2024-08-25T03:32:41.505Z","view_time":null,"first_public_time":"$D2024-08-25T03:32:41.505Z","has_unpublished_edits":null,"fork":{"id":"27f37db6caf0d270","slug":"color-scale-viewer","title":"Color-Scale Viewer","owner":{"id":"5c34077dfed9632a","login":"ijlyttle","name":"Ian Lyttle"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":"starter_2024","bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false},"version":715,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false}],"members":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"role":"editor"},{"type":"team","id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Color-Scale Viewer","cells":[{"id":0,"value":"# Color-Scale Viewer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"viewof scheme = Inputs.radio(schemeMap, {\n label: \"Scheme\",\n value: schemeMap.get(\"Tableau 10\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof dark = inputMode({ value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"viewof cvd = inputCvd()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"viewof space = Inputs.radio(colorUtils.mapColorSpaces(), {\n label: \"Color space\",\n value: \"munsell\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"swatchNew(\n csd.colorsOriginal.map((x) => x.hex),\n { caption: \"No CVD simulation\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"colorScalePlot(csd)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":576,"value":"custom = [\n \"#802a1d\",\n \"#a44f1b\",\n \"#c37628\",\n \"#db9e44\",\n \"#ebc777\",\n \"#e3e3e3\",\n \"#77d9f0\",\n \"#37b7e3\",\n \"#2790c9\",\n \"#2b69a8\",\n \"#3b4280\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"## Calculations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":688,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":686,"value":"scheme","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"schemeMap = new Map([\n [\"Tableau 10\", d3.schemeTableau10],\n [\n \"Okabe-Ito\",\n [\n \"#E69F00\",\n \"#56B4E9\",\n \"#009E73\",\n \"#F0E442\",\n \"#0072B2\",\n \"#D55E00\",\n \"#CC79A7\",\n \"#000000\"\n ]\n ],\n [\"Viridis\", d3.ticks(0, 1, 10).map(d3.interpolateViridis)],\n [\"Plasma\", d3.ticks(0, 1, 10).map(d3.interpolatePlasma)],\n [\"Custom\", custom]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":682,"value":"csd = colorScaleData(scheme, {\n fnCvd: fnCvd,\n fnSpace100: fnSpace100,\n label: \"\",\n dark: dark\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"### Plots","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":679,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"aBPlot(csd)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"lumBPlot(csd)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"aLumPlot(csd)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"distancePlot(csd)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"### Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"margins = ({ marginTop: 20, marginRight: 20, marginBottom: 30, marginLeft: 35 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"swatchNew([\"#663399\", \"#808080\"], { caption: \"A caption\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"### Color data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"### Transitions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"viewof transSpace = Inputs.input()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"transSpace","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"transSpace","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"viewof transCvd = Inputs.input()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"matCvd = transitionInterpolate(transCvd, (state) =>\n matrixCvd(state, cvd.severity)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"## Change Log","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":588,"value":"changeTable([\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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"math = import(\"https://cdn.skypack.dev/mathjs@11.8.2?\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"tidy = import(\"https://unpkg.com/@tidyjs/tidy@2.5.2/dist/es/index.js?module\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"import { colorContrast } from \"@observablehq/plot-colorcontrast-custom-transform\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import {\n transitionGenerator,\n transitionFilter,\n transitionInterpolate,\n Easing\n} from \"@ijlyttle/transition-helper\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import { colorSpaces, colorUtils, ColorSpace } from \"@ijlyttle/color-utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"import { changeTable } from \"@ijlyttle/change-log\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import { inputCvd, matrixCvd } from \"@ijlyttle/cvd-widget\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"import { apcaTextColor } from \"@ijlyttle/apca-w3-color-contrast\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import { inputMode, invokeMode, styleDark } from \"@ijlyttle/dark-mode-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"invokeMode(dark)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"styleDark()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null