3f:null 40:["$","title",null,{"children":"D3 Color Space Tester | Eric Alexander | Observable"}] 46:[] 44:{"id":"ba99eb43cd561d8d","slug":"cielab-tester","title":"D3 Color Space Tester","thumbnail":"b8f32ca79194ddd73599a24bd7176ff66cc37979af96a35f0d47bb39621e7136","access_level":"public","create_time":"$D2020-02-28T21:27:30.201Z","update_time":"$D2021-02-05T03:08:27.179Z","view_time":null,"first_public_time":"$D2020-02-28T21:30:21.867Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"0d71b28330200c43","login":"ealexander","name":"Eric Alexander","avatar_url":"https://avatars-next.observableusercontent.com/bfb4fca6017e70ace6dcc909a3343f136de2169fa60773cd22e9c900153cfe6a","tier":"starter_2024","bio":"","following":false},"version":374,"publish_version":374,"role":null,"authored":false,"authors":[{"type":"individual","id":"78bdd9d86e520c7f","login":"ealexander","name":"Eric Alexander","avatar_url":"https://avatars-next.observableusercontent.com/bfb4fca6017e70ace6dcc909a3343f136de2169fa60773cd22e9c900153cfe6a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"78bdd9d86e520c7f","login":"ealexander","name":"Eric Alexander","avatar_url":"https://avatars-next.observableusercontent.com/bfb4fca6017e70ace6dcc909a3343f136de2169fa60773cd22e9c900153cfe6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Color Space Tester","cells":[{"id":0,"value":"md`# D3 Color Space Tester`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`## CIELAB Playground`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof lStar = slider({\n min: -200, \n max: 200, \n step: 1, \n value: 0, \n title: \"L* (CIELAB)\", \n //description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof aStar = slider({\n min: -200, \n max: 200, \n step: 1, \n value: 100, \n title: \"a* (CIELAB)\", \n //description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof bStar = slider({\n min: -200, \n max: 200, \n step: 1, \n value: 100, \n title: \"b* (CIELAB)\", \n //description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html`${d3.lab(lStar,aStar,bStar).formatHex()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`Using the a* and b* values above, varying L* from 0 to 150. If the color is \"undisplayable\" according to D3, will be in all caps--otherwise, it'll be in lowercase:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"getSteps(aStar, bStar, 10, 16)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`Lightness steps at 30:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"getSteps(aStar, bStar, 30, 6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`Lightness steps at 20:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"getSteps(aStar, bStar, 20, 6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"function getSteps(a, b, l_stepSize, numSteps) {\n let spans = [];\n for (let i = 0; i < numSteps; i++) {\n let l = i * l_stepSize;\n let color = d3.lab(l,a,b);\n let hexColor = d3.lab(l, a, b).formatHex();\n let span = getColorSpan(color, hexColor, hexColor.toUpperCase());\n spans.push(span);\n }\n \n return html`${spans.join(' ')}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`Below, we make a grid for a,b combos between +/- 60 with a given value of L.\nIf the color is \"undisplayable\" according to D3, prints \"NOPE\".`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"viewof lForGrid = slider({\n min: 0, \n max: 100, \n step: 5, \n value: 60, \n title: \"L value for grid\", \n //description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"lGrid(lForGrid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"function lGrid(l) {\n let rows = [];\n let aRange = [-60,60];\n let bRange = [-60,60];\n let stepSize = 10;\n \n for (let a = aRange[0]; a <= aRange[1]; a += stepSize) {\n let row = [];\n for (let b = bRange[0]; b <= bRange[1]; b += stepSize) {\n let color = d3v4.lab(l,a,b);\n let span = getColorSpan(color, '(' + a + ',' + b + ')');\n row.push(span);\n }\n rows.push(row.join(' '));\n }\n \n return html`${rows.join('
')}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`That's a lot of NOPEs.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`## Interpolating in LAB space`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`Ok, let's try actively interpolating from black to red to white within CIELAB, using d3.interpolateLab:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"{\n let spans = [];\n let numSteps = 5;\n \n for (let i = 0; i < numSteps; i++) {\n let color = d3.color(d3.interpolateLab('#000000','#ff0000')(i / numSteps));\n spans.push(getColorSpan(color, color.formatHex()));\n }\n for (let i = 0; i <= numSteps; i++) {\n let color = d3.color(d3.interpolateLab('#ff0000','#ffffff')(i / numSteps));\n spans.push(getColorSpan(color, color.formatHex()));\n }\n \n return html`${spans.join(' ')}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`Hmm. That is _kind of_ working, in that at least we're getting \"displayable\" colors, but it's still going thorugh orange. Looks... better though?\n\nOne thing I don't know here anymore, though, is what claims we can make about perceptual linearity.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`Danielle used her student's model to approximate a JND of ~6 L* in LAB-space. Here, we'll try picking a red from ColorBrewer's RdBu ramp (#d6604d) and varying by .5, 1, and 1.5 JNDs.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"getJNDspans('#d6604d')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`_Sanity check: start at bottom and add steps of L*_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"// Sanity check: make sure we can start at the bottom and add steps of L*\n{\n let baseColor = '#bb4838';\n let colors = [];\n let lStep = 3;\n for (let i = 0; i < 7; i++) {\n colors.push(getColorPlusL(baseColor, i*lStep));\n }\n return html`${colors.map(c=>getColorSpan(c, c.formatHex(), 'NOPE', 22)).join(' ')}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"getJNDspans('#bb4838',[0,3,6,9,12,15,18])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"md`If we treat a JND as ~10 L${html`*`} (so steps of 5 L${html`*`} instead of 3 L${html`*`}):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"getJNDspans('#d6604d',[-15,-10,-5,0,5,10,15])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"getJNDspans('#d6604d',[-18,-12,-6,0,6,12,18])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`Here, with the corresponding ColorBrewer blue (#4393c3):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"getJNDspans('#4393c3');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"md`And again with steps of 5 L*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"getJNDspans('#4393c3',[-15,-10,-5,0,5,10,15])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md`And now with steps of 6 L*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"getJNDspans('#4393c3',[-18,-12,-6,0,6,12,18])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"md`Danielle suggested adding steps of .5 JNDs after we saw ceiling effects in pilot testing. Here are [0,3,6,12,18,6,9,12,18,24,12,15,18,24,30]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"getJNDspans('#bb4838',[0,3,6,12,18,6,9,12,18,24,12,15,18,24,30].map(d=>d-9),22)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"getJNDspans('#a03024',[0,3,6,9,12,15,18,21,24,27,30,33],22)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"d3.lab('#7d070a')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"d3.lab('#8e1e17')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"{\n let c = d3.lab('#a03024');\n c.l += 6;\n return c.formatHex()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"{\n let arr = [];\n for (let i = 0; i < 6; i+=.25) {\n arr.push([i,3*Math.round(i / 3)]);\n }\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"{\n let color = d3.lab('#bb4838');\n let color2 = d3.lab('#bb4838');\n color2.l += 15;\n return [color, color2, color.formatHex(), color2.formatHex()];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"d3.lab(d3.lab('#ff8872').l, d3.lab('#ff8872').a, d3.lab('#ff8872').b).formatHex()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"function getJNDspans(baseColor, deltas, fontSize) {\n let color = d3.lab(baseColor);\n if (deltas === undefined) { deltas = [-9,-6,-3,0,3,6,9]; }\n if (fontSize === undefined) { fontSize == 22; }\n \n let colors = [];\n deltas.forEach(function(delta) {\n colors.push(getColorPlusL(baseColor, delta));\n });\n \n return html`${colors.map(c=>getColorSpan(c, c.formatHex(), 'NOPE', fontSize)).join(' ')}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"function getColorPlusL(color, lStar) {\n let labColor = d3.lab(color);\n labColor.l += lStar;\n return labColor;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`## CIELCH Playground`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`Here, seeing whether we're getting similar behavior within the CIELCH color space.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof lch_l = slider({\n min: -200, \n max: 200, \n step: 1, \n value: 0, \n title: \"Lightness (CIELCH)\", \n //description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof lch_c = slider({\n min: -200, \n max: 200, \n step: 1, \n value: 100, \n title: \"Chroma (CIELCH)\", \n //description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof lch_h = slider({\n min: -200, \n max: 200, \n step: 1, \n value: 40, \n title: \"Hue (CIELCH)\", \n //description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"html`${d3.lch(lch_l,lch_c,lch_h).formatHex()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`Using the chroma and hue values above, varying lightness from 0 to 150:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"{\n let spans = [];\n for (let l = 0; l <= 150; l += 10) {\n let hexColor = d3.lch(l, lch_c, lch_h).formatHex();\n let span = '' + hexColor + '';\n spans.push(span);\n }\n \n return html`${spans.join(' ')}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`### Appendix: Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"function getColorSpan(color, successText, failureText, fontSize) {\n if (successText === undefined) { successText = color; }\n if (failureText === undefined) { failureText = 'NOPE'; }\n let fontSizeStr = fontSize !== undefined ? '; font-size:' + fontSize + 'px' : '';\n let span = '';\n span += color.displayable() ? successText : failureText;\n span += '';\n return span;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`### Appendix: Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"d3v4 = require('d3@4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"