Skip to main content
SimilarExport ZIP
100%

Composition of dry air at sea level

✓ Published0🌍 Public
FFadziMandondo
Last edited Apr 29, 2020
Created on Apr 29, 2020

A bar chart displays the volume percentages of gases in dry air at sea level, with nitrogen and oxygen dominating, while trace gases like ozone and xenon appear at minuscule scales. The visualization uses D3 v3 to create an ordinal x-axis and linear y-axis, with hover tooltips showing each gas’s percentage and parts-per-million conversion. Data is loaded from a CSV file via `d3.csv`, and the chart responds to window dimensions, rotating x-axis labels on smaller screens.

AI-generated description

Composition of dry air at sea level.

Data source:

Atkins, Peter W.; Paula, Julio de (2013): Physikalische Chemie. 5. Auflage. Weinheim: Wiley-VCH Verlag GmbH & Co. KGaA. p. 28. <br>

<br> <br> Original Chart: <a target="_blank" href="https://bl.ocks.org/mbostock/3310560">https://bl.ocks.org/mbostock/3310560</a>
MIT Licensed

Similar vizzes

Loading thumbnail…

Composition of dry air at sea level

This visualization presents the volume percentage composition of dry air at sea level, using a bar chart to display the relative abundance of each gas, from nitrogen and oxygen to trace gases. The chart is built with D3.js version 3 and uses an ordinal scale for the categorical x-axis and a linear scale for the y-axis, which is formatted to show percentages. Bars are rendered as SVG rectangles, and hovering over a bar or its associated tick label reveals a tooltip with the substance’s name, volume percentage, and concentration in ppmv. The data is loaded from a CSV file and is based on values from a physical chemistry textbook by Atkins and de Paula.

EElementargeist
94% match
Loading thumbnail…

Composition of dry air at sea level

A horizontal bar chart visualizes the volume percentage of gases composing dry air at sea level, with bar color shifting from deeppink to dodgerblue on hover and tooltips displaying the percentage in volume percent and ppmv. Built with D3.js v3, the chart uses `d3.scale.ordinal` and `d3.scale.linear` for axes, `d3.svg.axis` for tick marks, and the custom `d3.tip` library for interactive tooltips. Data is loaded from a CSV file containing atmospheric gas concentrations, and the visualization includes a rotating x-axis label for narrow screens.

Ssunnyouc
92% match
Loading thumbnail…

Chemical composition of Seawater

This example visualizes the standard mean chemical composition of seawater (S=35) as a horizontal bar chart, displaying the mass fraction of each dissolved salt and ion in grams per kilogram of seawater. The chart sorts chemical species by their proportion, from chloride to hydroxide, using a linear scale for the x-axis and a categorical band scale for the y-axis. Built with React and D3 v5, the visualization uses `scaleBand` for positioning bars, `scaleLinear` for the value axis, and SVG `<rect>` elements with `<title>` tooltips showing exact mass fractions. Data comes from the DOE handbook on carbon dioxide system analysis methods.

EElementargeist
66% match
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
66% 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
65% match
Loading thumbnail…

O2 Monitor Chart

This chart plots oxygen level over time, filtering out zero values from a CSV dataset inspired by the Data Canvas Sense Your City project. It renders as an SVG line chart using React components and D3 v5’s `scaleLinear`, `scaleTime`, and `line` with `curveNatural`. Custom axis components generate ticks and labels, while the y-axis is fixed from 0 to 100. Data loading and parsing are handled by `useData` with D3’s `csv` function, converting time strings to Date objects and oxygen levels to numbers.

EEmma Schaale
65% 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
64% match
Loading thumbnail…

Untitled

This example visualizes daily average air pollution levels for multiple cities across six pollutant types (CO, O3, NO2, PM10, PM2.5, and SO2) using horizon charts. Data is loaded from a CSV file, aggregated from hourly measurements, and each chart displays a time series for a city-pollutant pair with a color scale specific to the pollutant. The code uses D3 v4, the d3-horizon-chart plugin, and Canvas rendering via the horizon chart’s internal draw method. Charts are appended to the body with titles and computed average values.

ZZeroKurosakii
63% match