elementari

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:

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

• Element properties in src/lib/element-data.ts were combined from Bowserinator/Periodic-Table-JSON under Creative Commons license and robertwb/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.
• Big thanks to all sources of element images. See fetch-elem-images.ts and static/elements.
• Thanks to @ixxie (shenhav.fyi) for a lot of great suggestions, UX ideas, helping me learn threlte and contributing the Bond.svelte component.

Changelog

v0.2.0

8 July 2023

• Add Lattice.svelte #41
• Show cylinder between active and hovered sites #40
• Fix structure controls for atom_radius, same_size_atoms #38
• Add Bond component #37
• Split /src/lib into submodules #36
• Add materials detail pages #35
• Highlight active and hovered sites in Structure #34
• Structure tooltips when hovering atoms #33
• get started with testing Structure.svelte and structure.ts #32
• Structure hide buttons on desktop until hover #31
• Structure grid example #30
• Structure allow selecting from different element color schemes + override individual elements #29
• add function find_image_atoms() used in StructureScene to draw images of atoms 3098d6c
• Structure add prop show_image_atoms, expand MaterialCard to show more attrs, mp-[slug] pages sync material ID with url f43dd31
• add Structure control bond_color + make all Structure CSS into variables a79ff00
• make initial camera_position responsive to crystal size 5b1e82a
• use InstancedMesh from @threlte/extras for more efficient drawing of crystal sites 142effb
• add API explorer page (under /api) 2a7c60e
• display distance between active and hovered site in hover tooltip 9e1af46
• add props c586225
• drop valid Pymatgen structures as JSON files on Structure.svelte to display them 7127b18
• PeriodicTable add prop color_overrides 1042bf2
• add copy buttons to all code blocks 7f3fb5c
• fix landing page layout broken in last commit 6f675dd