<svg width="2600" height="2100">

</svg>

<div id="controls">

<h2>Clever title</h2>

<div>

Turn layers on or off:<br />

<button id="btn-one-on">1 On</button><button id="btn-one-off">1 Off</button> - <button id="btn-one-only">1 Only</button><br />

<button id="btn-two-on">2 On</button><button id="btn-two-off">2 Off</button> - <button id="btn-two-only">2 Only</button><br />

<button id="btn-three-on">3 On</button><button id="btn-three-off">3 Off</button> - <button id="btn-three-only">3 Only</button><br />

<br />

<button id="btn-allOn">All On</button>

<button id="btn-allOff">All Off</button>

<br /><br />

Toggle on/off:<br />

<button id="btn-one-toggle">Layer 1</button><br />

<button id="btn-two-toggle">Layer 2</button><br />

<button id="btn-three-toggle">Layer 3</button><br />

<br /><br />

with a slider: <input id="slider" name="slider" type="range" min="1" max="3" step="1" />

</div>

</div>

<style>

/* and the buttons and slider can be styled to whatever we want, including CSS :hover styles */

#controls {position: absolute; right: 250px; top: 20px; width: 300px; font-size: 12px; font-family: Helvetica,Arial,sans-serif;}

button {border: 1px solid #aaa; border-radius: 5px; background-color: #eee; font-size: 10px;}

button:hover {cursor: pointer; background-color: #ccc;}

input#slider {width: 100px;}

</style>

<!-- and now end the overall container -->

</div>

_groups: Array(1) [Array(1)]

_parents: Array(1) [null]

<prototype>: 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), …}

_groups: Array(1) [Array(1)]

_parents: Array(1) [null]

<prototype>: 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), …}

// 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));