Abundance of Rare Elements

100%

Abundance of Rare Elements

✓ Published0🌍 Public

Last edited Apr 3, 2020

Created on Mar 30, 2020

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.

AI-generated description

Abundance of some of the rarest Elements in the Earth's crust.

Data sources:

Haynes, William M. (Ed.) (2017): CRC handbook of chemistry and physics. A ready-reference book of chemical and physical data. 97th edition. Boca Raton, London, New York: CRC Press. <br> <a target="_blank" href="http://www.hbcponline.com/faces/periodic/PeriodicTable.xhtml">http://www.hbcponline.com/faces/periodic/PeriodicTable.xhtml</a>

Fyfe, W.S. (1974): Geochemistry. Oxford University Press.

Original Chart: https://vizhub.com/curran/a44b38541b6e47a4afdd2dfe67a302c5

MIT Licensed

Similar vizzes

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

64% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays a horizontal bar chart ranking the top 10 most populous countries based on 1990 nuclear energy data. The chart uses SVG rendering within a React component, leveraging d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. Data is loaded asynchronously via d3.csv from a GitHub gist, with the first nine rows selected for display. The code manually constructs gridlines, tick labels, and rectangles rather than using d3.axisBottom or d3.axisLeft, demonstrating explicit mark and channel creation.

BBajiSharifPatan@my.unt.edu

64% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization presents a horizontal bar chart of the top 10 most populous countries based on their nuclear energy usage in 1980, sourced from a CSV file. The chart uses D3 scales (scaleBand and scaleLinear) to map country names and usage values to SVG rectangles. React manages the component state and rendering, while D3’s csv function loads and parses the data. The SVG output includes custom grid lines, tick labels, and styled marks.

BBajiSharifPatan@my.unt.edu

62% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 10 most populous countries for 2019, using horizontal bars to encode population size. The visualization is built with React and D3 v5, where React manages the component state and rendering of SVG elements while D3’s `csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. Axes are manually rendered as SVG groups with tick marks, and the data originates from a GitHub-hosted CSV file.

Ppreethamkesa

62% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

Ppreethamkesa

62% match

Loading thumbnail…

Untitled

This stacked bar chart displays species abundance across multiple groups, with each bar segment representing a different soil condition. The chart uses D3 v4's `d3.stack()` to generate stacked series from CSV data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.schemeSet2` for categorical colors. Hovering over any section highlights all bars from that subgroup by adjusting opacity using `d3.selectAll` and class-based selectors, while the graph renders as SVG with an ordinal color scale.

AAlice Anselmi

62% match

Loading thumbnail…

Nutrients

This radial stacked bar chart displays the distribution of sample counts across seven age groups for four data quality categories. The visualization uses a circular layout with age groups placed around the circumference, while stacked segments radiate outward to represent proportional counts within each category. The code leverages d3.scaleBand for angular positioning, a custom d3.scaleRadial() for radial scaling, and d3.arc() to generate the annular segments. Data comes from a CSV file, and the rendering is done via SVG elements.

MMbrownshoes

62% match

Loading thumbnail…

D3 Bar Chart (Refactoring React)

This visualization presents a horizontal bar chart of the ten most populous countries in 2020, using data from the UN Population dataset. It showcases a refactoring pattern where D3’s scale functions and tick generation are used within React components to render SVG elements. The code demonstrates using `d3.scaleBand` and `d3.scaleLinear` for axes and bar positioning, while custom React components like `AxisBottom`, `AxisLeft`, and `Marks` encapsulate SVG line, text, and rect elements. The rendering is pure SVG, dynamically generated from a CSV file via `d3.csv`.

ZZoe Ferencova

62% match