{"version":"1.0","type":"rich","title":"Responsive Axes","description":"This example demonstrates a responsive scatterplot layout with axes that adapt to the container’s dimensions. It shows labeled x and y axes with tick marks dynamically recalculated based on the available plotting area, alongside a shaded inner region. The code uses D3.js v7 and a ResizeObserver to track container size changes, triggering updates to the SVG’s width and height. It relies on d3.scaleLinear for positioning, d3.axisBottom and d3.axisLeft for rendering ticks, and modular functions for reusable axis and label components.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/295edf36af7849d292d0ce4554da22ee?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}