2f:T5d0,

Clever title

Turn layers on or off:
-
-
-

Toggle on/off:

with a slider:

30:T4f3,{ // then we attach an .on("click", () => doSomething) to each of the buttons or control inputs above. const btns = d3.select(vizContainer).select("#controls"); // register event listeners btns.select("#btn-one-on").on("click", () => layerOn("layer1")); btns.select("#btn-one-off").on("click", () => layerOff("layer1")); btns.select("#btn-one-only").on("click", () => layerOnlyOn("layer1")); btns.select("#btn-two-on").on("click", () => layerOn("layer2")); btns.select("#btn-two-off").on("click", () => layerOff("layer2")); btns.select("#btn-two-only").on("click", () => layerOnlyOn("layer2")); btns.select("#btn-three-on").on("click", () => layerOn("layer3")); btns.select("#btn-three-off").on("click", () => layerOff("layer3")); btns.select("#btn-three-only").on("click", () => layerOnlyOn("layer3")); btns.select("#btn-allOn").on("click", allOn); btns.select("#btn-allOff").on("click", allOff); btns.select("#btn-one-toggle").on("click", () => layerToggleOnOff("layer1")); btns.select("#btn-two-toggle").on("click", () => layerToggleOnOff("layer2")); btns.select("#btn-three-toggle").on("click", () => layerToggleOnOff("layer3")); btns.select("#slider").on("input", (evt) => layerOnlyOn("layer" + evt.target.value)); }31:[{"id":"8ab01f1923040f19fdf5e2155771405d87dba01bd7c6823e6ad6f7758ff4c32d31cad91ff3a431f594618e2112ea0d752769642c0c41a300495a8cad596ddfae","href":"https://static.observableusercontent.com/files/8ab01f1923040f19fdf5e2155771405d87dba01bd7c6823e6ad6f7758ff4c32d31cad91ff3a431f594618e2112ea0d752769642c0c41a300495a8cad596ddfae","name":"DataVizFinalTest.svg","type":"image/svg+xml","lastModified":1683067614744.286,"size":98027}] 2d:{"title":"Untitled","cells":[{"id":0,"value":"# Untitled","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"sampleSVG = FileAttachment(\"DataVizFinalTest.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {importSVGnode} from \"@emfielduva/dvlib\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"svg = importSVGnode(sampleSVG)","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof checkboxes = Inputs.checkbox([\"A\", \"B\"], {label: \"Select some\", value: [\"A\"]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"viz = Wn {\n _groups: Array(1) [Array(1)]\n _parents: Array(1) [null]\n : Wn {constructor: ƒ(t, n), select: ƒ(t), selectAll: ƒ(t), selectChild: ƒ(t), selectChildren: ƒ(t), filter: ƒ(t), data: ƒ(t, n), enter: ƒ(), exit: ƒ(), join: ƒ(t, n, e), merge: ƒ(t), selection: ƒ(), order: ƒ(), sort: ƒ(t), call: ƒ(), nodes: ƒ(), node: ƒ(), size: ƒ(), empty: ƒ(), each: ƒ(t), …}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"viz = Wn {\n _groups: Array(1) [Array(1)]\n _parents: Array(1) [null]\n : Wn {constructor: ƒ(t, n), select: ƒ(t), selectAll: ƒ(t), selectChild: ƒ(t), selectChildren: ƒ(t), filter: ƒ(t), data: ƒ(t, n), enter: ƒ(), exit: ƒ(), join: ƒ(t, n, e), merge: ƒ(t), selection: ƒ(), order: ƒ(), sort: ƒ(t), call: ƒ(), nodes: ƒ(), node: ƒ(), size: ƒ(), empty: ƒ(), each: ƒ(t), …}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"viz = d3.select(vizContainer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}