//filter legend with map // Right-aligned map with minimal space // filterLegend = ( // domain, // range, // columns = 2, // columnGap = 10, // totalWidth = 350 // ) => { // const value = new Map(domain.map((d) => [d, true])); // const _set = () => // set( // node, // [...value].filter((d) => d[1]).map((d) => d[0]) // ); // const oninput = (e) => (value.set(e.target.id, e.target.checked), _set()); // // Create wrapper to contain everything // const wrapper = htl.html`

`; // // Calculate how many rows we'll have // const itemsPerColumn = Math.ceil(domain.length / columns); // // Create left side (checkboxes) // const checkboxesContainer = htl.html`

// ${domain.map( // (d, i) => // htl.html`

// // ${d} //

` // )} //

`; // // Create right side (map) - sized to match the height of the checkboxes approximately // const mapHeight = Math.min(120, itemsPerColumn * 24); // Approximately 24px per checkbox row // const mapContainer = htl.html`

`; // // Add elements to wrapper // wrapper.appendChild(checkboxesContainer); // wrapper.appendChild(mapContainer); // // Set node for return value tracking // const node = wrapper; // _set(); // return node; // }