Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
Mousover change textMousover / Mouseout highlightVisual filter (selective dim)HTML inputs controlling Observable UI inputsZoom and Pan with MouseZoom to clicked elementZoom to Regions / Dynamic NarrativeMouse drag move elementMouseover show TooltipClosest Point droplineDrag Snap to LineGroups and Layers in SVGLayers on / offConnecting multiple visuals in one space
Better embedded inputs and UI
<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: 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>
{
// 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
}
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.
