Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Responding to Resize

Public visualization

Fork of Responding to Resize

0 stars0🌍 Public
Ddok0086m
Last edited Dec 20, 2022
Created on Dec 20, 2022

This example demonstrates a responsive SVG visualization that fills the entire browser window and redraws its content whenever the viewport size changes. The page uses CSS to stretch a chart container to full screen, then d3.js extracts the container’s clientWidth and clientHeight on each resize event to update the SVG’s width and height attributes. Two diagonal lines form a green X marker whose endpoints adjust to the current dimensions, showcasing how to bind data containing the new coordinates and re-render with a selection merge. The code relies on d3.select, selection.attr, and window.addEventListener for the resize handling.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed