elementari Svelte Themes

Elementari

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

Logo
Elementari

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! ๐Ÿ™

๐Ÿ“ฆ   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:

  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

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

Top categories

Loading Svelte Themes