{"version":"1.0","type":"rich","title":"Gist de26f52eb8910be97e525cd02d416dce","description":"This example demonstrates a reusable margin convention pattern for D3.js visualizations. It sets up an SVG canvas with defined margins—10 pixels on top and right, 50 pixels on bottom and left—and calculates the usable width and height by subtracting these margins from the SVG’s total dimensions. The code appends a `<g>` group element and translates it to the top-left corner of the plot area, enabling subsequent chart elements to be positioned relative to the inner drawing region. The implementation uses standard D3 selection and attribute methods, including `d3.select` and `attr`, without requiring additional libraries.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-de26f52eb8910be97e525cd02d416dce?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}