Skip to main content
SimilarExport ZIP
100%

Chemical composition of Seawater

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

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.

AI-generated description

Standard mean chemical composition of sea water (S=35).

Data source: <br><br> Doe (1994) Handbook of methods for the analysis of the various parameters of the carbon dioxide system in sea water; version 2, A. G. Dickson & C. Goyet, eds., ORNL/CDIAC-74. <br> <a target="_blank" href="https://cdiac.ess-dive.lbl.gov/ftp/cdiac74/chapter5.pdf">https://cdiac.ess-dive.lbl.gov/ftp/cdiac74/chapter5.pdf</a> <br> <br> Original Chart: https://vizhub.com/curran/a44b38541b6e47a4afdd2dfe67a302c5

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
69% 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
68% match
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
66% 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
60% match
Loading thumbnail…

Line Chart

This line chart visualizes global mean sea level rise from 1880 to 2013, with monthly data points plotted over time. The visualization uses D3.js v6 to load a CSV file, parse dates with `d3.timeParse`, and construct scales using `d3.scaleTime` and `d3.scaleLinear`. A `d3.line` generator creates the path, which is rendered as an SVG with axes generated by `d3.axisBottom` and `d3.axisLeft`. The chart displays the overall upward trend in sea levels across the 133-year period.

Ddonaldminer
59% match
Loading thumbnail…

Untitled

This radial bar chart displays the distribution of sea surface temperatures across different climate classes, with each colored band extending outward from a central donut. The chart uses D3.js v6 with SVG rendering and React, loading CSV data from a GitHub gist. The code employs d3.scaleBand for angular positioning and d3.scaleRadial for radius values, while d3.arc constructs the annular bars with padded gaps. Labels are rotated and positioned around the perimeter, with text anchors adjusted to maintain readability. The inner radius is fixed at 90, and the outer radius scales up to the maximum data value of 39,999.

Yyungchiau
56% match
Loading thumbnail…

Bar Chart

This example shows a bar chart with six labeled bars (a–f) of varying heights, rendered as an SVG in a React environment using D3 v3. The code defines a band scale for the horizontal axis, a linear scale for the vertical axis, and draws axes with tick marks. It uses D3’s selection and data-join pattern (`selectAll`, `data`, `enter`) to create a `rect` for each data point, with bars filled in steel blue. The data is hardcoded in the script, with margins and padding configured around the 500-by-500 pixel canvas.

Ssojung114
55% match
Loading thumbnail…

Bar Graph Vizualization

This bar chart visualizes the distribution of CSS levels across a dataset of colors, showing how many colors correspond to each specification level. The chart uses a vertical bar layout with hover effects that change bar color from steelblue to orange. Built with D3 v7, the visualization loads CSV data from a GitHub gist, aggregates counts with `d3.rollup`, and renders the chart as an SVG using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axis labels and rotated x-axis tick text clarify the categorical and numeric values.

Ssdarsi2404@gmail.com
54% match