Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Marginsdrb

Public visualization

Fork of Marginsdrb

0 stars0🌍 Public
DDonald Bagwell
Last edited Mar 16, 2024
Created on Mar 16, 2024
Forked from Margins

This example demonstrates how margins define the inner rectangle of a visualization, reserving space for axes while constraining the area for marks. It uses D3.js version 7.9.0, specifically the `select` API, to render an SVG that fills the container. The code calculates the inner width and height by subtracting fixed 50-pixel margins from the container dimensions, then draws a gray rectangle (`#B5B5B5`) positioned at those margin offsets. The rendered output is a static filled rectangle, serving as a template for layout structure.

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