◈ The Periodic Landscape

A place for every element.
A pattern in every direction.

Everything around you is made from atoms. These 118 elements are the different kinds of atom. Their order reveals how matter behaves. Select any element to explore its rotating 3D atom.

118 elements7 rows · periods18 columns · groups

Start with a small discovery

Three short, hands-on routes

Explore the elements

Readable HTML table · 118 elements

0
118 elements · select any tile to look inside? Data unavailable   ~ estimate   † prediction   ‡ method unspecified
Read left to right by atomic number. Columns bring together elements with related electron arrangements and often similar chemistry.

Groups run across the top; periods run down the left. Swipe or scroll sideways on smaller screens. Use search or the list for quick access.

↳ The two detached rows belong inside periods 6 and 7.57–71 fit between Ba (56) and Hf (72). 89–103 fit between Ra (88) and Rf (104). They are moved below to keep the table compact.

Family codes appear on tiles as well as in this legend. These are broad teaching categories; boundaries and some heavy-element classifications vary. “Halogen” and “noble gas” describe group placement; the heaviest members may behave differently.

One number gives an atom its identity.

The atomic number is the number of protons in the nucleus. Add a proton and you have a different element. In a neutral atom, the electron count equals the proton count.

Repeating patterns explain the shape.

Electron arrangements repeat as atomic number rises. This creates related columns. A new period usually adds a new outer shell; exceptions such as palladium show why the full electron configuration matters.

A landscape is a way to compare.

Higher columns mean a larger value of the chosen property, not a bigger or heavier atom. Each property has its own fixed linear scale. Missing data has a question mark, never a zero-height “measurement”.

Explore this atom in 3D

Drag to turn · scroll or pinch to zoom · tap a particle to inspect

An isotope keeps the same proton count but has a different neutron count. These are source-listed examples, not a complete isotope catalogue.

Go deeper · what this model leaves out

Protons and neutrons are called nucleons. The quark view shows their three valence quarks, which give their net quark content. Real nucleons also involve gluons and a sea of quark–antiquark pairs. Gluons carry the strong interaction. The spheres and lines are teaching symbols, not measured shapes or literal paths. Quarks cannot be pulled out as isolated particles. Electrons and quarks have no known smaller constituents.

Preparing the 3D atom…

Simplified teaching model. Moving circles help show the electron count and shell arrangement; real electrons do not follow these planetary paths. Sizes, spacing, tilted rings and animation speed are illustrative. Each level uses a different magnification; this is not a continuous scale zoom. Nucleus spheres count the protons and neutrons of the named isotope, but their positions and shapes are schematic. The quark view shows valence content, not a simulation of quantum motion. Colours distinguish particle types; they are not literal colours or quantum colour charges.

Inside a neutral atom

Protons carry positive charge; electrons carry negative charge. Neutrons, when present, have no electric charge. The neutron count depends on the isotope.

A real-world connection

Why it matters

Element reference ↗

About & data

This exhibit uses a bundled data snapshot retrieved on 22 October 2026. No live data service, account, paid API or API key is needed. It is a beginner's learning tool, not a reference for laboratory, medical or safety decisions.

What is actually plotted?

Evidence matters

NIST entries without brackets are labelled “Measured / evaluated”. NIST's square-bracketed entries are ~ estimated / semi-empirical; parentheses are † theoretical predictions. This follows NIST's explanation, including the very precise theoretical hydrogen value. PubChem's bulk radius and electronegativity table does not identify the method for every entry. These values carry ‡ tabulated; method unspecified, never a claim that every value was measured. Some may be estimates.

A missing value is shown as Data unavailable and a hatched ? marker at the common base. It is excluded from numeric comparisons. Each property's column extension is linear from zero to its fixed scale maximum above the same thin plinth; the plinth is not part of the value. The scales differ, so compare elements within one property, not heights across different properties.

Layout and atom models

Names, symbols and atomic numbers follow the 118-element IUPAC table, cross-checked against PubChem. Lanthanides (lanthanoids) La–Lu and actinides (actinoids) Ac–Lr are shown in detached 15-element rows, with range placeholders after Ba and Ra. This compact convention does not assign every detached element to group 3; alternative group-3 layouts exist.

