matterviz Svelte Themes

Matterviz

Interactive browser visualizations for materials science: periodic tables, 3d crystal structures, MD trajectories, heatmaps, scatter plots, histograms.

Logo MatterViz

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

πŸ”Œ   MatterViz VSCode Extension

Visualize crystal structures, molecules, and molecular dynamics trajectories directly in VSCode. Features include:

  • Native support for common file formats (CIF, POSCAR, XYZ, TRAJ, HDF5, etc.)
  • Context menu (right click > "Render with MatterViz") and keyboard shortcuts (ctrl+shift+v on Windows, cmd+shift+v on Mac) for quick access
  • Custom viewer for MD trajectories/geometry optimizations
  • Extensive customization options via VSCode settings - see Configuration Guide for examples

πŸ—ΊοΈ   Roadmap

πŸ“¦   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 matterviz

πŸ“™   Usage

Periodic Table

<script>
  import { PeriodicTable } from 'matterviz'

  const heatmap_values = { H: 10, He: 4, Li: 8, Fe: 3, O: 24 }
</script>

<PeriodicTable {heatmap_values} />

Structure

<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" />

Composition

<script>
  import { Composition } from 'matterviz'
  // modes can be 'pie' (default) | 'bubble' | 'bar'
</script>

<Composition composition="LiFePO4" mode="pie" />

Trajectory

<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" />

πŸ§ͺ   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