hurtmenot271 (@hurtmenot271), VizHub

Responding to Resize

This example shows how a visualization can respond dynamically to browser window resizing by redrawing an SVG to fill the available space. It uses CSS to make a container div occupy the full viewport, then extracts the computed `clientWidth` and `clientHeight` to set the SVG’s dimensions. A pair of green lines form an X across the chart to visually confirm the resized layout. The code relies on D3 v5’s selection and data join methods, alongside a native `window.addEventListener("resize")` handler to trigger the redraw.

Sep 8, 2019

Loading thumbnail…

Responding to Resize

This example shows how a visualization can respond dynamically to browser window resizing by redrawing an SVG to fill the available space. It uses CSS to make a container div occupy the full viewport, then extracts the computed `clientWidth` and `clientHeight` to set the SVG’s dimensions. A pair of green lines form an X across the chart to visually confirm the resized layout. The code relies on D3 v5’s selection and data join methods, alongside a native `window.addEventListener("resize")` handler to trigger the redraw.

Sep 8, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example creates a red SVG smiley face and animates its eyebrows to demonstrate fundamental DOM manipulation with D3.js. It uses `d3.select` to target the SVG element and applies styles directly, while the face itself is constructed through basic SVG shapes. The project relies on D3 v5, loaded from unpkg, and features a video tutorial embedded in the README. The eyebrows move via JavaScript-driven updates, though the specific animation logic is in a bundled file rather than shown in the visible source. The rendering is entirely SVG-based within a fixed 960×500 canvas.

Aug 28, 2019