Shell populations are summed from NIST neutral ground-state shell designations where available (1–108), and PubChem configurations otherwise. Configurations for 104–118 are labelled predicted in this teaching model. These are simplified representations, not measured electron orbits. A neutral atom has Z electrons; ions differ. No neutron count is calculated from atomic weight.

Rows and groups explain broad trends, with exceptions. Main-group family similarities are often linked to outer-shell electrons; transition and inner-transition elements require more detail. Category boundaries are a teaching convention. Uses are short educational summaries; an element, alloy, isotope and compound are explicitly distinguished. For detailed chemistry and applications see the Royal Society of Chemistry and each element's linked reference.

Inside the nucleus and nucleons

The deeper viewer lets you choose atom, nucleus, proton, neutron or electron. The NIST isotope catalogue supplies named isotope examples for Z=1–103. Z=104–118 use the bracketed mass-number examples in the IUPAC 4 May 2022 table. Retrieved 23 October 2026. This is a selected historical snapshot, not a complete or continually updated chart of nuclides. Examples are not claims of stability, prevalence or the latest longest-lived isotope. NIST estimated isotope masses are not plotted. For isotope A, neutron count is exactly A − Z; A is a mass number, not an average atomic weight.

A proton has valence content uud, a neutron udd. Up quarks carry +⅔e; down quarks −⅓e. Here e is the positive elementary charge. These three valence quarks are only a simple starting point: the quantum description also includes gluons and a sea of quark–antiquark pairs. Connecting lines indicate the strong interaction; they are not literal strings or gluon trajectories. Quarks are confined inside hadrons; the viewer does not depict free, removable quarks. Electrons are elementary leptons with no known quark constituents. “Up” and “down” are names, not directions. Sources: CERN: subatomic particles, Jefferson Lab: the quark sea, Swiss Academy of Sciences: quarks and charges.

Accessibility and implementation

The default is an HTML table of buttons. All facts, filters, guided routes and comparison also work in the searchable list, without WebGL. Three.js is loaded for the 3D atom and landscape views. The atom uses bundled OrbitControls 0.170.0 for one-finger/mouse rotation and two-finger/wheel zoom. The 2D atom diagram stays available if 3D cannot load. Animation pauses when the panel is closed; reduced-motion starts it paused. The nucleus uses an explicitly named isotope; no neutron count comes from rounding atomic weight. Nuclear positions, quark spheres and strong-interaction lines are schematic. If it fails or the context is lost, the HTML view remains available. Keyboard: Tab to controls or tiles; arrow keys move by table position; Enter or Space selects; Escape closes dialogs. At narrow widths the table scrolls sideways, and the list provides a compact alternative. System reduced-motion preference removes transitions.

Three.js 0.170.0 (MIT) is bundled locally. No CDN, fonts, images or network requests are required to run the exhibit after downloading it; external source links need internet. Serve the folder over HTTP for reliable module loading. All geometry and atom diagrams are procedural. No camera, location or other device permission is used.

Verification for this version

The original 28 scripted DOM interaction checks and the 118-element data checks passed. The 23 October update adds a freely rotatable 3D atom. All 118 atom models and additional scene/controller checks passed, including simulated mouse drag, wheel and touch/pinch events through official OrbitControls. The nucleus update also checks all 354 isotope examples against their bundled sources, exact nucleon counts, quark charges, cutaway, spread, drill-down, isotope switching and HTML/SVG fallback wiring. GPU drawing was stubbed in those tests; physical-device and rendered-browser testing are not claimed. Three.js scene tests verify height mapping, fixed positions, label spacing and fallback callbacks with a stub renderer. A rendered-browser visual check and real iPhone/Safari testing have not been completed because the preview browser was blocked by its URL security policy. See the source download for the full verification record.

Download & reproduce

Curated 118-element dataset (JSON) · NIST neutral-atom source snapshot · PubChem source snapshot · Named isotope examples (JSON) · NIST isotope snapshot · Three.js licence · Complete runnable source

Data access recipe: IUPAC FAIR Chemistry Cookbook. Educational summaries and UI written for this exhibit. The bundled snapshot does not update automatically.