Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Responding to Resize

Public visualization

Viewing a saved revision (read-only)

229ab57da54b4d8db8e863344835250b

Responding to Resize

0 stars0🌍 Public
AAravind Subramaniam
Last edited Jan 19, 2020
Created on Jan 19, 2020

This visualization demonstrates how an SVG chart can automatically resize to fill its browser window. It shows two semi-transparent green lines forming an X, which dynamically adjust their positions and lengths based on the current viewport dimensions. The implementation uses d3.select to create the SVG element, then a custom redraw function extracts the container’s clientWidth and clientHeight to update the SVG attributes. A window resize event listener triggers the redraw, while the dataset provides the line endpoints. The chart’s container is styled with CSS positioned fixed to span the entire page.

AI-generated description