Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Responding to Resize

Public visualization

Viewing a saved revision (read-only)

427cac2da912462997688569d570db01

Responding to Resize

0 stars0🌍 Public
Ssathesujit
Last edited Aug 7, 2020
Created on Aug 7, 2020

This example demonstrates how a visualization can adapt to browser resizing. The code uses CSS to make a chart container fill the viewport and JavaScript to extract its `clientWidth` and `clientHeight` on every resize event. It redraws an SVG element with `d3.select` and `svg.attr` to match the new dimensions, then renders two intersecting green lines to form an X. The D3 v5 code uses `.selectAll("line")`, `.data()`, `.enter()`, and `.merge()` to update the line elements, which visually confirms the chart’s size synchronization.

AI-generated description