elementari

Periodic Table

Interactive Periodic Table component written in Svelte. With scatter plot showing periodicity of elemental properties and Bohr atoms showing electron shell configuration of different elements.

📦   Heatmap

Below a screenshot demonstrating the periodicity of elemental properties, the reason it's called periodic table. In this case, you're seeing recurring bumps and valleys in the first ionization energy as a function of atomic number.

⚛️   Element Details Pages

The details page for gold.

https://user-images.githubusercontent.com/30958850/186975855-8e0d94f9-e4e3-47a2-9354-9c012b37307c.mp4

🔨   Installation

npm install --dev elementari

📙   Usage

Import the PeriodicTable component and pass it some heatmap values:

<script>
  import PeriodicTable from 'elementari'

  const heatmap_values = { H: 10, He: 4, Li: 8, Fe: 3, O: 24 }
</script>

<PeriodicTable {heatmap_values} />

🎬   Events

PeriodicTable.svelte forwards the following events from each ElementTile:

1. click
2. mouseenter
3. mouseleave
4. keyup
5. keydown

Each event is a Svelte dispatch event with the following detail payload:

detail: {
  element: ChemicalElement
  active: boolean // whether the event target tile is currently active
  dom_event: Event // the DOM event that triggered the Svelte dispatch
}

See DispatchPayload and PeriodicTableEvents in src/lib/index.ts

🧪   Coverage

Statements	Branches	Lines

🙏   Acknowledgements

• Element properties in src/lib/element-data.ts 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.
• Big thanks to all sources of element images. See fetch-elem-images.ts and static/elements.