Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<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: 50px; top: 20px; width: 300px; font-size: 12px; 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>
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", () => layerOn("layer1"));
btns.select("#btn-one-off").on("click", () => layerOff("layer1"));
btns.select("#btn-one-only").on("click", () => layerOnlyOn("layer1"));
btns.select("#btn-two-on").on("click", () => layerOn("layer2"));
btns.select("#btn-two-off").on("click", () => layerOff("layer2"));
btns.select("#btn-two-only").on("click", () => layerOnlyOn("layer2"));
btns.select("#btn-three-on").on("click", () => layerOn("layer3"));
btns.select("#btn-three-off").on("click", () => layerOff("layer3"));
btns.select("#btn-three-only").on("click", () => layerOnlyOn("layer3"));
btns.select("#btn-allOn").on("click", allOn);
btns.select("#btn-allOff").on("click", allOff);
btns.select("#btn-one-toggle").on("click", () => layerToggleOnOff("layer1"));
btns.select("#btn-two-toggle").on("click", () => layerToggleOnOff("layer2"));
btns.select("#btn-three-toggle").on("click", () => layerToggleOnOff("layer3"));
btns.select("#slider").on("input", (evt) => layerOnlyOn("layer" + evt.target.value));
}
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");
}
}
allOn = () => {
viz.selectAll("g").style("visibility","visible")
}
allOff = () => {
viz.selectAll("g").style("visibility","hidden")
}
layerOnlyOn = (id) => {
allOff();
viz.select("#" + id).style("visibility","visible")
}
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.
