Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Responding to Resize

Public visualization

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

Comments

Sign in to join the discussion.

MIT Licensed