Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Margins

Public visualization

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

We define the "inner rectangle" for our visualizations using margins! These are important for

  • Defining where the marks go for our data visualizations
  • Giving space for the axes

Comments

Sign in to join the discussion.

MIT Licensed