Skip to main content
SimilarExport ZIP
100%

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

✓ Published2🌍 Public
Vvigneshs1006@gmail.com
Last edited Feb 12, 2024
Created on Feb 11, 2024

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.

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 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
92% 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
92% match
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
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
85% 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
81% 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
79% match
Loading thumbnail…

Fork of Air Quality Dataset Project - Vignesh

This fork of the Air Quality Dataset Project visualizes New York City community district boundaries and air quality data using D3 v7 with SVG and animation. The map renders GeoJSON polygons representing Manhattan districts, with each district’s geometry colored or encoded to reflect associated air-quality metrics. Built with D3’s geographic projection and path generators, the visualization animates transitions—likely between different pollutants or time periods—while preserving the geographic context. Hover effects and smooth updates support interactive comparison across districts, and the MIT-licensed code provides a reusable template for community-level environmental data exploration.

Vvigneshs1006@gmail.com
77% match
Loading thumbnail…

Fork of Final Project

This interactive visualization reveals patterns in air quality data across U.S. states from 2008 to 2018, allowing users to toggle between views of SO2, particulate matter, and NO3 concentrations. The code uses D3.js v6 to render an SVG with animated transitions, mapping state abbreviations along the y-axis and years on the x-axis. Radio buttons trigger distinct animation functions for each pollutant, each displaying differently colored data points with numeric labels formatted using `d3.format`. The visualization employs a React framework and computes aggregated pollutant averages from the embedded dataset.

YYi Yang
77% match