Periodic Table Explorer
A table you can filter, sort and colour by any property.
BeginnerWeb appEducation6–14hAI-buildable 5/5no setup
The periodic table as a real data-exploration tool: colour elements by any property, filter by category or state at a given temperature, and drill into any element. The layout itself is the challenge — the table's shape is irregular and doesn't fit a simple grid.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- The full table renders in its correct irregular layout
- Elements colour by a selectable property
- A temperature slider recolours elements by state of matter
- Clicking an element opens a detail panel
- Filter by category, block or period
- The lanthanides and actinides are placed correctly
- A legend explains the current colour mapping
The interesting part
- Laying out an irregular table with gaps and two detached rows
- Colour scales that work for both categorical and continuous properties
- Keeping the table legible on a phone
Once it works
- Add electron configuration diagrams
- Add a property comparison chart across a period or group
- Add a quiz mode over element symbols
Suggested stack
reacttypescripttailwind