Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Margins

Public visualization

Viewing a saved revision (read-only)

f78122c67ff740b892761efc62abc125

Margins

0 stars11🌍 Public
CCurran Kelleher
Last edited Jan 23, 2024
Created on Jan 23, 2024
Forked from Circles with D3

This example demonstrates how to define the boundaries of a visualization using margins, rendering a fixed gray inner rectangle on an SVG canvas. The outer container dimensions are read directly from the page, then margin values create a centered plotting area of a specified size. The code uses D3.js’s `select` and `join` methods to append the SVG and its rectangle, calculating the `innerWidth` and `innerHeight` by subtracting the margins from the container size. This setup ensures space is reserved for future axes or chart elements.

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

Svelte

Here's a video on how to get started with Svelte as well!