elementari

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

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

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

Changelog

v0.2.3

15 January 2024

• Add props and control sliders for ambient and directional lighting to Structure #45
• Add SymmetryCard.svelte #42
• add /molecule demo page with initial examples water, methane, benzene 71ce70b
• fix find_image_atoms() for non-cuboid lattices 9138582
• add lib/structure/bonding.ts with max_dist and nearest_neighbor bonding strategies f707cf2
• add lib/math.ts 58cf060
• Structure add fullscreen button + improve default initial camera_position bda2e5f
• fix black text color on transparent ElementTiles 3ace071
• add src/emmet_pydantic_to_ts.py to auto-convert emmet pydantic models to typescript types e4bcc92
• add /api page to inspect AWS Open Data schema 83bc866
• add similar structures and robocrys sections to mp-[slug] page d4dce4b
• extract (demos)/periodic-table/+page.svelte from landing page, change landing +page.svelte to +page.md cd32144
• fix duplicate bonds in max_dist and nearest_neighbor functions 14027e3
• StructureScene add prop fov: number | undefined = undefined 770ffbf
• rename prop site_labels -> show_site_labels, default to true + fix site site_labels rendering ff0336a
• add largest MP structure mp-1204603 to demo 1b0bc6d
• bump threlte to v6 official release 45e3dc2
• periodic-table.test.ts don't iterate over full table, do random subset for speed be68b6a
• fetch_zipped() only console.error, not raise if !response.ok f46cee0