{"version":"1.0","type":"rich","title":"Responsive Axes","description":"This visualization demonstrates responsive axes that maintain consistent tick mark density when the chart is resized. Using D3.js, the example calculates the number of ticks based on the inner width and height divided by a constant tick density value, ensuring an even distribution regardless of the container dimensions. A ResizeObserver monitors the container's size, triggering the scales and axes to update dynamically in full-screen mode. The `axisBottom` and `axisLeft` functions render the axes with labels, all within a nested SVG joined via D3's selection API.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/f7a767725e8d4cc08940b56b60a1b03b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}