{"version":"1.0","type":"rich","title":"react-d3","description":"This React and D3 example demonstrates a reusable SVG container component that establishes a standard margin convention for data visualizations. The `VizContainer` component abstracts the SVG and group elements, rendering a gray background rect and an inner plotting area with a transform translation. Using React and ReactDOM for the component structure, it accepts width, height, margin, and inner dimensions as props, with an optional `showMargins` flag to display the boundary rectangles. The code sets up a 960x500 canvas with 30-pixel margins, providing boilerplate for future chart development within the translated coordinate system.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/60fef8cc71284c9b885be3b46cfb2188?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}