AQI VS PM2.5

100%

✓ Published0🌍 Public

Last edited Apr 24, 2024

Created on Apr 24, 2024

This example shows a bar chart comparing AQI Values across countries, with a primary focus on the overall AQI metric. The visualization uses D3 v7 to load a CSV data file, parse numeric values, and render SVG bars scaled with d3.scaleBand and d3.scaleLinear. It displays rotated x-axis labels for country names and includes axis labels for clarity. The bars are styled with a steelblue fill that darkens on hover via CSS. The code applies standard D3 selections and axis generators to construct the chart within a defined margin-based layout.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Project AQI vs PM2.5

This scatter plot visualizes the relationship between AQI Value and PM2.5 AQI Value, with each point colored by country (India, USA, Australia, etc.). It uses D3.js v7 to read CSV data, create linear scales, render SVG axes and circles, and display a categorical legend. The chart includes axis labels and a title.

Ddandudivya98@gmail.com

87% match

Loading thumbnail…

AQI VS OZONE

This bar chart compares AQI values against ozone AQI values across countries, with steelblue bars representing overall air quality index readings. The visualization uses D3 v7’s SVG rendering, loading data from a CSV file via `d3.csv`. It employs `scaleBand` for the categorical x-axis, `scaleLinear` for the numeric y-axis, and `d3.axisBottom` with rotated labels to accommodate country names. Hover interactions darken bars via CSS, while margins and labels are configured through SVG text elements.

Sshravan.s0710@gmail.com

85% match

Loading thumbnail…

AQI vs NO

A bar chart displays the Air Quality Index (AQI) values for various countries, alongside their NO2 AQI values from a CSV dataset loaded via `d3.csv`. Each country is plotted on the x-axis using `d3.scaleBand`, while the y-axis uses `d3.scaleLinear` to map AQI values to bar heights. The SVG rendering includes rotated x-axis labels for readability, with hover effects styled in the linked `style.css`. D3 v7 is loaded from UNPKG, and the chart is drawn within a fixed-width container using `d3.axisBottom`, `d3.axisLeft`, and `d3.select`.

Sshravan.s0710@gmail.com

83% match

Loading thumbnail…

Project Task 1

This example shows average PM2.5 AQI values for various countries as a horizontal bar chart, with each country’s bar length proportional to its pollution level. The visualization uses React for component structure and D3 v5’s `scaleBand` and `scaleLinear` for positioning, while `csv` loads pollution data from a GitHub-hosted CSV. The SVG bars are rendered as `rect` elements, with axes built from `AxisBottom` and `AxisLeft` components that call `xScale.ticks()` and map over `yScale.domain()`. Tooltips are provided via SVG `<title>` elements.

MMichael Biancardi

80% match

Loading thumbnail…

Project AQI vs CO

This scatter plot compares AQI values against CO AQI values, with each point colored by country. The chart uses D3.js v7 to render an SVG graphic, with linear scales for both axes and a legend mapping ten countries to distinct colors. Data is loaded from a CSV file via `d3.csv`, and the visualization includes axis labels and a title. The code demonstrates importing modules from D3 and local ES6 modules within the VizHub framework.

Ddandudivya98@gmail.com

80% match

Loading thumbnail…

Example AQI Data Per Day of the Week

This interactive bar chart displays Air Quality Index (AQI) values for three pollutant types (Ozone, PM2.5, and PM10) across each day of the week. The visualization updates dynamically when users click buttons for Monday through Sunday, swapping between seven pre-defined datasets. Built with d3.v4, the code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a custom `d3.scaleQuantile` color scale with a purple sequential palette. The SVG rendering includes animated transitions when data changes, with button focus states managed through CSS.

CChase Hall

79% match

Loading thumbnail…

Example AQI Data in Bar Graph

This bar graph displays the Air Quality Index (AQI) values for various pollutants in Maine, with each pollutant represented as a horizontal bar whose length corresponds to its AQI measurement. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. SVG rectangles are rendered for each bar, with axes created through custom `AxisBottom` and `AxisLeft` components. The data is loaded asynchronously from a CSV file using D3’s `csv` function, and hovering over a bar reveals its exact AQI value via a tooltip.

CChase Hall

79% match

Loading thumbnail…

Project AQI vs NO

This scatter plot displays the relationship between AQI values and NO2 AQI values across different countries, with each point colored by its country of origin and accompanied by a legend. The visualization uses D3.js v7 to load data from a CSV file hosted as a GitHub gist, then constructs an SVG chart with linear scales, axes, axis labels, and circles positioned via `d3.scaleLinear`. The code creates a scatter plot with `d3.csv`, `d3.axisBottom`, and `d3.axisLeft`, while styling points using a country-to-color mapping and adding a legend with SVG rectangles and text elements.

Ddandudivya98@gmail.com

78% match