31:T410,### Use scentedCheckbox outside of Observable See [a demo on codepen](https://codepen.io/duto_guerra/pen/gOZGNNg) ```html

scentedCheckboxes demo

```32:T1205,function scentedCheckbox(data, attr = (d) => d[0], _options) { let options = { barWidth: 50, barFill: "#cdcdcd", barBorder: "#bbb", barBorderWidth: "0.5px", showTotal: false, // Should use the max category as a reference (false) for the bars or the overall total (true) selectAll: true, // Have all attributes selected by default format: (d) => d, cutoff: 5, // Any groups with less than this number will be grouped into other othersLabel: "Others", // Label to show for others arrayAttrib: false, // attribute values are arrays, valueFont: `ultra-condensed 0.8em "Fira Sans", sans-serif`, valueFmt: d3.format(",d"), search: false, checkbox: Inputs.checkbox, maxHeight: null, // e.g. 200px ..._options }; // Check if attr is array if (options.arrayAttrib || (data.length && Array.isArray(attr(data[0])))) { let unrolledData = []; data = data .map((d) => { const attrD = attr(d); // check if array is null or empty return attrD ? attrD.map((attrValue) => ({ ...d, __unrolledAttr: attrValue })) : [{ ...d, __unrolledAttr: attrD }]; }) .flat(); attr = (d) => d.__unrolledAttr; options.arrayAttrib = true; } const dataGrouped = d3.group(data, attr); let dataGroupedSorted = Array.from(dataGrouped.entries()).sort((a, b) => d3.descending(a[1].length, b[1].length) ); console.log("dataGrouped", dataGrouped); // Array with all the keys that didn't make the cutoff let othersKeys = []; if (options.cutoff) { let dataGroupsSortedWithCutoff = []; // A group for everything below the cutoff let othersGroup = [options.othersLabel, []]; for (let [k, v] of dataGroupedSorted) { if (v.length > options.cutoff) { dataGroupsSortedWithCutoff.push([k, v]); } else { othersGroup[1].push(v); othersKeys.push(k); } } // Did we find any items for the cutoff if (othersGroup[1].length > 0) { dataGroupsSortedWithCutoff.push(othersGroup); dataGroupedSorted = dataGroupsSortedWithCutoff; dataGrouped.set(options.othersLabel, othersGroup[1]); } } const keys = dataGroupedSorted.map((d) => d[0]); const values = dataGroupedSorted.map((d) => d[1]); const maxValue = d3.max(values, (v) => v.length); const totalValue = d3.sum(values, (v) => v.length); const fmtPct = d3.format(".1%"); const fmt = d3.format(","); const x = d3 .scaleLinear() .domain([0, options.showTotal ? totalValue : maxValue]) .range([0, options.barWidth]); const oldFormat = options.format; options.format = (d) => { const dValue = dataGrouped.get(d).length; return htl.html`${oldFormat(d)} ${options.valueFmt(dValue)} `; }; if (options.selectAll && !options.value) { options.value = keys; } let checkboxes; if (options.search) { checkboxes = searchCheckbox(keys, options); } else { checkboxes = options.checkbox(keys, options); } const target = htl.html`

${checkboxes}

`; checkboxes.oninput = (evt) => { setValue(); }; function setValue() { let value = []; for (let v of checkboxes.value) { // If we have others in the keys, replace them with the original keys if (v === options.othersLabel) { value = value.concat(othersKeys); } else { value.push(v); } } target.value = value; target.dispatchEvent(new CustomEvent("input", { bubbles: true })); } setValue(); target.addEventListener("input", () => { checkboxes.dispatchEvent(new Event("input", { bubbles: false })); }); return target; }33:[] 2f:{"title":"Scented Checkbox","cells":[{"id":0,"value":"# Scented Checkbox\n\nGiven a dataset and a categorical attribute accessor, build a set of checkboxes that also display the counts for each attribute value. Inspired by [Willet, Heer and Agrawala's scented widgets paper](http://vis.stanford.edu/papers/scented-widgets). \n## Usage\n\n```js\nimport {scentedCheckbox} from \"@john-guerra/scented-checkbox\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"viewof selectedIsland = scentedCheckbox(penguins, (d) => d.island)","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"selectedIsland","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"viewof selectedSpecies = scentedCheckbox(penguins, (d) => d.species, {\n showTotal: false,\n label: \"Species\",\n value: [\"Gentoo\", \"Chinstrap\"],\n search: true // Use the search checkbox\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof selectedSpeciesCustom = scentedCheckbox(penguins, (d) => d.species, {\n showTotal: false,\n label: \"Species\",\n value: [\"Gentoo\", \"Chinstrap\"],\n checkbox: multiAutoSelect // Use a custom checkbox\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":372,"value":"viewof selectedI = scentedCheckbox(\n penguins.map((d, i) => ({ ...d, i })),\n (d) => d.species,\n { cutoff: 60, maxHeight: 200 }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"## Test cases","pinned":false,"hidden":false,"mode":"md"},{"id":183,"value":"// Support array attributes\n\nviewof selected2 = scentedCheckbox(\n [\n { a: [1, 2, 3] },\n { a: [2, 3] },\n { a: [2] },\n { a: [4] },\n { a: [5] },\n { a: [6] },\n { a: [7] },\n { a: [8] },\n { a: [9] },\n { a: [10] }\n ],\n (d) => d.a,\n {\n cutoff: 2\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"selected2","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"import {searchCheckbox} from \"@john-guerra/search-checkbox\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"import {multiAutoSelect} from \"@john-guerra/multi-auto-select\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"{\n (viewof selectedIsland).value = [\"Biscoe\"];\n (viewof selectedIsland).dispatchEvent(new Event(\"input\", { bubbles: true }));\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}