Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
Vvigneshs1006@gmail.com
Last edited Feb 24, 2024
Created on Feb 17, 2024

This visualization displays the top 10 locations with the highest NO2 levels from an air quality dataset, using a responsive bar chart with color-encoded values. The chart includes a tooltip showing exact values and regions on hover, plus a legend that supports interactive filtering by clicking color swatches. Built with D3.js (v7), it uses `scaleBand` and `scaleLinear` for scales, `scaleSequential` with `interpolateBlues` for color mapping, and a ResizeObserver for responsive axes that maintain tick mark density across window resizes.

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

Loading thumbnail…

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

This example visualizes NO2 air quality levels for the top ten geographic locations, rendered as a responsive bar chart with a sequential color scale. The chart displays each location's Unique ID on the x-axis and NO2 concentration in parts per billion on the y-axis. Interactions include hover tooltips that reveal regional values, an interactive color legend that toggles between blue and green sequential scales via `d3.scaleSequential`, and bar highlighting on mouseover. The visualization uses D3.js for data binding, scales, and axes, with `ResizeObserver` for responsive sizing and SVG for rendering.

Vvigneshs1006@gmail.com
97% match
Loading thumbnail…

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

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.

Vvigneshs1006@gmail.com
96% match
Loading thumbnail…

Fork of Fork of Responsive Axes - Add Interaction - Air Quality Dataset

This visualization presents the top 10 U.S. census tracts with the highest nitrogen dioxide (NO2) levels, displayed as a bar chart with a tooltip showing the exact value and geographic location. The chart uses d3.scaleBand and d3.scaleLinear for axes, with responsive resizing handled via a ResizeObserver and window resize events. The code also demonstrates modularized axis and label components, using d3.axisBottom and d3.axisLeft, with the air quality dataset rendered in SVG.

Vvigneshs1006@gmail.com
92% match
Loading thumbnail…

Fork of Responsive Axes

This visualization demonstrates a responsive bar chart of NO2 levels by geographical area, with axes that maintain consistent tick mark density across different screen sizes. The chart uses D3.js scales (scaleBand and scaleLinear) with axisBottom and axisLeft to render the axes, while a ResizeObserver monitors the container's dimensions and triggers chart redraws. The SVG output is recreated on each resize event, allowing the tick marks to adapt dynamically to changing plot dimensions.

Vvigneshs1006@gmail.com
88% match
Loading thumbnail…

Fork of Simple Bar Chart

This visualization displays a bar chart ranking the top ten geographical areas by nitrogen dioxide (NO2) levels, with bars colored steelblue and labeled axes for geographical area and NO2 concentration in parts per billion. The code filters and sorts input data by descending NO2 values, then uses D3’s `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to render the SVG. It leverages the `viz` function from `@curran/axis-labels` for reusable axis components, with data loaded from a linked dataset.

Vvigneshs1006@gmail.com
83% match
Loading thumbnail…

Fork of Responsive Axes

This example demonstrates responsive axes that maintain consistent tick mark density as the visualization resizes. A bar chart displays NO2 levels across geographical areas, with tick counts dynamically calculated from the inner width and height divided by a fixed density value. The implementation uses D3.js v7, employing `axisBottom` and `axisLeft` for axis rendering, a `ResizeObserver` to track container dimensions, and `scaleBand`/`scaleLinear` for positional encoding. The axis modules recalculate tick counts on every resize event, ensuring labels remain readable at any screen size.

Vvigneshs1006@gmail.com
83% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This visualization shows daily air quality measurements from a Phoenix EPA monitoring site, comparing mean concentrations of four pollutants (NO₂, O₃, SO₂, CO) and an overall AQI value across dates in early January 2000. It renders as a grouped bar chart using D3 v6, with `d3.scaleBand` for the date and pollutant groupings, `d3.scaleLinear` for the y-axis, and `d3.schemeSet2` for categorical colors. Hovering over bars triggers a tooltip via D3’s mouse events. The SVG chart loads data from a CSV file, parsing dates with `d3.timeParse` and formatting axis ticks with `d3.timeFormat`.

Hharshabandi3060@gmail.com
80% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This heatmap shows daily mean concentrations of four air pollutants (NO2, O3, SO2, and CO) over time, with color intensity indicating pollution levels. The visualization uses D3.js v6 to read a CSV file of EPA air quality data, parse dates, and render an SVG with a color scale based on the `d3.scaleSequential` with the YlGnBu interpolator. Each cell represents a pollutant-date combination, and hovering reveals a tooltip with the exact date and value. The chart employs `d3.axisTop` and `d3.axisLeft` for labeled axes.

Hharshabandi3060@gmail.com
79% match