D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mbostock
Full window
Github gist
SVG Semantic Zooming
A series of related examples:
Canvas geometric zooming
Canvas semantic zooming
SVG geometric zooming
SVG semantic zooming
<!DOCTYPE html> <meta charset="utf-8"> <svg width="960" height="500"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var randomX = d3.randomNormal(width / 2, 80), randomY = d3.randomNormal(height / 2, 80), data = d3.range(2000).map(function() { return [randomX(), randomY()]; }); var circle = svg.selectAll("circle") .data(data) .enter().append("circle") .attr("r", 2.5) .attr("transform", transform(d3.zoomIdentity)); svg.append("rect") .attr("fill", "none") .attr("pointer-events", "all") .attr("width", width) .attr("height", height) .call(d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoom)); function zoom() { circle.attr("transform", transform(d3.event.transform)); } function transform(t) { return function(d) { return "translate(" + t.apply(d) + ")"; }; } </script>
https://d3js.org/d3.v4.min.js