2b:null 2c:["$","title",null,{"children":"Color-Vision-Deficiency Widget | Ian Lyttle | Observable"}] 31:T539,### Filter The `filterCvd()` function has two arguments: - `input`: `Object`, value returned by `inputCvd()`. - an options `Object`, which may have a single element: - `selector`: `String`, CSS selector for the filter, default: `".observablehq-root"`. ```js filterCvd(cvdExample) ``` I am not showing a live example because this notebook already has an active filter. It returns an [`html` string literal](https://observablehq.com/@observablehq/stdlib#htmlSection), which has the side-effect of applying an [SVG filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) to the elements described by the `selector`. The default `selector` is `".observablehq-root"`, which aims to capture all Observable cell-outputs. Some caveats: - You might wish apply the filter selectively, i.e. to individual cell-outputs. Unfortunately, as far as I can tell, Observable does not explicitly associate output elements with cell names. You may be stuck with the default `selector` for the time being. - Beware of using the wildcard `selector`, `"*"`. It will apply the filter repeatedly to all the enclosing elements, which will result in an inaccurate display. I imagine the same sort of thing would happen using `"div"`. In short, for now, it may be easiest to use only one widget per notebook, applied to the entire notebook.32:[{"id":"08a7ade5c5e193e7521977eac8db325f71f845350a54faaca6979dbb9d29992df983ecdb46323c108d79ca61ec880eeeec3c3b90b1efbf4071608653685c3373","href":"https://static.observableusercontent.com/files/08a7ade5c5e193e7521977eac8db325f71f845350a54faaca6979dbb9d29992df983ecdb46323c108d79ca61ec880eeeec3c3b90b1efbf4071608653685c3373","name":"image.png","type":"image/png","lastModified":1644091380325.976,"size":1896249},{"id":"39c40020bc096ffd0119f1ddf682e771360bf6c1e9d9e21cd342ddc7929870e64ebeb991d0ea1803398a119d6b572abd914b0f6ea6d0d055ee31264fa0d59cc8","href":"https://static.observableusercontent.com/files/39c40020bc096ffd0119f1ddf682e771360bf6c1e9d9e21cd342ddc7929870e64ebeb991d0ea1803398a119d6b572abd914b0f6ea6d0d055ee31264fa0d59cc8","name":"cvd.json","type":"application/json","lastModified":1644087174992.771,"size":4077}] 2f:{"id":"d4f24568c20b1214","slug":"cvd-widget","title":"Color-Vision-Deficiency Widget","thumbnail":"2db56b90d9813479203c2df649de19540f17339e15bd3d56a379dd4a16ba5a4e","access_level":"public","create_time":"$D2022-02-05T04:07:36.279Z","update_time":"$D2023-07-18T12:12:11.170Z","view_time":null,"first_public_time":"$D2022-02-06T19:35:54.130Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"5c34077dfed9632a","login":"ijlyttle","name":"Ian Lyttle","avatar_url":"https://avatars-next.observableusercontent.com/566ff16eaaa5c74f010ed857309e15b68a64d986603196c092593394954df702","tier":"starter_2024"},"version":869,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"522327b52a854639","login":"ijlyttle","name":"Ian Lyttle","avatar_url":"https://avatars-next.observableusercontent.com/566ff16eaaa5c74f010ed857309e15b68a64d986603196c092593394954df702","tier":null}],"members":[{"type":"individual","id":"522327b52a854639","login":"ijlyttle","name":"Ian Lyttle","avatar_url":"https://avatars-next.observableusercontent.com/566ff16eaaa5c74f010ed857309e15b68a64d986603196c092593394954df702","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"19bbb72e1bdd409a","slug":"utilities","title":"Utilities","owner":{"id":"5c34077dfed9632a","login":"ijlyttle","name":"Ian Lyttle"}},"type":"notebook","body":{"title":"Color-Vision-Deficiency Widget","cells":[{"id":0,"value":"# Color-Vision-Deficiency Widget","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"html`

