2f:Tc01,

${svg}

All Data:
Comments:

Area Delineation:
- - -
- - -

Marital Status:
- - -
- - -

Age:
- - - -
- - - -

Gender:
- -
- -

30:Td6f,{ // 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", () => {layerToggleOnOff("urban"); buttonToggleOnOff("btn-one-on")}); btns.select("#btn-one-off").on("click", () => layerOff("urban")); btns.select("#btn-two-on").on("click", () => layerOn("sub")); btns.select("#btn-two-off").on("click", () => layerOff("sub")); btns.select("#btn-four-on").on("click", () => layerOn("st")); btns.select("#btn-four-off").on("click", () => layerOff("st")); 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("twe")); btns.select("#btn-nine-off").on("click", () => layerOff("twe")); btns.select("#btn-ten-on").on("click", () => layerOn("thir")); btns.select("#btn-ten-off").on("click", () => layerOff("thir")); btns.select("#btn-eleven-on").on("click", () => layerOn("four")); btns.select("#btn-eleven-off").on("click", () => layerOff("four")); btns.select("#btn-twelve-on").on("click", () => layerOn("fift")); btns.select("#btn-twelve-off").on("click", () => layerOff("fift")); btns.select("#btn-thirteen-on").on("click", () => layerOn("six")); btns.select("#btn-thirteen-off").on("click", () => layerOff("six")); 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","sub","st","rural")); btns.select("#btn-allOff1").on("click", () => layerOff("urban","sub","st","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("twe","thir","four","fift","six")); btns.select("#btn-allOff3").on("click", () => layerOff("twe", "thir", "four", "fift", "six")); 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); }31:T89e,// vizContainer =

// //

Clever title

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

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

// with a slider: //

// // //

32:[{"id":"40b632f819a62cf11f3e512f7e70e7a17b916a6cdb03bc356b25f1971deb64c2f368b1342d897f9f6e1792997dfa24fa780839b5774fd228fefa9154cdda41f9","href":"https://static.observableusercontent.com/files/40b632f819a62cf11f3e512f7e70e7a17b916a6cdb03bc356b25f1971deb64c2f368b1342d897f9f6e1792997dfa24fa780839b5774fd228fefa9154cdda41f9","name":"DataVizFinalTest6.svg","type":"image/svg+xml","lastModified":1683310074608.045,"size":337265}] 2d:{"title":"COPY Layers on / off","cells":[{"id":0,"value":"# COPY 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(\"DataVizFinalTest6.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":219,"value":"\n\n\n console.log(\"DataVizFinalTest3\");\n\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", 2600)\n .style(\"max-width\", \"100%\");\n\n if (layers.includes(\"aus\")) {\n svg\n .append(\"g\")\n .attr(\"fill-opacity\", 1)\n .attr(\"fill\", \"lightgrey\")\n .attr(\"stroke\", \"none\")\n .append(\"path\")\n .datum(aus)\n .attr(\"d\", path);\n }\n\n if (layers.includes(\"roads\")) {\n svg\n .append(\"g\")\n .attr(\"fill-opacity\", 1)\n .attr(\"stroke\", \"red\")\n .attr(\"fill\", \"none\")\n .append(\"path\")\n .datum(roads)\n .attr(\"d\", path);\n }\n\n if (layers.includes(\"ports\")) {\n svg\n .append(\"g\")\n .attr(\"fill-opacity\", 1)\n .attr(\"fill\", \"black\")\n .attr(\"stroke\", \"none\")\n .append(\"path\")\n .datum(ports)\n .attr(\"d\", path);\n }\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"viewof layers = Inputs.checkbox([\"Male\", \"Female\", \"Non-Binary\"], {\n label: \"Layers\",\n value: [\"male\", \"female\", \"nb\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"$2f","pinned":true,"hidden":false,"mode":"html"},{"id":30,"value":"viz = d3.select(vizContainer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"One\n \n \n\n\nTwo\n \n \n\n\nThree\n \n \n\n\nFour\n \n \n\n\n","pinned":false,"hidden":false,"mode":"html"},{"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":284,"value":"layerGroupToggleOnOff = (group) => {\n group.forEach(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 })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"buttonToggleOnOff = (id) => {\n let button = viz.select(\"#\" + id);\n if (button.style(\"background-color\") == \"red\") {\n button.style(\"background-color\",\"white\");\n } else {\n button.style(\"background-color\",\"red\");\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"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}