Science Lab · Chemistry

The Elements

All 118 elements, and the atom inside each one. Pick any element to spin its atom in 3-D, first as a simple shell model and then as the real orbital clouds of quantum mechanics. Read its numbers, see its spectral fingerprint, compare two elements, take the quiz, print a card for the wall, and listen to the elements turned into sound.

Picture

The periodic table

Click or tap an element to see its atom. With an element selected, the arrow keys move across the table. La and Ac sit in group 3 here, as on the Chemistry Ladder; some tables put Lu and Lr there instead.

All about it

Compare two elements

Element quiz

Ten questions: find elements on the table from their names or from clues, and name their group, block and family. Pick a level and press Start a round.

Element sounds

These are artistic mappings: atoms don’t make sounds. Each mode turns real numbers about the element into tones you can hear.

Spectrum chord. Every visible line sounds at once. A line’s light wave vibrates hundreds of trillions of times a second; dividing by 240 moves it exactly 40 octaves down, into the range of a voice, and keeps the musical spacing between the lines. Brighter lines are louder. This is the idea W. Walker Smith presented to the American Chemical Society in 2023, and Jill Linz’s Atom Music at Skidmore College works the same way.

Spectrum arpeggio. The same tones one at a time, from red (lowest) to violet (highest), each plucked and dying away like a string, as in Linz’s atom tones and the melodies Smith drew from the lines.

Electron melody. One piano note for each subshell, in the order electrons fill them. The shell number picks the note of the scale: shell 1 is do, shell 2 is re, up to shell 7, ti. A subshell with more electrons is a longer note. The idea comes from Sam Zhang’s 2006 article “Teaching Electron Configuration the Musical Way.”

The first musical table. In 1865 John Newlands noticed that, listed by weight, every eighth element seemed to repeat the first, like the eighth note of a musical octave. His “law of octaves” was laughed at, but it was an early glimpse of the periodic law. Sweep a group to hear elements of one family one after another.

Printable cards

A one-page card for the element you’ve picked, or a full color periodic table for the wall. Both print sharp at any size.

The wall table prints sideways (landscape). For a bigger poster, print it at “fit to page” on larger paper.

What you’re seeing

The shell model is the picture most of us first learn: a nucleus of protons (red) and neutrons (gray) in the middle, and electrons (blue) on rings around it. The number on each ring is how many electrons that shell holds. It is good for counting, and it shows why the table has rows: a new row starts each time a new shell starts to fill. But it is not to scale. If the atom were as wide as a football stadium, the nucleus would be a pea in the middle.

Electrons don’t orbit like planets. An electron has no path at all. Quantum mechanics only tells us how likely we are to find it in each spot, and that gives a fuzzy cloud called an orbital. In the Orbitals picture, each dot is a place the electron could be found: where the dots are thick, it is often there. Two colors mark the two signs of the electron’s wave, which matter when atoms bond.

The shapes have names. An s orbital is a ball. Each p orbital is a pair of lobes along one axis (px, py, pz). The five d orbitals are mostly four-leaf clovers, and the seven f orbitals are more lobed still. Choose Side by side to see one subshell’s orbitals spread out, and tap any cloud to read its name and how many electrons it holds.

A full subshell is round. Put all three p orbitals together, or all five d orbitals, and the lobes fill each other in to make a sphere. That is why All together looks like nested fuzzy balls for most atoms: atoms really are close to round.

The science

Filling order

Electrons fill subshells from the lowest energy up. A handy rule, the Madelung rule (or Aufbau order), sorts the subshells by n + l, and by n when there’s a tie:

1s, 2s, 2p, 3s, 3p, 4s, 3d, 4p, 5s, 4d, 5p, 6s, 4f, 5d, 6p, 7s, 5f, 6d, 7p

Here n is the shell number and l is 0, 1, 2, 3 for s, p, d, f. About twenty elements break the rule a little. Chromium is [Ar] 3d5 4s1, not 3d4 4s2, and copper is [Ar] 3d10 4s1. The page uses each element’s measured configuration and marks the exceptions.

Where the shapes come from

For hydrogen, the Schrödinger equation can be solved exactly. Each orbital is a radial part times an angular part:

