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
:
click
mouseenter
mouseleave
keyup
keydown
Each event is a Svelte dispatch
event with the following detail
payload:
detail: {
element: ChemicalElement
active: boolean
dom_event: Event
}
See DispatchPayload
and PeriodicTableEvents
in src/lib/index.ts
🧪 Coverage
🙏 Acknowledgements