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>
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.
