Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Responsive Axes

Public visualization

Responsive Axes

1 star19🌍 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

Comments

Sign in to join the discussion.

MIT Licensed