2d:null 2e:["$","title",null,{"children":"Color Conversion & Interpolation Tool | cadasa | Observable"}] 33:T4e7,message = { let i = 0; const text = "Color will be interpolated here"; let message; while (i < text.length) { await Promises.delay(40); let span = html`${text.substr(i, 1)}`; span.style.color = d3.interpolateSpectral(i / text.length); span.style.opacity = opacity2 + "%"; span.setAttribute("value", i); span.setAttribute("ascending", "ascending"); if (i == 0) { message = html`${span}`; } else { message = html`${message.innerHTML}${span}`; } i = i + 1; //yield html`

${message}

`; } yield html`

${message}

`; /* while (i >= text.length) { await Promises.delay(100); let current_message = html`

${message}

`; let current_spans = current_message.firstChild.children; for (let span of current_spans) { let v = +span.getAttribute("value"); if ((v == text.length) | (v == -1)) { span.toggleAttribute("ascending"); } span.hasAttribute("ascending") ? v-- : v++; span.setAttribute("value", v); span.style.color = d3.interpolateViridis(v / text.length); // span.style.fontSize = Math.sin(v / 10) + 20 + "px"; } i = i + 1; yield current_message; }*/ }34:[] 31:{"id":"2763decaf60334f7","slug":"color-conversion-tool","title":"Color Conversion & Interpolation Tool","thumbnail":"7a5d7e76d777dfbb46733c6dfd1eeeb07d42d6e7041d4073940720fade2d81cc","access_level":"public","create_time":"$D2022-04-10T16:30:15.351Z","update_time":"$D2023-08-17T09:05:18.519Z","view_time":null,"first_public_time":"$D2022-04-11T10:03:52.252Z","has_unpublished_edits":null,"fork":{"id":"2fdd1e4a80a8144a","slug":"interactive-color-namer","title":"Interactive color namer","owner":{"id":"ecf037f5c1847e7a","login":"palewire","name":"Ben Welsh"}},"stars":1,"starred":false,"owner":{"type":"team","id":"f2c21786e0c9f50c","login":"cadasa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ab674faa5225df87e3b6d0c39c11f8240464927b74871667227ac0f6e47fda2b","tier":"starter_2024","bio":""},"version":1382,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d335f8179e5150bf","login":"cadasa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ab674faa5225df87e3b6d0c39c11f8240464927b74871667227ac0f6e47fda2b","tier":null,"bio":""}],"members":[{"type":"individual","id":"d335f8179e5150bf","login":"cadasa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ab674faa5225df87e3b6d0c39c11f8240464927b74871667227ac0f6e47fda2b","tier":null,"role":"editor"}],"comments":[{"id":"705b672a1ef0980f","reply_to_id":null,"content":"Hi, is there any way to pick color instantly without pressing Submit button?","create_time":"$D2024-02-09T21:39:18.056Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"8fbae61e137fe2d2","login":"alexp4","name":"AlexP","avatar_url":"https://avatars-next.observableusercontent.com/241d304866a4dd41ff0ada2e7c5921ec8ed7f452790511f77d0a4a30b7bffb70","tier":null}},{"id":"81b3de19317d9388","reply_to_id":"705b672a1ef0980f","content":"Yes, change submit: false in the viewof picker","create_time":"$D2024-02-09T21:58:18.905Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d335f8179e5150bf","login":"cadasa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ab674faa5225df87e3b6d0c39c11f8240464927b74871667227ac0f6e47fda2b","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Color Conversion & Interpolation Tool","cells":[{"id":365,"value":"title = md`# Color Conversion & Interpolation Tool\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"input = md`### Input Color:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"dashboard1 = html` \n \n \n \n \n

\n ${viewof as}\n ${viewof picker}\n ${viewof opacity}\n ${viewof rgbaExample}\n ${viewof hsvaExample}\n ${viewof hslaExample}\n \n ${viewof pickerColorSpace}\n ${md`#### Ajdust parameters:`}\n ${viewof colorPickerForm}\n ${viewof colorPickerForm1}\n ${viewof colorPickerForm2}\n ${swatches([\"rgb\" + \"(\" + rgb1 +\n \")\"])}\n ${pickerColorSpace[1].channel[0]},\n${pickerColorSpace[1].channel[1]}, ${pickerColorSpace[1].channel[2]}(${colorPickerForm.toFixed(2)}, \n ${colorPickerForm1.toFixed(2)}, ${colorPickerForm2.toFixed(2)})\n

\n ${viewof pickerColorSpace2}\n ${rgb22}\n ${viewof colorPickerForm20}\n ${viewof colorPickerForm21}\n ${viewof colorPickerForm22}\n

\n ${md`#### Collect 2 or 3 colors to interpolate perceptually:`} \n ${viewof button}\n ${md`

`}\n ${cs}\n ${md`

`}\n ${viewof interpolate}\n ${viewof n}\n ${csi}\n ${viewof opacity2}\n

  ${pickerColorSpace2[1].channel[0]},\n${pickerColorSpace2[1].channel[1]}, ${pickerColorSpace2[1].channel[2]}(${cv2[0].toFixed(2)}, ${cv2[1].toFixed(2)}, ${cv2[2].toFixed(2)})

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"viewof colorPickerForm20 = Inputs.range([Math.min(pickerColorSpace2[1].min[0], cv2[0]),\n Math.max(pickerColorSpace2[1].max[0], cv2[0])], \n {label: pickerColorSpace2[1].channel[0].toUpperCase(), value: cv2[0],\n format: (d) => d.toFixed(2), disabled: true,\n precision: 2\n }\n )\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"viewof colorPickerForm21 = Inputs.range([Math.min(pickerColorSpace2[1].min[1], cv2[1]),\n Math.max(pickerColorSpace2[1].max[1], cv2[1])], \n {label: pickerColorSpace2[1].channel[1].toUpperCase(), value: cv2[1],\n format: (d) => d.toFixed(2), disabled: true,\n precision: 2\n }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"viewof colorPickerForm22 = Inputs.range([Math.min(pickerColorSpace2[1].min[2], cv2[2]),\n Math.max(pickerColorSpace2[1].max[2], cv2[2])], \n {label: pickerColorSpace2[1].channel[2].toUpperCase(), value: cv2[2],\n format: (d) => d.toFixed(2), disabled: true,\n precision: 2\n }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"viewof button = Inputs.button(\"Click me to collect this color\",{value: null, reduce: () => \"rgb\" + \"(\" + rgb2it + \")\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"viewof opacity = Inputs.range([0, 1], {value: 0.75, label: \"Opacity\", step:0.01})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"viewof opacity2 = Inputs.range([0, 100], {\n value: 50,\n label: \"Opacity\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"viewof as = autoSelect({\n //options: Object.keys(data),\n class: \"autoSelect\",\n options: pointsLookup,\n value: \"Steel Blue\",\n title: md`Select a color name from 29372 colors
(replace texts to filter):`,\n width: 500,\n placeholder: \"Enter texts to filter\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof picker = Inputs.color({\n label: md`#### or pick a color:`,\n value: hexbyname.get(as),\n width: 255,\n submit: true\n})\n//color({value: hexbyname.get(as),title: \"or pick a color:\",\n//description: \"This color picker starts out black\"\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"viewof pickerColorSpace = Inputs.select(Object.entries(spaces),{label: md`#### or select using a
different color space:`, \n format: d => d[1].alias ?? d[0].toUpperCase()\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"viewof colorPickerForm = Inputs.range([Math.min(pickerColorSpace[1].min[0], cv1[0]),\n Math.max(pickerColorSpace[1].max[0], cv1[0])], \n {label: pickerColorSpace[1].channel[0].toUpperCase(), value: cv1[0],\n format: (d) => d.toFixed(2),\n precision: 2\n }\n )\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"viewof colorPickerForm1 = Inputs.range([Math.min(pickerColorSpace[1].min[1], cv1[1]),\n Math.max(pickerColorSpace[1].max[1], cv1[1])], \n {label: pickerColorSpace[1].channel[1].toUpperCase(), value: cv1[1],\n format: (d) => d.toFixed(2),\n precision: 2\n }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"viewof colorPickerForm2 = Inputs.range([Math.min(pickerColorSpace[1].min[2], cv1[2]),\n Math.max(pickerColorSpace[1].max[2], cv1[2])], \n {label: pickerColorSpace[1].channel[2].toUpperCase(), value: cv1[2],\n format: (d) => d.toFixed(2),\n precision: 2\n }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"viewof nameExample = colorPicker(hexbyname.get(as), \"name\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"viewof rgbExample = colorPicker(picker, \"rgb\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"viewof rgbaExample = colorPicker((rgbExample.replace(\")\",\",\") + String(opacity) + \")\").replace(\"rgb\",\"rgba\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"viewof hsvExample = colorPicker(picker, \"hsv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"viewof hsvaExample = colorPicker((hsvExample.replace(\")\",\",\") + String(opacity) + \")\").replace(\"hsv\",\"hsva\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"viewof hslExample = colorPicker(picker, \"hsl\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"viewof hslaExample = colorPicker((hslExample.replace(\")\",\",\") + String(opacity) + \")\").replace(\"hsl\",\"hsla\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"html`
color-name calls it ${color_namer(picker)['basic'][0]['name']}
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"md`### Take it to the next level. Paste in a list.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"viewof list = textarea({\n placeholder: \"#ffffff\\n#eeeeee\\n#000000\\n...etc.\", \n spellcheck: false,\n width: \"100%\",\n rows: 10,\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"list_data.length ? table(list_data) : \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"list_data.length ? DOM.download(serialize(list_data), \"colors\", \"Download\") : \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md`

\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`The code that makes this work is below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"style = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"pointsLookup = Object.keys(cnl).map(function(key) {\n let row = cnl[key]\n return `${row.name}`\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"list_data = {\n // Grab the items in the box\n let hexes = list.split(/\\n/);\n // Loop through the hexes and try to code them\n let names = hexes.map(function(h) {\n try {\n let name = color_namer(h);\n return {hex:h, name:name['basic'][0]['name']};\n }\n catch(err) {\n return {hex: h, name:\"\"};\n }\n });\n // Pass back the result\n return names\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"import {serialize} from \"@palewire/saving-json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"import {table} from \"@tmcw/tables@444\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"import {textarea} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"color_namer = require('https://unpkg.com/color-namer@1.3.0/dist/color-namer.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"import {chart} from \"@palewire/sort-colors-by-hue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"import {colorPicker} from \"@shaunlebron/color-picker\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"import {select, autoSelect} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"import { rangeSlider } from \"@mootari/range-slider@1312\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"import {\n show_scale,\n make_scale,\n make_divergent_scale\n} from \"@cadasa/perceptually-valid-color-scales\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"cnl = require(\"color-name-list\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"hexbyname = new Map(\n cnl.map(d => [d.name, d.hex]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"csp = import('https://cdn.skypack.dev/color-space@2.0.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"spaces = csp.default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"Object.entries(spaces)[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"Object.entries(spaces).filter(d => d[0] === pickerColorSpace[1].name)[0][1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"mutable cv1 = pickerColorSpace[1].name === \"rgb\"? rgb: Object.entries(spaces)[0][1][pickerColorSpace[1].name](rgb)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"cv2 = pickerColorSpace[1].name === pickerColorSpace2[1].name ? [colorPickerForm, colorPickerForm1, colorPickerForm2]: Object.entries(spaces).filter(d => d[0] === pickerColorSpace[1].name)[0][1][pickerColorSpace2[1].name]([colorPickerForm, colorPickerForm1, colorPickerForm2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"rgb1 = pickerColorSpace[1].name === \"rgb\"? [colorPickerForm, colorPickerForm1, colorPickerForm2]: Object.entries(spaces).filter(d => d[0] === pickerColorSpace[1].name)[0][1].rgb([colorPickerForm, colorPickerForm1, colorPickerForm2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"rgb2 = pickerColorSpace2[1].name === \"rgb\"? [colorPickerForm20, colorPickerForm21, colorPickerForm22]: Object.entries(spaces).filter(d => d[0] === pickerColorSpace2[1].name)[0][1].rgb([colorPickerForm20, colorPickerForm21, colorPickerForm22])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"rgb = [d3.color(picker).r, d3.color(picker).g, d3.color(picker).b]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1223,"value":"rgb2it = [Math.round(rgb2[0]), Math.round(rgb2[1]), Math.round(rgb2[2])]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1318,"value":"bgc = \"rgb\" + \"(\" + rgb2it + \")\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"cs = {yield md`## Color will be added here`\n if (button != null) {nietos.push(button); yield swatches(nietos)}}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"nietos = [];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1212,"value":"csi = {\n interpolate;\n if (nietos.length === 2) {\n yield show_scale(make_scale(nietos[0], nietos[1], n), opacity2);\n } else if (nietos.length >= 3) {\n yield show_scale(\n make_divergent_scale(nietos[0], nietos[1], nietos[nietos.length - 1], n),\n opacity2\n );\n } else {\n const fill = d3.scaleSequential(d3.interpolateViridis).domain([0, 128]);\n let guessTheMovie = message;\n //guessTheMovie.style.color = d3.interpolateMagma(16);\n yield guessTheMovie;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1340,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"nietos[nietos.length - 1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"picker","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"function swatches(colors) {\n return html`${colors.map(c => `
`)}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 32:"$31:body"