matterviz
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! π
Visualize crystal structures, molecules, and molecular dynamics trajectories directly in VSCode. Features include:
pymatviz
readme for details.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.
The details page for gold.
npm install --dev matterviz
<script>
import { PeriodicTable } from 'matterviz'
const heatmap_values = { H: 10, He: 4, Li: 8, Fe: 3, O: 24 }
</script>
<PeriodicTable {heatmap_values} />
<script>
import { Structure } from 'matterviz'
const data_url = '/structures/TiO2.cif'
// supports .cif, .poscar, .xyz/.extxyz, pymatgen JSON, OPTIMADE JSON, .gz
</script>
<Structure {data_url} style="width: 500px; aspect-ratio: 1" />
<script>
import { Composition } from 'matterviz'
// modes can be 'pie' (default) | 'bubble' | 'bar'
</script>
<Composition composition="LiFePO4" mode="pie" />
<script>
import { Trajectory } from 'matterviz'
// supports .xyz/.extxyz, .traj, .hdf5, .npz, .pkl, .dat, .gz, .zip, .bz2, .xz
</script>
<Trajectory data_url="/traj/ase-md.xyz" auto_play fps={10} style="max-height: 700px" />
Statements | Branches | Lines |
---|---|---|
src/lib/element-data.ts
were combined from Bowserinator/Periodic-Table-JSON
under Creative Commons license and robertwb/Periodic Table of Elements.csv
(unlicensed).fetch-elem-images.ts
and static/elements
.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 |