Periodic Table

Interactive Periodic Table component written in Svelte.

Heatmap

Below a screenshot demonstrating the periodicity of elemental properties, i.e. why the periodic table is called periodic. In this case its showing recurring bumps and valleys in the first ionization energy as a function of atomic number.

Element Details Pages

The details page for gold.

2022-08-26-element-detail-page-screen-recording.mp4

Usage

Copy the src/lib/ folder into your Svelte project and import the PeriodicTable component:

<script>
  import PeriodicTable from 'src/lib/PeriodicTable.svelte'
</script>

<PeriodicTable />

Acknowledgements

• Element properties in src/lib/element-data.yml were combined from Bowserinator/Periodic-Table-JSON under Creative Commons license and robertwb/Periodic Table of Elements.csv (unlicensed).
• Thanks to Images of Elements for providing photos of elemental crystals and glowing excited gases.
• Thanks to @kadinzhang and their Periodicity project [code] for the idea to display animated Bohr model atoms and inset a scatter plot into the periodic table to visualize the periodic nature of elemental properties.