Skip to main content
100%

Fork of Responsive Axes

✓ Published2🌍 Public
AAkanksha
Last edited Feb 14, 2024
Created on Feb 14, 2024
Forked from Responsive Axes

This visualization presents a horizontal bar chart ranking the top ten countries by total Olympic medals, using data from the `@akankshapawar1/olympics` package. The chart’s key feature is its responsive axes, which maintain consistent tick mark density as the window resizes. It uses a `ResizeObserver` to capture viewport dimensions and dynamically adjusts the number of ticks passed to `axisBottom` and `axisLeft` from D3, ensuring the axis labels never become overly crowded or sparse. The example highlights a reusable technique for creating axes that adapt gracefully to any screen size.

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