blourabie

@blourabie·2 public vizzes

Responding to Resize

This example demonstrates how a D3.js v5 visualization can dynamically respond to browser resizing. The chart container fills the page via CSS, and a `redraw` function extracts the current `clientWidth` and `clientHeight` to set the SVG element’s dimensions. It then draws a large green X using two SVG `line` elements whose endpoints are computed from those dimensions. A `window` `resize` event listener triggers `redraw`, ensuring the X always spans the full viewport. The rendering uses pure SVG with D3’s data join pattern.

Aug 5, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates a D3.js v5 visualization that dynamically resizes an SVG to match the browser window. The page uses a fixed-position container to fill the viewport, and a `redraw` function reads the container’s `clientWidth` and `clientHeight` to update the SVG’s dimensions. It draws an X composed of two green lines with 100-pixel stroke width and 0.5 opacity, using a data join with `selectAll`, `enter`, and `merge`. A `window` resize event listener triggers `redraw` each time the window size changes.

Aug 5, 2019