Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Margins

Public visualization

Margins

0 stars1🌍 Public
DDonald Bagwell
Last edited Apr 5, 2024
Created on Apr 5, 2024

This example demonstrates SVG margins by rendering a single gray rectangle positioned inside a computed inner area. The visualization uses D3 v7, specifically the `select` function, to create an SVG canvas sized to the container and draw a rectangle with explicit margin offsets. The code calculates inner dimensions by subtracting margin values from the full width and height, then places the rectangle at those margin coordinates. The gray fill highlights the inner plotting region, making the margin concept visually explicit through the resulting bordered layout.

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

Comments

Sign in to join the discussion.

MIT Licensed