Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
circles = d3.select(svgContainer).selectAll("circle")
.data(d3.range(10))
.join("circle")
.attr("cx", () => 50 + Math.random() * 400)
.attr("cy", () => 50 + Math.random() * 200)
.attr("r", 20)
.style("fill", d => d3.schemeCategory10[d])
.on("click", zoomToBoundingBox)
zoomToBoundingBox = (evt,d) => {
evt.stopPropagation();
let elem = evt.currentTarget;
let bbox = elem.getBBox();
let minX = bbox.x;
let minY = bbox.y
let viewBox = minX + " " + minY + " " + bbox.width + " " + bbox.height;
let svg = d3.select(svgContainer);
svg.transition().duration(1000).attr("viewBox", viewBox);
}
d3.select(svgContainer).on("click", zoomToBoundingBox)
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.
