Skip to main content
100%

Zoom + Pan

✓ Published0🌍 Public
DDinoJay
Last edited Mar 11, 2016
Created on Mar 11, 2016

This example demonstrates zooming and panning across a field of 2,000 semi-transparent red squares, whose positions are randomly generated from normal distributions centered in the viewport. The visualization shows how HTML elements can be transformed interactively using D3’s zoom behavior, with the underlying coordinate scales updating in real time. It uses D3 v3’s `d3.behavior.zoom` and linear scales (`d3.scale.linear`) to map data coordinates to screen positions, applying CSS `transform` styles to `<div>` elements. Unlike typical SVG-based examples, this implementation renders the squares as HTML `div` elements, highlighting a lightweight alternative for pan-and-zoom interactions without canvas or SVG overhead.

AI-generated description

my take on

HTML semantic zooming

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3680957'>SVG Semantic Zooming</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/12f6d6a5e0dfafa925d5'>SVG Semantic Zooming</a>

gpl-3.0 Licensed

Similar vizzes