Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

responsiveVizContainer

Public visualization

Viewing a saved revision (read-only)

e18c9d07dbdf4287bb77bc17c955a3d7

responsiveVizContainer

0 stars1🌍 Public
DDonald Bagwell
Last edited Apr 8, 2024
Created on Apr 7, 2024
Forked from vizFunctionConcept

This example shows a gray inner rectangle centered within a scalable SVG container, with a ResizeObserver logging the container’s dimensions on every resize. The visualization uses D3’s `select`, `selectAll`, and `join` to bind and update SVG elements, while the `viz` function computes inner dimensions from configurable margins and sets the rectangle’s fill via the `innerRectFill` property. The code demonstrates basic responsive layout with a fixed margin structure and dynamic width and height values derived from the container’s client size.

AI-generated description

Creating circles with D3.

Challenge

  • Fork this example
  • Modify it
  • Maybe make it Halloween themed
  • Maybe make it Christmas themed
  • Be creative