Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
viz = d3.select(svgContainer) // the usual d3 select of the main SVG container
circles = viz.select("#circlesLayer").selectAll("circle") // randomly placed circles to have something to zoom
.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])
.style("stroke", "#777")
viz.call(d3.zoom() // the viz svg does the call (could also be a sub group)
.extent([[0,0],[500,300]])
.scaleExtent([1,20])
.on("zoom", zoomed));
function zoomed({transform}) {viz.select("#circlesLayer").attr("transform", transform).style("stroke-width", 1/transform.k);}
// the circlesLayer <g> gets the zoomed transform
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.
