Skip to main content
SimilarExport ZIP
100%

Composition of dry air at sea level

✓ Published1🌍 Public
EElementargeist
Last edited Apr 1, 2020
Created on Apr 1, 2020

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.

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

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.

FFadziMandondo
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
69% match
Loading thumbnail…

Abundance of Rare Elements

This visualization displays the abundance of rare elements in the Earth's crust, ranking them by concentration in parts per million. The horizontal bar chart uses a linear scale for abundance and a band scale for element names, with data from CRC Handbook and Geochemistry sources. Built with React and D3.js v5, the SVG rendering includes tooltips showing element symbols, atomic numbers, and exact concentrations. The visualization highlights the comparative rarity of elements like rhenium and gold versus more common trace elements.

EElementargeist
61% 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
59% 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
58% 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
58% match
Loading thumbnail…

Bar Graph of Humidity histogram

This bar graph shows the distribution of humidity levels from a year of weather data, with the mean humidity marked by a dashed line. It uses d3.histogram to bin the humidity values into 12 intervals, and d3.scaleLinear for both the x and y axes. The chart is rendered as an SVG, with bar heights calculated from the binned counts, and is built with D3 v5 within a React starter template.

VVikil Lakkavatri
58% match