sampleSVG = FileAttachment("DataVizFinalTest12.svg").text()
import {importSVGnode} from "@emfielduva/dvlib"
svg = importSVGnode(sampleSVG)
<div>
<!-- <svg id="main" width ="2600" height="2100"> -->
${svg}
<div id ="controls">
EDUCATION: <button id="btn-e-on">?</button> <button id="btn-b-on">?</button>
<br />
<br />
AREA DELINEATION: <br />
<button id="btn-one-on">Urban</button> - <button id="btn-two-on">Suburban</button> - <button id="btn-four-on">Small Town</button> - <button id="btn-three-on">Rural</button><br />
<br />
<br />
MARITAL STATUS: <button id="btn-a-on">?</button> <br />
<button id="btn-five-on">Single</button> - <button id="btn-six-on">Married</button> - <button id="btn-seven-on">Divorced</button> - <button id="btn-eight-on">Widowed</button>
<br />
<br />
AGE:<br />
<button id="btn-nine-on">19</button> - <button id="btn-ten-on">21-30</button> - <button id="btn-eleven-on">31-40</button> - <button id="btn-twelve-on">41-50</button> - <button id="btn-thirteen-on">51-60</button> <br />
<br />
GENDER: <BR />
<button id="btn-fourteen-on">Male</button> - <button id="btn-fifteen-on">Female</button> - <button id="btn-sixteen-on">Non Binary</button><br />
<br />
Additional Annotations: <br />
<button id="btn-f-on">? Area Delineation, Age, Gender</button> <br />
<button id="btn-c-on">? Area Delineation and Marital Status</button> <br />
<button id="btn-d-on">? Education and Gender</button>
<style>
/* and the buttons and slider can be styled to whatever we want, including CSS :hover styles */
#controls {position: absolute; left: 60px; top: 370px; width: 300px; font-size: 12px; font-family: "Arial Rounded MT Bold"; color: white;"opacity",0.1}
button {border: 0px solid #aaa; border-radius: 0px; background-color: #eee; font-size: 8px;}
button:hover {cursor: pointer; background-color: #ccc;}
button:active {background-color: #ccc}
input#slider {width: 100px;}
</style>
<!-- and now end the overall container -->
</div>
viz = d3.select(vizContainer)
{
// 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);
}
layerOff = (id) => {
viz.select("#" + id).style("visibility","hidden")
}
layerOn = (id) => {
viz.select("#" + id).style("visibility","visible")
}
layerToggleOnOff = (id) => {
let layer = viz.select("#" + id);
if (layer.style("visibility") == "hidden") {
layer.style("visibility","visible");
} else {
layer.style("visibility","hidden");
}
}
layerGroupToggleOnOff = (group) => {
group.forEach(id => {
let layer = viz.select("#" + id);
if (layer.style("visibility") == "hidden") {
layer.style("visibility","visible");
} else {
layer.style("visibility","hidden");
}
})
}
buttonToggleOnOff = (id) => {
let button = viz.select("#" + id);
if (button.style("background-color") == "turquoise") {
button.style("background-color","");
} else {
button.style("background-color","turquoise");
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
