sampleSVG = FileAttachment("DataVizFinalTest6.svg").text()
import {importSVGnode} from "@emfielduva/dvlib"
svg = importSVGnode(sampleSVG)
viewof layers = Inputs.checkbox(["Male", "Female", "Non-Binary"], {
label: "Layers",
value: ["male", "female", "nb"]
})
<div>
<!-- <svg id="main" width ="2600" height="2100"> -->
${svg}
<div id ="controls">
All Data: <button id="btn-allOn">All On</button> <button id="btn-allOff">All Off</button><br />
Comments: <button id="btn-seventeen-on">On</button><button id="btn-seventeen-off"> Off</button> <br />
<br />
Area Delineation: <button id="btn-allOn1">All On</button>
<button id="btn-allOff1">All Off</button><br />
<button id="btn-one-on">Urban On</button> - <button id="btn-two-on">Suburban On</button> - <button id="btn-four-on">Small Town On</button> - <button id="btn-three-on">Rural On</button><br />
<button id="btn-one-off">Urban Off</button> - <button id="btn-two-off">Suburban Off</button> - <button id="btn-four-off">Small Town Off</button> - <button id="btn-three-off">Rural Off</button><br />
<br />
Marital Status: <button id="btn-allOn2">All On</button> <button id="btn-allOff2">All Off</button><br />
<button id="btn-five-on">Single On</button> - <button id="btn-six-on">Married On</button> - <button id="btn-seven-on">Divorced On</button> - <button id="btn-eight-on">Widowed On</button>
<br />
<button id="btn-five-off">Single Off</button> - <button id="btn-six-off">Married Off</button> - <button id="btn-seven-off">Divorced Off</button> - <button id="btn-eight-off">Widowed Off</button>
<br />
<br />
Age: <button id="btn-allOn3">All On</button> <button id="btn-allOff3">All Off</button><br />
<button id="btn-nine-on">19 On</button> - <button id="btn-ten-on">21-30 On</button> - <button id="btn-eleven-on">31-40 On</button> - <button id="btn-twelve-on">41-50 On</button> - <button id="btn-thirteen-on">51-60 On</button> <br />
<button id="btn-nine-off">19 Off</button> - <button id="btn-ten-off">21-30 Off</button> - <button id="btn-eleven-off">31-40 Off</button> - <button id="btn-twelve-off">41-50 Off</button> - <button id="btn-thirteen-off">51-60 Off</button> <br />
<br />
Gender: <button id="btn-allOn4">All On</button>
<button id="btn-allOff4">All Off</button><br />
<button id="btn-fourteen-on">Male On</button> - <button id="btn-fifteen-on">Female On</button> - <button id="btn-sixteen-on">Non Binary On</button><br />
<button id="btn-fourteen-off">Male Off</button> - <button id="btn-fifteen-off">Female Off</button> - <button id="btn-sixteen-off">Non Binary Off</button><br />
<br />
<style>
/* and the buttons and slider can be styled to whatever we want, including CSS :hover styles */
#controls {position: absolute; left: 30px; top: 300px; width: 300px; font-size: 10px; font-family: Helvetica,Arial,sans-serif; color: white;}
button {border: 1px solid #aaa; border-radius: 5px; 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-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", () => layerGroupToggleOnOff(["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);
}
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") == "red") {
button.style("background-color","white");
} else {
button.style("background-color","red");
}
}
allOn = () => {
viz.selectAll("g").style("visibility","visible")
}
allOff = () => {
viz.selectAll("g").style("visibility","hidden")
}
layerOnlyOn = (id) => {
allOff();
viz.select("#" + id).style("visibility","visible")
}
// vizContainer = <div>
// <svg width="500" height="500">
// <g id="layer1">
// <rect x="20" y="20" width="150" height="50" style="fill:red;"></rect>
// <text x="25" y="40">Layer 1, red box</text>
// </g>
// <g id="layer2">
// <circle cx="400" cy="150" r="100" style="fill: blue;"></circle>
// <text x="400" y="160" text-anchor="middle" style="fill: white;">Layer 2, blue circle</text>
// </g>
// <g id="layer3">
// <path d="M125,250 L250,400 350,300 450,375" style="fill: #ddd; stroke: green; stroke-width: 10px"></path>
// <text transform="translate(180,270) rotate(21)">Layer 3, green path</text>
// </g>
// </svg>
// <div id="controls">
// <h2>Clever title</h2>
// <div>
// Turn layers on or off:<br />
// <button id="btn-one-on">1 On</button><button id="btn-one-off">1 Off</button> - <button id="btn-one-only">1 Only</button><br />
// <button id="btn-two-on">2 On</button><button id="btn-two-off">2 Off</button> - <button id="btn-two-only">2 Only</button><br />
// <button id="btn-three-on">3 On</button><button id="btn-three-off">3 Off</button> - <button id="btn-three-only">3 Only</button><br />
// <br />
// <button id="btn-allOn">All On</button>
// <button id="btn-allOff">All Off</button>
// <br /><br />
// Toggle on/off:<br />
// <button id="btn-one-toggle">Layer 1</button><br />
// <button id="btn-two-toggle">Layer 2</button><br />
// <button id="btn-three-toggle">Layer 3</button><br />
// <br /><br />
// with a slider: <input id="slider" name="slider" type="range" min="1" max="3" step="1" />
// </div>
// </div>
// <style> */
// /* and the buttons and slider can be styled to whatever we want, including CSS :hover styles */
// #controls {position: absolute; right: 250px; top: 20px; width: 300px; font-size: 8px; font-family: Helvetica,Arial,sans-serif;}
// button {border: 1px solid #aaa; border-radius: 5px; background-color: #eee; font-size: 10px;}
// button:hover {cursor: pointer; background-color: #ccc;}
// input#slider {width: 100px;}
// </style>
// <!-- and now end the overall container -->
// </div>
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.