Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Responsive Axes

Public visualization

Viewing a saved revision (read-only)

12e597995a764e5e80b1ba8a05c9d430

Responsive Axes

0 stars0🌍 Public
DDean Bozic
Last edited Nov 2, 2020
Created on Nov 2, 2020
Forked from Responsive Axes

This example demonstrates axes that dynamically update their tick spacing and labels when the browser window is resized. A linear scale maps a domain of zero to ten trillion to the width of the plot area, while a second scale maps zero to one to the height. The visualization uses `d3.axisBottom` and `d3.axisLeft` to generate the ticks, and through a custom `render` function triggered by a `resize` event listener, the SVG and its axes adjust continuously to the new dimensions. The rendering uses `d3.select`, `marginConvention`, and labeled axis modules to manage layout and styling.

AI-generated description