\n ${await FileAttachment(\"image.png\").image()}\n

Image: Colour Smoke Rainbow Design by pixabay user cmart29

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof cvd = inputCvd()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"filterCvd(cvd)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"You can use this widget to simulate [color-vision deficiency](https://en.wikipedia.org/wiki/Color_blindness) (CVD) on your (or anyone's) Observable notebook outputs. It follows the approach of the [R colorspace package](https://hclwizard.org/r-colorspace/), which uses the matrix-based model provided by [Machado et al. (2009)](https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html).\n\nThe widget consists of an input and a filter:\n - use `inputCvd()` to specify the color-vision deficiency.\n - connect the input to `filterCvd()` to apply the filter to the notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":318,"value":"You can use this to evaluate [color schemes](https://observablehq.com/@d3/color-schemes) 🙀:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"ramp(\"RdYlGn\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"Or even entire [charts](https://vega.github.io/vega-lite/examples/stacked_area_stream.html):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":241,"value":"viewof steamgraph = embed(\n {\n $schema: \"https://vega.github.io/schema/vega-lite/v5.json\",\n width: 500,\n height: 250,\n data: {\n url:\n \"https://cdn.jsdelivr.net/npm/vega-datasets@2/data/unemployment-across-industries.json\"\n },\n mark: \"area\",\n encoding: {\n x: {\n timeUnit: \"yearmonth\",\n field: \"date\",\n axis: { domain: false, format: \"%Y\", tickSize: 0 }\n },\n y: {\n aggregate: \"sum\",\n field: \"count\",\n axis: null,\n stack: \"center\"\n },\n color: { field: \"series\", scale: { scheme: \"category20b\" } }\n }\n },\n { renderer: \"svg\" } // for some reason, the filter works on Safari only for SVG\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"I include these D3 and Vega-Lite examples with respect:\n- It is well known that red-yellow-green is problematic, but it is *so* ingrained in our visual vocabulary.\n- I think this Vega-Lite steamgraph remains effective because the stacking order corresponds to the legend order.\n\nI have noticed that, on Safari, the filter works for Vega only when rendered as SVG.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"## How to use\n\nThe widget components are functions. \nTo import into your notebook:\n\n```js\nimport {inputCvd, filterCvd} from \"@ijlyttle/cvd-widget\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"### Input\n\nThe `inputCvd()` function takes an `options` argument, an `Object` that can have: \n\n- `label`: `String`, with default: `\"Color-vision deficiency\"`.\n- `condition`: `String` `[\"none\", \"protan\", \"deuteran\", \"tritan\"`], with default: `\"deuteran\"`.\n- `severity`: `Number` ${tex`0 \\leq t \\leq 1`}, with default: `0`.\n\nIt uses Observable's `viewof` interface. \nFor example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"viewof cvdExample = inputCvd({ condition: \"none\", label: \"Custom label\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"Its value is available as an Observable variable:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"cvdExample","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":347,"value":"## How it works\n\nAs noted above, this widget follows the approach of the [R colorspace package](https://hclwizard.org/r-colorspace/), which uses the matrix-based model provided by [Machado et al. (2009)](https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html). \n\nThe matrix model assumes there are three CVD conditions, each with a severity expressed as a number from zero to one. \n\nAn [R script](https://gist.github.com/ijlyttle/ce8425876bc65539a68136d574178762) was used to create a JSON file containing the matrices.\nThis file is attached to the notebook as `cvd.json`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"dataCvd = FileAttachment(\"cvd.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"This object is used to create a [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) where:\n- each key is the name of a condition.\n- each value is a function that takes a number ${tex`0 \\leq t \\leq 1`}, and returns a piecewise-interpolated matrix.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"mapMatrixCvd = {\n var result = new Map(\n Object.entries(dataCvd).map(([k, v]) => [k, d3.piecewise(v)])\n );\n\n result.set(\"none\", (t) => [\n [1, 0, 0],\n [0, 1, 0],\n [0, 0, 1]\n ]);\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"`matrixCvd()` takes `condition` and `severity`, returns the CVD matrix for RGB values. Note that the matrix is in row-major form.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"// (String, Number) -> Array\nmatrixCvd = function (condition, severity) {\n return mapMatrixCvd.get(condition)(severity);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"For example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"matrixCvd(\"protan\", 0.15)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"`functionCvd()` also takes `condition` and `severity`. It returns a function that, given a CSS `color`, returns the hex-code of that color with the CVD matrix applied:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":690,"value":"// string, number -> (color -> string)\n//\n// given a condition and a severity,\n// returns a function that given a color,\n// returns a hexcode\nfunctionCvd = function (condition, severity) {\n const mat = matrixCvd(condition, severity);\n\n return function (color) {\n const vec = Color.default(color).array().map(sRGB_to_linearRGB);\n\n const vecCvd = math.multiply(mat, vec).map(linearRGB_to_sRGB);\n\n return Color.default.rgb(vecCvd).hex();\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"We can use this function to convert an array of colors:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":750,"value":"[\"#FF0000\", \"#00FF00\", \"#0000FF\"].map(functionCvd(\"deuteran\", 1.0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"TODO: A quarto document where I generate a test-values using R's colorspace, then compare to these calculations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":772,"value":"Color.default(\"red\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"The function `filterCvd()` returns an HTML literal that:\n- provides some feedback on where the filter is applied.\n- applies the filter according to the `selector`.\n- [defines the filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) according to `input.condition` and `input.severity`.\n\nAlthough this function returns HTML, we call it for the side-effect that the HTML provides.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"// (Object, {selector: String}) -> Html\nfilterCvd = function (input, { selector = \".observablehq-root\" } = {}) {\n const mat = matrixCvd(input.condition, input.severity);\n\n return html`\n Applying CVD filter using selector '${selector}'.\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"Finally, a [form input](https://github.com/observablehq/inputs#inputsforminputs-options) is defined; its value is an `Object` with `condition` and `severity`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"// Object -> Html\ninputCvd = function ({\n label = \"Color-vision deficiency\",\n condition = \"deuteran\",\n severity = 0\n} = {}) {\n label = label || \"\";\n\n const inputCondition = Inputs.radio(\n new Map([\n [\"none\", \"none\"],\n [\"protan (red)\", \"protan\"],\n [\"deuteran (green)\", \"deuteran\"],\n [\"tritan (blue)\", \"tritan\"]\n ]),\n { label: \"Condition\", value: condition }\n );\n\n const inputSeverity = Inputs.range([0, 1], {\n label: \"Severity\",\n value: severity,\n step: 0.01\n });\n\n return Inputs.form(\n { condition: inputCondition, severity: inputSeverity },\n {\n // applying the \"oi-\" class to the label seems hacky\n template: (inputs) =>\n html`

${label}${inputs.condition}${inputs.severity}

`\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"## Unresolved thoughts\n\nThere's a couple of things I'd like to sort out.\n\n- The color-vision deficiency model used here is a *model*. \nI trust and respect the work in the [colorspace package](https://hclwizard.org/r-colorspace/), and by extension, the [Machado et al. (2009) model](https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html). \nHowever, I don't have enough experience to judge for myself the accuracy, or more importantly, the usefulness of this model. \nThis is likely a shortcoming in me, rather than in the model.\n\n- I'd like to provide a self-contained widget with an API something like:\n\n ```js\n widgetCvd = function(selector, options)\n ```\n\n This would turn a two-step process: `inputCvd()` and `filterCvd()`, into a one-step process.\n\n My problem is that I don't know how to manage reactivity *within* an Observable cell.\n More concretely, I don't know how to update the filter within the same cell that defines the input. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":824,"value":"## Change log","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":833,"value":"viewof changes = changeTable([\n { date: new Date(\"2023-06-17\"), change: \"added change log\" },\n {\n date: new Date(\"2023-06-16\"),\n change:\n 'updated styling for `label` in `cvdInput()`: new Observable `class` is `\"oi-66c06c\"`'\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":865,"value":"import { changeTable } from \"@ijlyttle/change-log\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"import { ramp, swatches } from \"@d3/color-schemes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"Color = import(\"https://cdn.skypack.dev/color@4.2.3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"Color.default(\"red\").array()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"math = import(\"https://cdn.skypack.dev/mathjs@11.5.1?\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"In a January 2023 release of the [R colorspace package](http://colorspace.r-forge.r-project.org/), on which this work is based, there was an update to the CVD functions. Specifically, they convert to linear RGB to apply the CVD transformation, then convert back.\n\nThese functions are translated from their source code:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":776,"value":"sRGB_to_linearRGB = function (x) {\n x = x / 255;\n const y = x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);\n return y * 255;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"linearRGB_to_sRGB = function (y) {\n y = y / 255;\n const x =\n y <= 0.03928 / 12.92 ? 12.92 * y : 1.055 * Math.pow(y, 1 / 2.4) - 0.055;\n return x * 255;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"As best as I can tell, the CSS filter just \"does the right thing\". However, these functions are used in `functionCvd()`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"