{"version":"1.0","type":"rich","title":"d3 start","description":"This example creates a striped grid of horizontal and vertical rectangles, each masked so that the overlap reveals alternating symbol shapes. The visualization uses D3 v6’s `symbol` API to draw seven distinct shapes—circle, cross, diamond, square, star, triangle, and wye—as SVG paths inside two mask definitions. The masks are applied via the `mask` attribute to the rects, which are generated with `d3.range` and `join`. The page captures the full window dimensions, scaling the SVG and grid accordingly, and demonstrates a minimal React-free setup with D3 selections.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/50df4fd88abf48df99c41cafd0127340?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}