100%

Fork of Simple Bar Chart

✓ Published0🌍 Public

Last edited Feb 11, 2024

Created on Feb 4, 2024

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.

AI-generated description

A bar chart showing measure of air quality for Nitrogen dioxide levels for different geographical areas

Challenge

Fork this viz and modify it to show your own data

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

83% 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

83% 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

83% 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

81% 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

79% match

Loading thumbnail…

Fork of Fork of Hello VizHub

This example shows a horizontal bar chart ranking the populations of twenty countries in 2010, sorted in descending order with steelblue bars. It uses D3 v7’s `scaleLinear` for bar widths, `scaleBand` for categorical y-axis positioning, and `d3.axisLeft` and `d3.axisBottom` to render the axes. The data is loaded from a CSV file via `d3.csv`, then parsed, sorted, and sliced. The SVG is manually sized at 960 by 600 pixels, with margins controlled through a transform on a group element.

Ssohith kampalli

78% match

Loading thumbnail…

Fork of Making a Bar Chart

This visualization displays the daily Air Quality Index (AQI) values for two pollutants, NO2 and Ozone, as horizontal bars. It shows how AQI levels fluctuate over time for each pollutant type, with the x-axis representing AQI values and the y-axis listing pollutant categories. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG, with data loaded from a local CSV file. Custom axis label formatting is applied using D3's `format` function, and the chart includes a title and axis label for the AQI value.

CChase Hall

78% match

Loading thumbnail…

Fork of Fork of Making a Bar Chart

This visualization displays the top 10 most populous countries as a horizontal bar chart using SVG rendering. It loads population data from a CSV file via `d3.csv`, scales the values with `d3.scaleLinear` and `d3.scaleBand`, and formats axis ticks with `d3.format`. The chart uses `d3.axisLeft` and `d3.axisBottom` for axes, with custom labels and a steelblue fill for bars.

0057SatvikDamera

78% match