{"version":"1.0","type":"rich","title":"Margins","description":"This example demonstrates how to define the boundaries of a visualization using margins, rendering a fixed gray inner rectangle on an SVG canvas. The outer container dimensions are read directly from the page, then margin values create a centered plotting area of a specified size. The code uses D3.js’s `select` and `join` methods to append the SVG and its rectangle, calculating the `innerWidth` and `innerHeight` by subtracting the margins from the container size. This setup ensures space is reserved for future axes or chart elements.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/0a038559611e4800800f4e683c3cca38?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}