31:T58b,function swatchesInput({ color, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; const domain = color.domain(); const form = html``; form.oninput = () => { const toggled = Array.from(form.elements).map(el => el.checked); form.value = domain.filter((v, i) => toggled[i]); }; form.oninput(); return form; }32:[] 2f:{"title":"Color Swatches Input","cells":[{"id":0,"value":"md`# Color Swatches Input\n\nBased on the \\`swatches()\\` technique from [color-legend](https://observablehq.com/@d3/color-legend) but with support for making the individual swatches toggable via [\\`viewof\\`](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof) and [the checkbox hack](https://css-tricks.com/the-checkbox-hack/).\n\n**To Do:**\n- [ ] Support columns layout like in the original.\n- [ ] Instead of using \\`\\`, hide via \\`opacity:0;\\` (better for a11y)\n\n**Usage:**\n\n~~~js\nimport { swatchesInput } from \"@clhenrick/color-swatches-input\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"selected","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof selected = swatchesInput({\n color: d3.scaleOrdinal(\n [\"blueberries\", \"oranges\", \"apples\"],\n d3.schemeCategory10\n )\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3-scale@2\", \"d3-scale-chromatic@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}