Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
Mousover change textMousover / Mouseout highlightVisual filter (selective dim)Better embedded inputs and UIZoom 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
HTML inputs controlling Observable UI inputs
viewof myValue = Inputs.input(2)
Inputs.bind(Inputs.range([1, 5], {label: "Slider value", step: 1}), viewof myValue)
Inputs.bind(Inputs.select(new Map([["One", 1], ["Two", 2], ["Three", 3], ["Four", 4], ["Five", 5]]), {label: "Select one"}), viewof myValue)
filteredData = data.filter(d => d.value == myValue)
function setInput(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
{
// 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", function() {setInput(viewof myValue, 1)});
btns.select("#btn-two").on("click", function() {setInput(viewof myValue, 2)});
btns.select("#btn-three").on("click", function() {setInput(viewof myValue, 3)});
btns.select("#btn-four").on("click", function() {setInput(viewof myValue, 4)});
btns.select("#btn-five").on("click", function() {setInput(viewof myValue, 5)});
btns.select("#slider").on("input", function() {setInput(viewof myValue, this.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(filteredData)
.join("circle")
.classed("mycircle", true)
.attr("cx",d => d.value * 100)
.attr("cy", 150)
.attr("r", d => d.value * 10)
.style("fill","steelblue");
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.
