{"version":"1.0","type":"rich","title":"xy co-ordinates","description":"This example shows a static arrangement of SVG shapes, including red rectangles and circles, positioned at fixed coordinates on a gray background. It demonstrates how React components render SVG elements using the `MyRect` custom component, which returns a `<rect>` element with position, size, fill, and opacity props. The visualization uses React 16 and D3 v5, with circles drawn directly inside an SVG container at varying x-coordinates based on an array mapping. The code defines the canvas dimensions and centers, but the displayed geometry remains fixed rather than interactive or data-driven.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/1e3c8777ed164b349c526d580ef7f4ac?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}