Elementari
elementari
is a toolkit for building interactive web UIs for materials science: periodic tables, 3d crystal structures (molecules coming soon!), Bohr atoms, nuclei, heatmaps, scatter plots. It's under active development and not yet ready for production use but we appreciate any feedback from beta testers! 🙏
📦 Heatmap
This screenshot demonstrates the periodicity of elemental properties (i.e. why 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.
⚛️ 3D Structure Viewer
⚛️ 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