2d:null 2e:["$","title",null,{"children":"Scented Checkbox | John Alexis Guerra Gómez | Observable"}] 33:T410,### Use scentedCheckbox outside of Observable See [a demo on codepen](https://codepen.io/duto_guerra/pen/gOZGNNg) ```html

scentedCheckboxes demo

```34: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; }35:[] 31:{"id":"af8899339492063b","slug":"scented-checkbox","title":"Scented Checkbox","thumbnail":"61e39df0f66def8d4fd12223237ab62865ae699ec8a1dbdc7228be13a38641e5","access_level":"public","create_time":"$D2023-09-18T17:10:25.415Z","update_time":"$D2026-03-22T18:29:01.387Z","view_time":null,"first_public_time":"$D2023-09-18T18:10:41.717Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":416,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"b07e4b6e4b491e5f","slug":"observable-tricks","title":"Observable Tricks","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"viewof selectedIsland = scentedCheckbox(penguins, (d) => d.island)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"selectedIsland","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"## Test cases","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"selected2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"import {searchCheckbox} from \"@john-guerra/search-checkbox\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"import {multiAutoSelect} from \"@john-guerra/multi-auto-select\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"{\n (viewof selectedIsland).value = [\"Biscoe\"];\n (viewof selectedIsland).dispatchEvent(new Event(\"input\", { bubbles: true }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"