ψnlm(r, θ, φ) = Rnl(r) · Ylm(θ, φ)

The angular part, a real spherical harmonic, gives the shape: the s, p, d and f lobes. The radial part sets the size and adds n − l − 1 round nodes, shells where the electron is never found. The chance of finding the electron near a point is |ψ|², and the dots are drawn at random with exactly that chance.

Sizes, roughly

In a bigger atom each electron is pulled by the nucleus but pushed by the other electrons, so it feels a smaller effective nuclear charge. In 1930 John Slater gave simple rules to estimate it. For iron’s 4s electrons:

Zeff = 26 − (1 × 0.35 + 14 × 0.85 + 10 × 1.00) = 3.75

Each orbital here uses a hydrogen-like shape, sized so its average radius matches Slater’s estimate. That is an approximation: real many-electron orbitals are close to these shapes, but their sizes differ somewhat, and heavy atoms also feel effects from relativity.

Spectral fingerprints

When an atom’s electron drops from a higher energy level to a lower one, the atom gives off light of one exact color. Each element has its own set of levels, so each has its own pattern of bright lines, as personal as a fingerprint. Astronomers read these lines in starlight to learn what stars are made of; helium was found in the Sun’s spectrum in 1868, before anyone found it on Earth.

Ephoton = Eupper − Elower = hc / λ

Try this

Watch a row grow. Pick sodium and press Next until argon. Each step adds a proton and an electron, and the third shell fills from 1 to 8. Then go on to potassium, where a fourth ring appears.
Find the hidden shapes. Pick carbon, choose Orbitals and Side by side, and look at the 2p subshell: two dumbbells at right angles. Now try neon, where all three are there, and then All together: they make a ball.
Fingerprints side by side. Compare sodium with neon, or iron with copper. Sodium’s brightest lines by far are a close yellow-orange pair near 589 nm, the color of old streetlights. Neon’s many red and orange lines are the glow of a neon sign.
Melt the table. Color by State at a temperature and slide from 0 K up. Mercury and bromine are the liquids at room temperature; near 30 °C cesium and gallium join them (gallium melts in your hand); tungsten, the metal with the highest melting point, stays solid until 3,695 K.
Hear a family. In Element sounds, choose Electron melody and sweep a group: each element’s last notes climb one step as you go down, because each row adds a shell.

Learn more

How it works

The orbitals. For each occupied subshell the page computes Slater’s effective charge, then draws points from the hydrogen-like |ψ|² for every occupied orbital: the distance from the radial probability r²R², the direction from |Ylm|² by accepting or rejecting random directions. Each electron gets the same number of points, so a pair of electrons makes a denser cloud. The dots are drawn with the browser’s WebGL, or on a plain canvas if WebGL isn’t available.

The nucleus uses the most common isotope in nature, or the longest-lived one for elements with none. Its protons and neutrons are packed as balls in a sphere whose volume grows with the number of particles, as a real nucleus does.

Colors of light. Each spectral line is colored from the CIE 1931 color-matching functions (in the fit by Wyman, Sloan and Shirley) converted to screen colors. Pure spectral colors are more vivid than any screen can show, so these are the nearest a screen can do, dimmed toward the ends of the visible range where the eye is less sensitive.

The sounds use the site’s own small synthesizer, with nothing recorded. A line at 656.3 nm (hydrogen’s red line) has a frequency of 456.7 trillion hertz; divided by 240 that is 415.3 Hz, close to the G♯ above middle C.

How it was checked

TestResult
All 22 radial functions up to n = 7, l = 3, integrated (∫R²r² dr), and their average radius1 within 10−12; ⟨r⟩ as the formula says
All 16 real spherical harmonics, s to f, integrated over the sphere against each other1 for the same one, 0 for two different ones, within 10−5
Nodes: sign changes along r, from pole to pole, and around the spheren − l − 1, l − |m| and 2|m|, every time
40,000 random points for a 2pz electron: average distance, and the share of ⟨z²⟩ in ⟨r²⟩within 2% of ⟨r⟩; 0.60 (exactly 3/5 expected)
Electrons in each element’s configuration and shells, all 118add up to Z every time
Configurations the Madelung order gets wrongexactly the 20 marked exceptions: Cr, Cu, Nb, Mo, Ru, Rh, Pd, Ag, La, Ce, Gd, Pt, Au, Ac, Th, Pa, U, Np, Cm, Lr
Slater’s rules, textbook examples (N 2p, Zn 3d and 4s)3.90, 8.85, 4.35
Wavelength colors: 405, 450, 530, 580 and 650 nmviolet, blue, green, yellow-orange, red
Sounds: hydrogen’s red line; every chord, arpeggio and melody for all 118 elements415.3 Hz (G♯4); chords never too loud, arpeggios climb from red to violet, one note per subshell

