{"version":"1.0","type":"rich","title":"Responding to Resize","description":"This example demonstrates how a D3.js visualization can respond dynamically to browser resizing. A green X-shaped pair of lines fills the entire viewport, with the SVG’s width and height attributes continuously updated based on the container’s client dimensions. The code uses a CSS fixed-position div to define the chart area, then directly sets the SVG dimensions via `clientWidth` and `clientHeight` within a `redraw` function. A `window.addEventListener(\"resize\", redraw)` triggers the update, while D3’s data join (`selectAll`, `enter`, `merge`) efficiently redraws the line elements with updated coordinates and stroke properties.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/c15290e965de4042882d9bbda69aa6df?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}