Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Responsive Starter Code

Public visualization

Viewing a saved revision (read-only)

1c529d7ce7f24e57841142c5a1fafba4

Responsive Starter Code

0 stars0🌍 Public
JJasmine Ye Han
Last edited Feb 18, 2023
Created on Feb 18, 2023

This responsive starter code demonstrates how to build a D3 visualization that adapts to the browser window’s dimensions. It renders a full-screen SVG containing a single rounded rectangle that resizes along with the viewport. The example uses D3 v5 with a reusable component function, `myResponsiveComponent`, which receives width and height from `document.body.clientWidth` and `document.body.clientHeight`. A resize event listener triggers the `render` function, updating the SVG and rectangle attributes via D3’s data-join and merge pattern, ensuring smooth, unobtrusive resizing without redeclaring elements.

AI-generated description

Jumping off point for creating your own responsive visualizations.