0.1.4 โข Published 1 year ago
sveriodic-table v0.1.4
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.
๐จ โ Installation
npm install --dev sveriodic-tables
๐ โ Usage
Import the PeriodicTable
component and pass it some heatmap values:
<script>
import PeriodicTable from 'sveriodic-tables'
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 // 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 fromBowserinator/Periodic-Table-JSON
under Creative Commons license androbertwb/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.