Making a Bar Chart for air quality data

100%

Making a Bar Chart for air quality data

✓ Published1🌍 Public

Last edited Jan 28, 2019

Created on Jan 26, 2019

This example displays a horizontal bar chart of air quality index values for nine Indian cities, from Delhi with the highest reading down to Chandrapur. The visualization shows each city’s AirQuality value as a gray bar extending from the left axis. The code uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and `axisLeft` and `axisBottom` to render the tick marks. Data is loaded from a local CSV file via `d3.csv`, which is then scaled and drawn as SVG rectangles.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This example visualizes NYC Air Quality during COVID-19 using a horizontal bar chart, where each bar represents a region’s PM2.5 level, with longer bars indicating higher pollution. The chart loads CSV data with d3.csv, parses the airquality values as numbers, and renders SVG rectangles scaled by d3.scaleLinear and d3.scaleBand. It uses d3.axisLeft and d3.axisBottom to display region labels and a numeric axis, with gridlines and a custom axis title. The bars are styled in lavender with a cornflowerblue background.

Wwaqaschughtai

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

76% match

Loading thumbnail…

backup bar chart

This example visualizes air quality index values for various pollutants in Maine using a horizontal bar chart. The chart displays pollutants along the y-axis and their corresponding AQI measurements along the x-axis. It loads the CSV data using D3's `csv` utility and renders the SVG bars and axes with React, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The code also includes tick marks and labels generated from the scales.

CChase Hall

75% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the 2011 census population estimates for ten Indian cities, including Mumbai, Bengaluru, and Mysuru, using a horizontal layout. The visualization relies on D3 v5, with a linear scale for population values and a band scale for city names, alongside `d3.axisBottom` and `d3.axisLeft` to render tick marks. Bars are drawn as SVG rectangles, filled in steelblue, with population labels formatted in abbreviated units via `d3.format`. The data is loaded asynchronously from a CSV file using `d3.csv`, which then triggers the rendering function.

AArvind Lairenjam

75% match

Loading thumbnail…

Bar chart Graph with D3.js

A horizontal bar chart displays the population of Indian states, with bars sorted by descending values from Uttar Pradesh to Andhra Pradesh. The visualization uses D3.js v7 to load CSV data via `d3.csv` and renders SVG rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with state labels on the y-axis and population counts on the x-axis. The bars are styled orange with axis labels added as SVG text elements.

DDanthalakirankumar

75% match

Loading thumbnail…

Making a bar chart

This example demonstrates a horizontal bar chart comparing the area of major cities, using data loaded from a CSV file. The visualization positions each city along the y-axis and scales the bar lengths according to the area values. It relies on D3.js v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. The SVG rendering uses a purple fill for bars, which changes to a lighter shade on hover, with the chart area defined by explicit margins.

Vvladvaculin

74% match

Loading thumbnail…

Bar Chart

This example shows a bar chart of the population of India across five census years, drawing horizontal bars whose widths correspond to population values. As the largest populations produce the longest bars, the chart quickly communicates relative magnitudes. Built with React and D3, it uses D3's `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, with `scaleOrdinal` and `schemeDark2` providing the bar colors. The data is loaded from a remote CSV file via D3's `csv` function and displayed as SVG rectangles with tooltip titles.

PPathan Khuvanejarkhan

74% match

Loading thumbnail…

Bar chart Testing

This example displays a horizontal bar chart of Indian population data by year, using React to render SVG elements. D3’s `scaleLinear` maps population counts to bar widths, while `scaleBand` positions bars along the y-axis and `scaleOrdinal` assigns colors from `schemeDark2`. The code fetches CSV data via D3’s `csv` method, parses the first five entries, and draws axes with SVG lines and ticks. Both D3 v7 and React 18.2 are used, with the visualization mounted through `ReactDOM.createRoot`.

PPathan Khuvanejarkhan

74% match