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");
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.