Skip to main content
100%

Margins

✓ Published1🌍 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
MIT Licensed

Similar vizzes