27:null 28:["$","title",null,{"children":"Layers on / off | Meredith B | Observable"}] 2d:T80c,

Clever title

Turn layers on or off:
-
-
-

Toggle on/off:

with a slider:

2e: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)); }2f:[] 2b:{"id":"f7f67062335b863d","slug":null,"title":"Layers on / off","thumbnail":"a34b03e1634cbd614c0826211d7909a1ac3c44e211c4da129275a1bf89b82afa","access_level":"public","create_time":"$D2023-05-02T23:18:08.901Z","update_time":"$D2023-05-02T23:18:08.901Z","view_time":null,"first_public_time":"$D2023-05-02T23:18:08.901Z","has_unpublished_edits":null,"fork":{"id":"a404925acdaa7b4a","slug":null,"title":"Layers on / off","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e7d3e30c156e5788","login":"meredithb","name":"Meredith B","avatar_url":"https://avatars-next.observableusercontent.com/4fae8b3af7048cba4277f71a71d62ccfd747447471a677d3e0c42c98dc139948","tier":"starter_2024"},"version":65,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1912af7c9c5d4378","login":"meredithb","name":"Meredith B","avatar_url":"https://avatars-next.observableusercontent.com/4fae8b3af7048cba4277f71a71d62ccfd747447471a677d3e0c42c98dc139948","tier":null}],"members":[{"type":"individual","id":"1912af7c9c5d4378","login":"meredithb","name":"Meredith B","avatar_url":"https://avatars-next.observableusercontent.com/4fae8b3af7048cba4277f71a71d62ccfd747447471a677d3e0c42c98dc139948","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2d","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"vizContainer","database":"$undefined"},{"id":30,"value":"viz = d3.select(vizContainer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"layerOff = (id) => {\n viz.select(\"#\" + id).style(\"visibility\",\"hidden\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"layerOn = (id) => {\n viz.select(\"#\" + id).style(\"visibility\",\"visible\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"allOn = () => {\n viz.selectAll(\"g\").style(\"visibility\",\"visible\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"allOff = () => {\n viz.selectAll(\"g\").style(\"visibility\",\"hidden\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"layerOnlyOn = (id) => {\n allOff();\n viz.select(\"#\" + id).style(\"visibility\",\"visible\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"