Fork of Responsive Axes
✓ Published2🌍 Public
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 descriptionA 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