2f:T81c,

${svg}

EDUCATION:

AREA DELINEATION:
- - -

MARITAL STATUS:
- - -

AGE:
- - - -

GENDER:
- -

Additional Annotations:

30:Tb77,{ // 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")}); btns.select("#btn-allOn").on("click", allOn); btns.select("#btn-allOff").on("click", allOff); }31:[{"id":"38c8525d20813c892c7e19c6be3db5188ab6240322551f23ec7273b1cf726dfe99cf966f6bc1c29cce7d8a2ee8e2dd483ff7c26d54485af14e185091217a6ff8","href":"https://static.observableusercontent.com/files/38c8525d20813c892c7e19c6be3db5188ab6240322551f23ec7273b1cf726dfe99cf966f6bc1c29cce7d8a2ee8e2dd483ff7c26d54485af14e185091217a6ff8","name":"DataVizFinalTest8.svg","type":"image/svg+xml","lastModified":1683559217241.398,"size":474462},{"id":"57dd9970028eef7b248c9f8c111347a27d980312ddd2a6a71c4d13fc1ae6adb82bd854627562609f7d955eab67ac7e5f52a60fca611745e674fb3677bb45aaa9","href":"https://static.observableusercontent.com/files/57dd9970028eef7b248c9f8c111347a27d980312ddd2a6a71c4d13fc1ae6adb82bd854627562609f7d955eab67ac7e5f52a60fca611745e674fb3677bb45aaa9","name":"DataVizFinalTest12.svg","type":"image/svg+xml","lastModified":1683565187061.287,"size":284007},{"id":"40ac85755c8b41175502455e7bc0dbcaea73c2acbfded2bbd37811c6a697094a350db7b5aa33af16ea80a5368c186e6e1ee5d4cc15cc51d424407133752ff99a","href":"https://static.observableusercontent.com/files/40ac85755c8b41175502455e7bc0dbcaea73c2acbfded2bbd37811c6a697094a350db7b5aa33af16ea80a5368c186e6e1ee5d4cc15cc51d424407133752ff99a","name":"DataVizFinalTest9.svg","type":"image/svg+xml","lastModified":1683562818968.346,"size":403107},{"id":"621bf00597d1c4215fcff367fd852ed52fd17f54b71ea883cbeb807f5cfe2747daeb7f14b9e9c1d6a96c0c6acd8d190f10d376d27b3a1aca118423c5d06b4e5e","href":"https://static.observableusercontent.com/files/621bf00597d1c4215fcff367fd852ed52fd17f54b71ea883cbeb807f5cfe2747daeb7f14b9e9c1d6a96c0c6acd8d190f10d376d27b3a1aca118423c5d06b4e5e","name":"DataVizFinalTest11.svg","type":"image/svg+xml","lastModified":1683563221816.986,"size":472634},{"id":"40b632f819a62cf11f3e512f7e70e7a17b916a6cdb03bc356b25f1971deb64c2f368b1342d897f9f6e1792997dfa24fa780839b5774fd228fefa9154cdda41f9","href":"https://static.observableusercontent.com/files/40b632f819a62cf11f3e512f7e70e7a17b916a6cdb03bc356b25f1971deb64c2f368b1342d897f9f6e1792997dfa24fa780839b5774fd228fefa9154cdda41f9","name":"DataVizFinalTest6.svg","type":"image/svg+xml","lastModified":1683317898093.686,"size":337265}] 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":398,"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":302,"value":"input# checked + label {\n background: #bada55;\n}\n\ninput:checked + label:after {\n left: calc(100% - 5px);\n transform: translateX(-100%);\n}\n\nlabel:active:after {\n width: 130px;\n}\n\n// centering\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}","pinned":false,"hidden":false,"mode":"html"},{"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\") == \"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"}