Skip to main content
SimilarExport ZIP
100%

Composition of dry air at sea level

✓ Published1🌍 Public
Ssunnyouc
Last edited Apr 5, 2020
Created on Apr 5, 2020

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.

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
92% match
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
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
68% 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
68% 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
67% match
Loading thumbnail…

A6 - Diverging Bar Chart in D3

This diverging bar chart compares average temperatures across cities, using a diverging color scale (blue to red) to show deviations from the mean baseline. The visualization renders as SVG via D3 v7, with bars extending left or right from the baseline depending on whether temperatures fall above or below average. It uses `d3.scaleDiverging` with `d3.interpolateRdBu` for coloring, `d3.scaleBand` for city categories, and a `d3.legendColor` legend. Data comes from a CSV file containing weather records, loaded with `d3.csv`, and the chart includes labeled axes and a title.

RRiya Mathur
66% match
Loading thumbnail…

Project ANalysis

This bar chart visualizes the average pollutant value for each country from a CSV dataset of world air quality. The chart uses D3.js v7 with an SVG rendering approach, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. The data is aggregated using `d3.rollup` with `d3.mean` to compute country-level averages. Bars change color from steelblue to orange on mouseover, providing interactive feedback to the viewer.

PPreethi Medepalli-91
65% 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
65% match