{"version":"1.0","type":"rich","title":"D3 Translate Example","description":"This example demonstrates a panning interaction for a 28×28 grid of colored rectangles rendered as SVG, where the default d3.zoom wheel behavior is replaced with a custom wheel handler that calls `zoomer.translateBy` on a transition. The visualization shows how adding a transition to `translateBy` causes the grid to gradually zoom out instead of scrolling vertically as intended, contrasting with the default behavior without a transition. The code uses `d3.select`, `d3.range`, `d3.zoom`, `d3.interpolate`, and SVG rectangles with random fill colors, with the zoom transform applied directly to the rectangles.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/98f01d0d03234a9bbf0a279fd947f93c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}