2f:T80c,

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:[] 2d:{"title":"Layers on / off","cells":[{"id":0,"value":"# Layers on / off\nDemonstration code for turning layers on and off, directly, in combinations, or a toggle button. You will not likely use all of these, but only one or two control types. The set are here to demonstrate. \n\nLayer content can be anything inside of a ``, so it could be hard coded like this example, it could be explanatory text or annotation layers, or it could be entire visual content generated into a layer in D3, imported from external sources like RAWgraphs.io or Illustrator / Inkscape, or pretty much anything. This example targets svg `` layers but this could just as readily be HTML `

` or `

` elements.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$2f","pinned":true,"hidden":false,"mode":"html"},{"id":30,"value":"viz = d3.select(vizContainer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"layerOff = (id) => {\n viz.select(\"#\" + id).style(\"visibility\",\"hidden\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"layerOn = (id) => {\n viz.select(\"#\" + id).style(\"visibility\",\"visible\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"layerToggleOnOff = (id) => {\n let layer = viz.select(\"#\" + id);\n if (layer.style(\"visibility\") == \"hidden\") {\n layer.style(\"visibility\",\"visible\");\n } else {\n layer.style(\"visibility\",\"hidden\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"allOn = () => {\n viz.selectAll(\"g\").style(\"visibility\",\"visible\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"allOff = () => {\n viz.selectAll(\"g\").style(\"visibility\",\"hidden\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"layerOnlyOn = (id) => {\n allOff();\n viz.select(\"#\" + id).style(\"visibility\",\"visible\")\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}