Sources

  • Configurations. NIST Atomic Spectra Database, ground levels of the neutral atoms (exceptions to Madelung filling as measured; Rf onward predicted).
  • Crust. CRC Handbook of Chemistry and Physics, "Abundance of elements in the earth's crust and in the sea", via Wikipedia's "Abundances of the elements (data page)", cross-checked with a second listed source.
  • Discovery. Element articles and "Timeline of chemical element discoveries" on Wikipedia, with IUPAC/IUPAP Joint Working Party reports for the superheavy elements.
  • En. Revised Pauling electronegativities (A. L. Allred, 1961) as tabulated in the CRC Handbook; same values as the site's Chemistry Ladder.
  • Half lives. Longest-lived isotopes: Wikipedia, "List of elements by stability of isotopes" (NUBASE2020 values); seaborgium and hassium from "Isotopes of seaborgium" and "Isotopes of hassium"; half-lives of naturally radioactive isotopes from Wikipedia, "List of nuclides".
  • Ie1. NIST Atomic Spectra Database, "Ground levels and ionization energies for the neutral atoms" (physics.nist.gov/cgi-bin/ASD/ie.pl), fetched 2026-10-20.
  • Isotopes. NIST Atomic Weights and Isotopic Compositions (IUPAC representative isotopic compositions), physics.nist.gov.
  • Physical. Melting point, boiling point, density and state: Wikipedia, "List of chemical elements" (values from the CRC Handbook of Chemistry and Physics and the element articles), cross-checked against the CRC rows of Wikipedia's data pages for melting points, boiling points and densities; differences over 3% (5% for density) are noted.
  • Radius. B. Cordero et al., "Covalent radii revisited", Dalton Trans. 2008, 2832; same table as the site's Chemistry Ladder.
  • Spectra. NIST Handbook of Basic Atomic Spectroscopic Data (J. E. Sansonetti and W. C. Martin, NIST), strong-line tables, neutral-atom (I) lines 380–750 nm in air, with NIST's relative intensities; spot-checked against the NIST pages.
  • Text. Names, uses, facts and safety notes written for the Teddy Rook Book from the element articles on Wikipedia and USGS mineral commodity summaries; reviewed for accuracy.
  • Weights. IUPAC/CIAAW standard atomic weights 2021 (Prohaska et al., Pure Appl. Chem. 94, 573, 2022), as listed on iupac.qmul.ac.uk/AtWt; intervals shown as conventional values. Mass numbers in brackets: longest-lived isotope (see halfLives).
  • J. C. Slater, “Atomic Shielding Constants,” Physical Review 36, 57 (1930): effective nuclear charges.
  • OpenStax, Chemistry 2e: 6.3 Development of Quantum Theory and 6.4 Electron Configurations.
  • C. Wyman, P.-P. Sloan and P. Shirley, “Simple Analytic Approximations to the CIE XYZ Color Matching Functions,” Journal of Computer Graphics Techniques 2, 1 (2013).
  • W. Walker Smith, sonified periodic table presented at ACS Spring 2023: “Elemental music” (phys.org, March 2023).
  • Jill Linz and Christian Howat, Skidmore College, Atom Music and Atom Tones: “Making Music from Atoms” (Physics, 2023) and “Composing atom music” (Physics Today, 2019).
  • Sam Zhang, “Teaching Electron Configuration the Musical Way,” International Journal of Engineering Education 22, 951 (2006).
  • John Newlands’ law of octaves (1865): John Newlands on Wikipedia.
@teddyrookbook GitHub