Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
Inputs.button([
["One", () => filter("name","one")], // calls the function filter with specific inputs
["Two", () => filter("name","two")],
["Three", () => filter("name","three")],
["Four", () => filter("name","four")],
["Five", () => filter("name","five")],
[">= 2", () => filterGreater("value",2)], // or calls the function filterGreater with inputs
[">= 3", () => filterGreater("value",3)],
[">= 4", () => filterGreater("value",4)]
])
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);
}
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.
