Skip to main content
100%

Fork of Fork of Fork of Responsive Axes - New Technique - Air Quality Dataset

✓ Published0🌍 Public

This bar chart displays NO2 air quality levels by geographic location, ranking the top 10 regions from highest to lowest concentration. The visualization demonstrates a responsive axis technique that maintains consistent tick mark density as the viewport resizes. Built with D3.js, the chart uses a ResizeObserver to detect container changes and rebuilds the SVG with updated scales. Hover interactions reveal tooltips showing exact values and region names. The code separates axis construction into modular components, including custom x-axis and y-axis label functions, while incorporating margin calculations to preserve layout proportions across different screen sizes.

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