{"version":"1.0","type":"rich","title":"181202_02_ Put some balls in","description":"This example demonstrates how SVG viewport and viewbox scaling affect the rendering of graphical elements by dividing a single `<svg>` into a grid of paths, circles, and rectangles. The visualization shows a 7-by-30 grid of green and red grid lines, overlaid with blue circles and yellow squares, which can be interactively zoomed and panned using d3.zoom. The code uses D3 v5 selections (`select`, `selectAll`, `data`, `enter`) to generate the SVG elements dynamically, with all styling defined in CSS. The zoom functionality applies a transform to the entire SVG, illustrating how the viewport interacts with coordinate systems.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/aa78098627794f1abf84c52ba3634d9e?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}