2c:null 2d:["$","title",null,{"children":"Color-Vision-Deficiency Widget | Ian Lyttle | Observable"}] 32: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.33:[{"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}] 30:{"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","has_unpublished_edits":null,"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","bio":""},"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,"bio":""}],"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,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"19bbb72e1bdd409a","slug":"utilities","title":"Utilities","owner":{"id":"5c34077dfed9632a","login":"ijlyttle","name":"Ian Lyttle"}},"type":"notebook","body":{"titling":"auto","title":"Color-Vision-Deficiency Widget","cells":[{"id":0,"value":"# Color-Vision-Deficiency Widget","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof cvd = inputCvd()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"filterCvd(cvd)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"ramp(\"RdYlGn\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"cvdExample","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"dataCvd = FileAttachment(\"cvd.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"mapFunctionCvd = {\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"For convenience, a function based on `mapFunctionCvd`, that takes `condition` and `severity`, and returns a matrix:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"// (String, Number) -> Array\nfunctionCvd = function (condition, severity) {\n return mapFunctionCvd.get(condition)(severity);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"For example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"functionCvd(\"protan\", 0.15)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"// (Object, {selector: String}) -> Html\nfilterCvd = function (input, { selector = \".observablehq-root\" } = {}) {\n const mat = functionCvd(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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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-ec050e\" 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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"import { ramp, swatches } from \"@d3/color-schemes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"