Skip to content

Interactive browser visualizations for materials science: periodic tables, 3d crystal structures, Bohr atoms, nuclei, heatmaps, scatter plots.

License

Notifications You must be signed in to change notification settings

janosh/elementari

Repository files navigation

Logo
Elementari

Tests GH Pages pre-commit.ci status Open in StackBlitz

elementari is a toolkit for building interactive web UIs for materials science: periodic tables, 3d crystal structures (and molecules, though needs some improvements!), 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! 🙏

Screenshot of landing page

📦   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.

Screenshot of periodic table heatmap

⚛️   3D Structure Viewer

3D Structure Viewer

⚛️   Element Details Pages

The details page for gold.

2022-08-26-element-detail-page-screen-recording.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
Statements Branches Lines

🙏   Acknowledgements

This project would not have been possible as a one-person side project without many fine open-source projects. 🙏 To name just a few:

3D graphics 2D graphics Docs Bundler Testing
three.js d3 mdsvex vite playwright
threlte sharp rehype sveltekit vitest