2f:Tbe1,

${svg}

All Data:
Comments:

Area Delineation:
- - -
- - -

Marital Status:
- - -
- - -

Age:
- - - -
- - - -

Gender:
- -
- -

30:T89e,// vizContainer =

// //

Clever title

// Turn layers on or off:
// -
// -
// -
//
// // //

// Toggle on/off:
//
//
//
//

// with a slider: //

// // //

31:Td58,{ // 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("urban")); btns.select("#btn-one-off").on("click", () => layerOff("urban")); btns.select("#btn-two-on").on("click", () => layerOn("suburban")); btns.select("#btn-two-off").on("click", () => layerOff("suburban")); btns.select("#btn-four-on").on("click", () => layerOn("smalltown")); btns.select("#btn-four-off").on("click", () => layerOff("smalltown")); btns.select("#btn-three-on").on("click", () => layerOn("rural")); btns.select("#btn-three-off").on("click", () => layerOff("rural")); btns.select("#btn-five-on").on("click", () => layerOn("single")); btns.select("#btn-five-off").on("click", () => layerOff("single")); btns.select("#btn-six-on").on("click", () => layerOn("married")); btns.select("#btn-six-off").on("click", () => layerOff("married")); btns.select("#btn-seven-on").on("click", () => layerOn("divorced")); btns.select("#btn-seven-off").on("click", () => layerOff("divorced")); btns.select("#btn-eight-on").on("click", () => layerOn("widowed")); btns.select("#btn-eight-off").on("click", () => layerOff("widowed")); btns.select("#btn-nine-on").on("click", () => layerOn("19")); btns.select("#btn-nine-off").on("click", () => layerOff("19")); btns.select("#btn-ten-on").on("click", () => layerOn("30")); btns.select("#btn-ten-off").on("click", () => layerOff("30")); btns.select("#btn-eleven-on").on("click", () => layerOn("40")); btns.select("#btn-eleven-off").on("click", () => layerOff("40")); btns.select("#btn-twelve-on").on("click", () => layerOn("50")); btns.select("#btn-twelve-off").on("click", () => layerOff("50")); btns.select("#btn-thirteen-on").on("click", () => layerOn("60")); btns.select("#btn-thirteen-off").on("click", () => layerOff("60")); btns.select("#btn-fourteen-on").on("click", () => layerOn("male")); btns.select("#btn-fourteen-off").on("click", () => layerOff("male")); btns.select("#btn-fifteen-on").on("click", () => layerOn("female")); btns.select("#btn-fifteen-off").on("click", () => layerOff("female")); btns.select("#btn-sixteen-on").on("click", () => layerOn("nb")); btns.select("#btn-sixteen-off").on("click", () => layerOff("nb")); btns.select("#btn-seventeen-on").on("click", () => layerOn("Info")); btns.select("#btn-seventeen-off").on("click", () => layerOff("Info")); btns.select("#btn-allOn1").on("click", () => layerOn("urban","suburban","smalltown","rural")); btns.select("#btn-allOff1").on("click", () => layerOff("urban","suburban","smalltown","rural")); btns.select("#btn-allOn2").on("click", () => layerOn("single","married","divorced","widowed")); btns.select("#btn-allOff2").on("click", () => layerOff("single","married","divorced","widowed")); btns.select("#btn-allOn3").on("click", () => layerOn("20", "30", "40", "50", "60")); btns.select("#btn-allOff3").on("click", () => layerOff("20", "30", "40", "50", "60")); btns.select("#btn-allOn4").on("click", () => layerOn("male", "female", "nb")); btns.select("#btn-allOff4").on("click", () => layerOff("male", "female", "nb")); btns.select("#btn-allOn").on("click", allOn); btns.select("#btn-allOff").on("click", allOff); }32:[{"id":"8ab01f1923040f19fdf5e2155771405d87dba01bd7c6823e6ad6f7758ff4c32d31cad91ff3a431f594618e2112ea0d752769642c0c41a300495a8cad596ddfae","href":"https://static.observableusercontent.com/files/8ab01f1923040f19fdf5e2155771405d87dba01bd7c6823e6ad6f7758ff4c32d31cad91ff3a431f594618e2112ea0d752769642c0c41a300495a8cad596ddfae","name":"DataVizFinalTest.svg","type":"image/svg+xml","lastModified":1683131452848.837,"size":98027},{"id":"d5bc265312271bb2a41a5a4449c0d4c8d13dd7c317cea7445ec6b63684ef684e834d1fa210309668969cdf5c8e7b79d32e4420294c29b0b1bb8f7284a7a10b83","href":"https://static.observableusercontent.com/files/d5bc265312271bb2a41a5a4449c0d4c8d13dd7c317cea7445ec6b63684ef684e834d1fa210309668969cdf5c8e7b79d32e4420294c29b0b1bb8f7284a7a10b83","name":"DataVizFinalTest2.svg","type":"image/svg+xml","lastModified":1683228360447.083,"size":292830},{"id":"301c6c4c35f6a15d74328bdd19cf30c5874b7d3d83659dadb7f991e03ec4cf9f2cf908ba90a8f256e03c3ffdd038e9b0d971c3449f6c2a244d78535027f9b8d5","href":"https://static.observableusercontent.com/files/301c6c4c35f6a15d74328bdd19cf30c5874b7d3d83659dadb7f991e03ec4cf9f2cf908ba90a8f256e03c3ffdd038e9b0d971c3449f6c2a244d78535027f9b8d5","name":"DataVizFinalTest3.svg","type":"image/svg+xml","lastModified":1683234751408.916,"size":288875}] 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":68,"value":"sampleSVG = FileAttachment(\"DataVizFinalTest3.svg\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"import {importSVGnode} from \"@emfielduva/dvlib\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"svg = importSVGnode(sampleSVG)","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"$2f","pinned":true,"hidden":false,"mode":"html"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"viz = d3.select(vizContainer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"$31","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":"$W32","stdlib":"1","titling":"auto"}