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.

Usage

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

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

<PeriodicTable />

Acknowledgements

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