Elementargeist

@Elementargeist·7 public vizzes

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.

Apr 3, 2020

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.

Apr 1, 2020

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.

Apr 1, 2020

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economic classifications using an orthographic projection that auto-rotates over time. Users can click color legend items to filter countries by economy type, dimming non-matching regions while highlighting selected ones. The visualization uses d3.geoPath for map rendering, d3.zoom for pan and zoom interactions, and d3.forceSimulation-style timers for rotation. Geographic data comes from world-atlas TopoJSON files loaded via topojson.feature, with economy data merged from TSV metadata. Hover tooltips show country names and values through SVG title elements.

Mar 31, 2020

Loading thumbnail…

The Blue Planet

The Blue Planet presents an auto-rotating orthographic globe displaying world country boundaries. A starfield background and blue sphere create a space-themed perspective, with countries colored via a green ordinal scale. The visualization loads geographic data from a TopoJSON file and merges it with TSV metadata. D3’s `geoOrthographic` projection, `geoPath`, and `d3.timer` drive the continuous rotation, while zoom interactions and hover effects highlight individual nations.

Mar 30, 2020

Loading thumbnail…

Population Bar Chart

This chart displays the 20 most populous countries in 2020 as horizontal bars, with country names on the y-axis and population values scaled along the x-axis. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` for the axes and renders SVG rectangles. Population figures come from the United Nations’ 2019 World Population Prospects, formatted with d3’s `format` to show billions or millions. Native SVG `<title>` elements provide tooltips on each bar.

Mar 29, 2020

Loading thumbnail…

Selected Numbers

This visualization displays seven notable mathematical constants—such as π, e, and √2—as circles positioned along a linear scale representing their numeric values. The chart uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, with dashed grid lines extending from each tick. Data is loaded from a CSV file containing names and numeric properties, and the circles are styled in deeppink with a titled header. The design builds on a prior bar chart example, replacing bars with circles to emphasize the proportional differences among the constants.

Mar 28, 2020