Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<div>
<!-- an important step is that the SVG now sits inside of a div container, so the controls can be here also -->
<svg width="600" height="300">
<g id="layer1"></g>
</svg>
<!-- Here we create a containing element that can be positioned on screen and hold buttons -->
<!-- This exists within the visual frame itself, not outside of it, like Observable Inputs -->
<div id="controls">
<h2>Your clever title</h2>
<div>
Highlight:<br />
<button id="btn-one">One</button>
<button id="btn-two">Two</button>
<button id="btn-three">Three</button>
<button id="btn-four">Four</button>
<button id="btn-five">Five</button>
<br /><br />
<button id="btn-dimAll">Dim All</button>
<button id="btn-showAll">Show All</button>
<br /><br />
Choose a value: <input id="slider" name="slider" type="range" min="1" max="5" step="1" />
</div>
<div style="margin-top: 30px;">
Other explanation, notes, and text can go here.<br />
This can help to tell your reader what to do.<br />
Note that this entire controls section can be positioned whereever you want in the visual.
</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: 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>
{
// 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("click", () => filter("name","one"));
btns.select("#btn-two").on("click", () => filter('name','two'));
btns.select("#btn-three").on("click", () => filter('name','three'));
btns.select("#btn-four").on("click", () => filter('name','four'));
btns.select("#btn-five").on("click", () => filter('name','five'));
btns.select("#btn-dimAll").on("click", dimAll);
btns.select("#btn-showAll").on("click", showAll);
btns.select("#slider").on("input", (evt) => filterGreater("value", evt.target.value));
}
container = d3.select(vizContainer)
data = [
{"name": "one", "value": 1},
{"name": "two", "value": 2},
{"name": "three", "value": 3},
{"name": "four", "value": 4},
{"name": "five", "value": 5}
]
circles = viz.select("#layer1").selectAll(".mycircle")
.data(data)
.join("circle")
.classed("mycircle", true)
.attr("cx",d => d.value * 100)
.attr("cy", 150)
.attr("r", d => d.value * 10)
.style("fill","steelblue");
dimAll = () => {
// first a function to dim (change opacity) of all of the circle objects
circles.style("opacity",0.1);
}
showAll = () => {
// and this one to show them (or rather reset to default value, which is 1)
circles.style("opacity", "");
}
filter = (field,val) => {
// create a function to increase opacity only for a single element, via its data.
dimAll(); // first we call dimAll to dim all of them.
circles.filter(d => d[field] === val).style("opacity", 1); // find the ones where field = value and change opacity
}
filterGreater = (field,val) => {
// create a function to increase opacity only for a single element, via its data.
dimAll(); // first we call dimAll to dim all of them.
circles.filter(d => d[field] >= val).style("opacity", 1); // find the ones where field = value and change opacity
}
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.