2f:T816,

${svg}

EDUCATION:

AREA DELINEATION:
- - -

MARITAL STATUS:
- - -

AGE:
- - - -

GENDER:
- -

Additional Comments:

30:Tb15,{ // 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-two-on").on("click", () => {layerToggleOnOff("sub"); buttonToggleOnOff("btn-two-on")}); btns.select("#btn-four-on").on("click", () => {layerToggleOnOff("st"); buttonToggleOnOff("btn-four-on")}); btns.select("#btn-three-on").on("click", () => {layerToggleOnOff("rural"); buttonToggleOnOff("btn-three-on")}); btns.select("#btn-five-on").on("click", () => {layerToggleOnOff("single"); buttonToggleOnOff("btn-five-on")}); btns.select("#btn-six-on").on("click", () => {layerToggleOnOff("married"); buttonToggleOnOff("btn-six-on")}); btns.select("#btn-seven-on").on("click", () => {layerToggleOnOff("divorced"); buttonToggleOnOff("btn-seven-on")}); btns.select("#btn-eight-on").on("click", () => {layerToggleOnOff("widowed"); buttonToggleOnOff("btn-eight-on")}); btns.select("#btn-nine-on").on("click", () => {layerToggleOnOff("twe"); buttonToggleOnOff("btn-nine-on")}); btns.select("#btn-ten-on").on("click", () => {layerToggleOnOff("thir"); buttonToggleOnOff("btn-ten-on")}); btns.select("#btn-eleven-on").on("click", () => {layerToggleOnOff("four"); buttonToggleOnOff("btn-eleven-on")}); btns.select("#btn-twelve-on").on("click", () => {layerToggleOnOff("fift"); buttonToggleOnOff("btn-twelve-on")}); btns.select("#btn-thirteen-on").on("click", () => {layerToggleOnOff("six"); buttonToggleOnOff("btn-thirteen-on")}); btns.select("#btn-fourteen-on").on("click", () => {layerToggleOnOff("male"); buttonToggleOnOff("btn-fourteen-on")}); btns.select("#btn-fifteen-on").on("click", () => {layerToggleOnOff("female"); buttonToggleOnOff("btn-fifteen-on")}); btns.select("#btn-sixteen-on").on("click", () => {layerToggleOnOff("nb"); buttonToggleOnOff("btn-sixteen-on")}); btns.select("#btn-seventeen-on").on("click", () => {layerToggleOnOff("Info"); buttonToggleOnOff("btn-seventeen-on")}); btns.select("#btn-a-on").on("click", () => {layerToggleOnOff("infogend"); buttonToggleOnOff("btn-a-on")}); btns.select("#btn-b-on").on("click", () => {layerToggleOnOff("infohs"); buttonToggleOnOff("btn-b-on")}); btns.select("#btn-c-on").on("click", () => {layerToggleOnOff("infodivst"); buttonToggleOnOff("btn-c-on")}); btns.select("#btn-d-on").on("click", () => {layerToggleOnOff("infonb"); buttonToggleOnOff("btn-d-on")}); btns.select("#btn-e-on").on("click", () => {layerToggleOnOff("infoedu"); buttonToggleOnOff("btn-e-on")}); btns.select("#btn-f-on").on("click", () => {layerToggleOnOff("infogen"); buttonToggleOnOff("btn-f-on")}); }31:[{"id":"57dd9970028eef7b248c9f8c111347a27d980312ddd2a6a71c4d13fc1ae6adb82bd854627562609f7d955eab67ac7e5f52a60fca611745e674fb3677bb45aaa9","href":"https://static.observableusercontent.com/files/57dd9970028eef7b248c9f8c111347a27d980312ddd2a6a71c4d13fc1ae6adb82bd854627562609f7d955eab67ac7e5f52a60fca611745e674fb3677bb45aaa9","name":"DataVizFinalTest12.svg","type":"image/svg+xml","lastModified":1683565740474.506,"size":284007}] 2d:{"title":"Data Viz Final","cells":[{"id":0,"value":"# Data Viz Final\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(\"DataVizFinalTest12.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":30,"value":"viz = d3.select(vizContainer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"$30","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":277,"value":"buttonToggleOnOff = (id) => {\n let button = viz.select(\"#\" + id);\n if (button.style(\"background-color\") == \"turquoise\") {\n button.style(\"background-color\",\"\");\n } else {\n button.style(\"background-color\",\"turquoise\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}