🌍 Public
Viewing a saved revision (read-only)
9404be3b2c714362b66c2a1d4eaa7105
Fork of 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 descriptionWe 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