Skip to main content
Log in
G

gsonule

@gsonule·3 public vizzes

Loading thumbnail…

Responding to Resize

This example demonstrates a simple SVG visualization that dynamically resizes to fill the browser window. It uses CSS to define a full-viewport container and JavaScript to read the container’s client dimensions on every window resize event. The code appends an SVG and redraws two crossing lines to form an X, updating the SVG’s width and height attributes. It relies on D3 v5’s selection and data-join methods (`selectAll`, `enter`, `merge`) to manage the line elements, with no external data source.

Sep 14, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates a simple SVG visualization that dynamically resizes to fill the browser window. It uses CSS to define a full-viewport container and JavaScript to read the container’s client dimensions on every window resize event. The code appends an SVG and redraws two crossing lines to form an X, updating the SVG’s width and height attributes. It relies on D3 v5’s selection and data-join methods (`selectAll`, `enter`, `merge`) to manage the line elements, with no external data source.

Sep 14, 2019
Loading thumbnail…

Responding to Resize

This example shows how a visualization can adapt to browser window resizing by drawing a green X that spans the full width and height of the available space. The chart container uses CSS to fill the viewport, and a `resize` event listener triggers a `redraw` function that reads `chartDiv.clientWidth` and `clientHeight` to set the SVG’s dimensions. D3 v5’s data join (`selectAll`, `enter`, `merge`) updates the two line elements with new coordinates on every resize. The rendering uses SVG lines with a semi-transparent stroke.

Sep 14, 2019