Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Responsive Axes

Public visualization

Viewing a saved revision (read-only)

6bb6e1615c1d48cfb20f051f58676efe

Responsive Axes

0 stars0🌍 Public
JJasmine Ye Han
Last edited Feb 19, 2023
Created on Feb 17, 2023

This example demonstrates a reusable chart component that adapts to the full browser viewport, redrawing itself on window resize. It applies the D3.js margin convention to separate the plotting area from axis labels, using `d3.scaleLinear` and `d3.axisLeft`/`d3.axisBottom` to render axes. A rounded rectangle fills the inner chart space, while an event listener triggers the render function to recompute dimensions on every resize.

AI-generated description

Jumping off point for creating your own responsive visualizations with margins.

Contains a reusable implementation of the D3.js Margin Convention.