Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Responding to Resize

Public visualization

Viewing a saved revision (read-only)

e283cfc8134742d7a084bcaa4e8a969f

Fork of Responding to Resize

0 stars0🌍 Public
FFerasMorsi
Last edited Jan 29, 2023
Created on Jan 29, 2023

This example demonstrates a full-page SVG visualization that responds to browser resizing by drawing a green X composed of two thick diagonal lines. The code uses D3 v5 to select the chart container and append an SVG element, then defines a redraw function that extracts the container’s clientWidth and clientHeight and applies them as the SVG’s width and height attributes. Two lines are bound to a data array and updated with new coordinates on every resize event, merging entered and existing elements via selection.merge(). The chart listens to the window’s resize event to trigger the redraw, using only CSS and client dimensions for layout.

AI-generated description