Skip to main content
100%

Responsive Axes

✓ Published15🌍 Public
CCurran Kelleher
Last edited Feb 12, 2024
Created on Feb 7, 2024
Forked from Axis Labels

This example demonstrates a visualization container with responsive axes that maintain consistent tick mark density as the chart resizes. The code uses a ResizeObserver to track container dimensions and updates a D3 v7 scatterplot-like visualization with a gray inner rectangle. Both the x and y axes compute their tick counts dynamically based on the available inner width and height, dividing by a fixed density value of 50 pixels per tick. This approach ensures the axis labels remain evenly spaced whether the viewport is large or small.

AI-generated description

A viz container with responsive axes that have consistent tick mark density. Try opening in full screen mode and resizing!

Challenge

  • Use this technique to make the axes on your viz responsive
MIT Licensed

Similar vizzes