29:null 2a:["$","title",null,{"children":"Unranked Variation: Will it Blend? | Mike Slattery | Observable"}] 2f:T567,md`This is a tool to see how far color blending could be pushed to pursue unranked variation and a basis for affinity binning. The brief is to support methods that would showcase a number of people who contribute to a number of related categories of study/effort. In the immediate case there are six options per person. The showcase shouldn't allow a person that matches one category to present a less interesting visual than a person that claims all six. One avenue to explore would be to use a color palette that is not obviously graduated or divergent, and key that to the categories that a given person subscribes to. - We can use blend modes to create a single output color per person that might create affinity effects - Alpha could be used to indicate if a category was to be weighted one way or another for a single person's interests After spending time with ["Multiple set Venn with Color Blending"](https://observablehq.com/@philomenix/multiple-set-venn-with-color-blending) by @philomenix, it was obvious that no single blend mode will have the desired effect with all palettes. Below is a 2^6 category permutation color test to see all the options for a palette. Table generation is based on ["Enumerating Permutations"](https://observablehq.com/@tmcw/enumerating-permutations) by @tmcw. Color handling from [@danburzo](https://observablehq.com/@danburzo).`30:T50b,viewof colors = { // learned from @danburzo and @philomenix and of course @jashkenas const form = html``; form.oninput = () => form.value = ['a','b','c','d','e','f'].reduce((acc, curr) => { acc[curr] = culori.formatter('rgb')(({ ...culori.rgb(form[curr].value), alpha: parseFloat(form[curr + '_alpha'].value) })) return acc; }, {}); form.oninput(); return form; }31:Tec7,{ // largely copied from https://observablehq.com/@tmcw/enumerating-permutations //initialize array everycombo.length = 0; let expected_height = (Math.pow(2,n) + 1) * 25; let container = html`

`; yield container; container.className = 'container'; let punchcardRow = 1; //header let punchcardHeadContainer = container.appendChild(DOM.element('div')); punchcardHeadContainer.className = 'punchcardrow'; let nonkey = punchcardHeadContainer.appendChild(document.createElement('div')); nonkey.className = 'punchcardrow-number'; nonkey.textContent = 'n'; for (let k of Object.keys(colors).slice(0,n)) { //you can change the exponent below let shortkey = punchcardHeadContainer.appendChild(document.createElement('div')); shortkey.className = 'swatch'; shortkey.style.backgroundColor = 'rgba(248,248,255,.5)'; shortkey.textContent = 'color ' + k; } let blendkey = punchcardHeadContainer.appendChild(document.createElement('div')); blendkey.style.backgroundColor = 'rgba(248,248,255,.5)'; blendkey.className = 'swatch'; blendkey.textContent = "mode" //rows from data for (let row of punchcard(n)) { // count positive toggles let rowrecord = {rowname: [], rowcolors: []}; let rowScore = row.reduce((a,b)=>a+b); let punchcardrowContainer = container.appendChild(DOM.element('div')); punchcardrowContainer.className = 'punchcardrow'; let number = punchcardrowContainer.appendChild(document.createElement('div')); number.className = 'punchcardrow-number'; number.textContent = punchcardRow++; if (rowScore == 1){ number.style.backgroundColor = 'rgba(230,230,235,.5)'; } let punchcardRowCell = 0; let blendThese = new Array; //console.log(row, rowScore); for (let i of row) { rowrecord.rowname.push(i); let swatch = punchcardrowContainer.appendChild(document.createElement('div')); swatch.className = 'swatch'; if (i > 0){ swatch.textContent = culori.formatter('hex')(spokes[punchcardRowCell]); swatch.style.backgroundColor = spokes[punchcardRowCell]; swatch.style.color = '#222'; blendThese.push(spokes[punchcardRowCell]); rowrecord.rowcolors.push(culori.formatter('rgb')(spokes[punchcardRowCell])); } else { if (rowScore == 1){ swatch.textContent = '#E6E6EB'; swatch.style.backgroundColor = 'rgba(230,230,235,.5)'; swatch.style.color = 'rgba(230,230,235,.25)'; } else { swatch.textContent = '#F8F8FF'; swatch.style.backgroundColor = 'rgba(248,248,255,.5)'; swatch.style.color = 'rgba(248,248,255,.25)'; } var localcolor = culori.parse(spokes[punchcardRowCell]); localcolor.alpha = 0; rowrecord.rowcolors.push(culori.formatter('rgb')(localcolor)); } punchcardRowCell++; //swatch.style.color = i/n > 0.5 ? '#222' : 'white'; } let blendedfinale = punchcardrowContainer.appendChild(document.createElement('div')); blendedfinale.className = 'swatch'; blendedfinale.textContent = mode; if (blendThese.length > 0){ blendedfinale.style.backgroundColor = culori.formatter('rgb')(culori.blend(blendThese, mode, space)) rowrecord.rowcolors.push(culori.formatter('rgb')(culori.blend(blendThese, mode, space))); } else { blendedfinale.style.backgroundColor = '#fff'; } everycombo.push(rowrecord); yield container; /* if (container.childNodes.length > 20) { container.removeChild(container.childNodes[0]); } */ } }32:T48c,presetobjects = [{ prename : 'Use Current Sliders', colorvals : colors}, { prename : 'pointyhex-compass-hsl', colorvals : {a: "rgba(255, 128, 0, 0.5)",b:"rgba(128, 255, 0, 0.5)",c:"rgba(0, 255, 128, 0.5)",d:"rgba(0, 128, 255, 0.5)",e:"rgba(128, 0, 255, 0.5)", f:"rgba(255, 0, 128, 0.5)"}}, { prename : 'flathex-compass-hsl', colorvals : {a:"rgba(255, 0, 0, 0.5)",b:"rgba(255, 255, 0, 0.5)",c:"rgba(0, 255, 0, 0.5)",d:"rgba(0, 255, 255, 0.5)",e:"rgba(0, 0, 255, 0.5)",f:"rgba(255, 0, 255, 0.5)"}}, { prename : 'yu-triadic-rgb', colorvals : {a:"rgba(0, 52, 107, 0.5)",b:"rgba(164, 134, 0, 0.5)",c:"rgba(164, 34, 0, 0.5)",d:"rgba(0, 109, 73, 0.5)",e:"rgba(8, 0, 114, 0.5)",f:"rgba(164, 98, 0, 0.5)"}}, { prename : 'yu-as00deg-rgb', colorvals : {a:"rgba(0, 52, 107, 0.5)",b:"rgba(54, 144, 0, 0.5)",c:"rgba(164, 153, 0, 0.5)",d:"rgba(164, 98, 0, 0.5)",e:"rgba(151, 0, 35, 0.5)",f:"rgba(53, 0, 111, 0.5)"}}, { prename : 'yu_as30deg-rgb', colorvals : {a:"rgba(0, 52, 107, 0.5)",b:"rgba(52, 0, 107, 0.5)",c:"rgba(107, 0, 52, 0.5)",d:"rgba(107, 52, 0, 0.5)",e:"rgba(52, 107, 0, 0.5)",f:"rgba(0, 107, 52, 0.5)"}} ] 33:[] 2d:{"id":"7ad82d8659def743","slug":"unranked-variation-will-it-blend","title":"Unranked Variation: Will it Blend?","thumbnail":"52b66bae6eb4dcb2d94d044463ce08d126814e5008919e2248625491bc1f0f2c","access_level":"public","create_time":"$D2021-06-10T17:32:22.451Z","update_time":"$D2021-06-25T01:19:11.829Z","view_time":null,"first_public_time":"$D2021-06-22T19:50:01.433Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1d28085143aea7e3","login":"slattery","name":"Mike Slattery","avatar_url":"https://avatars-next.observableusercontent.com/417cf7adb17b1f1aa6f920cec50e6d939759814f2dfea487e20afcc3e6e29449","tier":"pro_2024"},"version":487,"publish_version":487,"role":null,"authored":false,"authors":[{"type":"individual","id":"58237c9d2f2a8662","login":"slattery","name":"Mike Slattery","avatar_url":"https://avatars-next.observableusercontent.com/417cf7adb17b1f1aa6f920cec50e6d939759814f2dfea487e20afcc3e6e29449","tier":null}],"members":[{"type":"individual","id":"58237c9d2f2a8662","login":"slattery","name":"Mike Slattery","avatar_url":"https://avatars-next.observableusercontent.com/417cf7adb17b1f1aa6f920cec50e6d939759814f2dfea487e20afcc3e6e29449","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Unranked Variation: Will it Blend?","cells":[{"id":0,"value":"md`# Unranked Variation: Will it Blend?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"md`Use the color config as is, choose your own colors and alphas, or try some presets. Then choose blendmodes to see how they behave for all permutations. You may go to the download buttons below to save your choices to JSON.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"viewof presets = {\n const pform = html`

\n \n`;\n pform.select.onchange = async () => {\n if (pform.select.value === \"Use Current Sliders\") {\n // do nothing\n } else {\n pform.pvalue = presetcolors[pform.select.selectedIndex];\n for (var k in pform.pvalue){\n console.log(k,pform.pvalue[k],culori.formatter('hex')( pform.pvalue[k]) );\n document.getElementById(\"colorform\").elements[k].value = culori.formatter('hex')(pform.pvalue[k]);\n } \n nudgecolorform();\n pform.dispatchEvent(new CustomEvent(\"input\"));\n ;\n }\n };\n pform.select.selectedIndex = 0;\n pform.select.onchange();\n return pform;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"viewof mode = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"\nviewof n = slider({\n min: 2, \n max: 6, \n step: 1, \n value: 6, \n title: \"exponent\", \n description: \"Number of switches to toggle for permutations\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"md`### Results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"DOM.download(serialize(everycombo), null, \"Download Permutations\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"DOM.download(serialize(colors), \"currentcolors\", \"Download Palette\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"everycombo = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":" function* punchcard(n){\n // http://zacg.github.io/blog/2013/08/02/binary-combinations-in-javascript/\n for(var y=0; y> x) & 1)\n combo.push(0);\n else \n combo.push(1);\n }\n yield combo;\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"viewof space = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"spokes = [colors.a,colors.b,colors.c,colors.d,colors.e,colors.f]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"presetnames = presetobjects.map(d => d.prename)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"presetcolors = presetobjects.map(d => d.colorvals)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"function nudgecolorform() {\n var element = document.getElementById(\"colorform\")\n element.dispatchEvent(new Event(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`### CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"stylesheet = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`### Props`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md `- https://observablehq.com/@tmcw/enumerating-permutations\n- http://zacg.github.io/blog/2013/08/02/binary-combinations-in-javascript/\n- https://observablehq.com/@danburzo/culori-blend-modes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md `### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import { color, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import {Checkbox, Radio, Range} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"culori = require('culori@0.8.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"import {serialize} from \"@palewire/saving-json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"