28:null 29:["$","title",null,{"children":"Benjamin Moore Colors | Roland Crosby | Observable"}] 2e:[] 2c:{"id":"8ca64b088793951e","slug":"colors","title":"Benjamin Moore Colors","thumbnail":"ae56174315ee27d29fb6a48ca60ef37e86ea592df46f632d0805411530936517","access_level":"public","create_time":"$D2019-09-02T00:34:50.943Z","update_time":"$D2019-09-04T03:24:05.186Z","view_time":null,"first_public_time":"$D2019-09-02T00:38:31.482Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"5b00e65b26962af6","login":"rolandcrosby","name":"Roland Crosby","avatar_url":"https://avatars-next.observableusercontent.com/4076d34c3c02cdcf4fc53a463d3d774548ba0c2959cd54f9c19441402f810fd8","tier":"starter_2024"},"version":424,"publish_version":424,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b47dde7f0e387e2","login":"rolandcrosby","name":"Roland Crosby","avatar_url":"https://avatars-next.observableusercontent.com/4076d34c3c02cdcf4fc53a463d3d774548ba0c2959cd54f9c19441402f810fd8","tier":null}],"members":[{"type":"individual","id":"0b47dde7f0e387e2","login":"rolandcrosby","name":"Roland Crosby","avatar_url":"https://avatars-next.observableusercontent.com/4076d34c3c02cdcf4fc53a463d3d774548ba0c2959cd54f9c19441402f810fd8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Benjamin Moore Colors","cells":[{"id":0,"value":"md`# Benjamin Moore Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof display = {\n const out = html`

`;\n const container = d3.select(out)\n .append('div')\n .classed('grid', true);\n\n function dispatch(value) {\n out.value = value;\n out.dispatchEvent(new CustomEvent('input'));\n }\n \n const allCells = container.selectAll('div.cell');\n update(allCells, orders[order], dispatch);\n dispatch({selected: {hex: \"#fff\", number: \"\", name: \"\", contrastColor: \"dark\", hcl: {h: \"\", c: \"\", l: \"\"}, lrv: \"\", description: \"\"}});\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"html`

${display.selected.number} ${display.selected.name}

${Math.round(display.selected.hcl.h)}

${Math.round(display.selected.hcl.c)}

LRV

${Math.round(display.selected.lrv)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"html`

${display.selected.description}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"viewof order = radio({\n title: \"Show\",\n options: [\n {label: \"Default order\", value: \"default\"},\n {label: \"By hue\", value: \"hue\"},\n {label: \"By chroma\", value: \"chroma\"},\n {label: \"By LRV\", value: \"lrv\"},\n {label: \"Duplicates\", value: \"dupes\"}\n ],\n value: \"default\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"viewof colorFilter = text({title: \"Filter color numbers\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"viewof nameFilter = text({title: \"Filter color names\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"viewof minLRV = slider({min: 0, max: 100, step: 1, title: \"Minimum LRV\", value: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"viewof maxLRV = slider({min: 0, max: 100, step: 1, title: \"Maximum LRV\", value: 100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"// https://medium.com/cloudaper/how-to-create-a-flexible-square-grid-with-css-grid-layout-ea48baf038f3\nhtml``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function update(selection, data, dispatch) {\n const group = selection.data(data, o => o.number);\n \n group.exit().remove();\n \n const enter = group.enter()\n .append('div')\n .classed('cell', true)\n .attr('style', d => `background-color: #${d.hex};`)\n .attr('title', d => `${d.number} ${d.name}`)\n .on('mouseover', d => {\n console.log(d.number);\n dispatch({selected: d});\n });\n return group.merge(enter);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"colors = (await d3.json('https://color-proxy.glitch.me/colors.json')).map(x => ({...x, color: d3.color('#' + x.hex), hcl: d3.hcl(d3.color('#' + x.hex))}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"filteredColors = colors.filter(c => {\n return c.number.toLowerCase().startsWith(colorFilter.toLowerCase())\n && (c.name.toLowerCase().indexOf(nameFilter.toLowerCase()) !== -1)\n && (c.lrv > minLRV)\n && (c.lrv < maxLRV);\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"orders = ({\n default: filteredColors,\n hue: filteredColors.concat().sort((x, y) => {\n const diff = Math.round(x.hcl.h / 60) - Math.round(y.hcl.h / 60);\n if (diff > 0) {return 1;}\n if (diff == 0) {return (x.lrv > y.lrv) ? 1 : -1;}\n if (diff < 0) {return -1;}\n }),\n chroma: filteredColors.concat().sort((x, y) => {\n const diff = Math.round(x.hcl.c / 20) - Math.round(y.hcl.c / 20);\n if (diff > 0) {return 1;}\n if (diff == 0) {\n const lDiff = Math.round(x.hcl.l / 10) - Math.round(y.hcl.l);\n if (lDiff > 0) {return 1;}\n if (lDiff == 0) {return (x.hcl.h > y.hcl.h) ? 1 : -1;}\n if (lDiff < 0) {return -1;}\n }\n if (diff < 0) {return -1;}\n }),\n lrv: filteredColors.concat().sort((x, y) => {\n const diff = Math.floor(x.lrv / 5) - Math.floor(y.lrv / 5);\n if (diff > 0) {return 1;}\n if (diff == 0) {return (x.hcl.h > y.hcl.h) ? 1 : -1;}\n if (diff < 0) {return -1;}\n }),\n dupes: dupes\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"dupes = {\n const out = {};\n filteredColors.forEach(c => {\n const key = `${c.hex}|${c.lrv}`\n if (!out.hasOwnProperty(key)) {\n out[key] = [];\n }\n out[key].push(c);\n });\n return Object.values(out)\n .filter(x => x.length > 1)\n .sort((x, y) => {\n const diff = y.length - x.length;\n if (diff > 0) {return 1;}\n if (diff == 0) {return x[0].lrv - y[0].lrv;}\n return -1;\n }).flat()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"import {radio, text, slider} from '@jashkenas/inputs';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3@5');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"