Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description

Added hover interaction to color legend, and toggling the color of the chart

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

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
95% 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
91% 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
87% 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
82% 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
81% 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