Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Margins

Public visualization

Viewing a saved revision (read-only)

9404be3b2c714362b66c2a1d4eaa7105

Fork of Margins

0 stars0🌍 Public
Bbepnye@gmail.com
Last edited Apr 10, 2024
Created on Apr 10, 2024
Forked from Margins

This example demonstrates how margins define the inner rectangle of a visualization, using a red rectangle to clearly show the area where data marks are drawn. The code sets fixed margin values for the top, bottom, left, and right, then calculates the inner dimensions by subtracting them from the container's width and height. It uses D3's `select` API with a `join` operation to create and size the SVG and its child rectangle, illustrating the fundamental layout step before adding axes or data.

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