{"id":28893547,"url":"https://github.com/janosh/matterviz","last_synced_at":"2026-06-15T22:00:52.594Z","repository":{"id":41443085,"uuid":"498793280","full_name":"janosh/matterviz","owner":"janosh","description":"Interactive browser visualizations for materials science: crystal structures/molecules, trajectories, convex hulls, phase diagrams, Fermi surfaces, bands+DOS, Brillouin zones, etc.","archived":false,"fork":false,"pushed_at":"2026-06-09T16:07:27.000Z","size":48082,"stargazers_count":342,"open_issues_count":0,"forks_count":34,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-06-09T18:06:46.169Z","etag":null,"topics":["chemistry","d3","data-viz","materials-science","plotting","svelte","threejs"],"latest_commit_sha":null,"homepage":"https://janosh.github.io/matterviz","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/janosh.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":"contributing.md","funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":"citation.cff","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-06-01T15:29:36.000Z","updated_at":"2026-06-09T16:17:06.000Z","dependencies_parsed_at":"2023-10-11T01:55:53.728Z","dependency_job_id":"73bac784-36f4-41ab-9a7a-30fdf4460d2d","html_url":"https://github.com/janosh/matterviz","commit_stats":{"total_commits":180,"total_committers":2,"mean_commits":90.0,"dds":0.01666666666666672,"last_synced_commit":"54143679f5e4f138f9ccdd33f1999c0ca6d148d0"},"previous_names":["janosh/matterviz","janosh/periodic-table"],"tags_count":40,"template":false,"template_full_name":null,"purl":"pkg:github/janosh/matterviz","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janosh%2Fmatterviz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janosh%2Fmatterviz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janosh%2Fmatterviz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janosh%2Fmatterviz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/janosh","download_url":"https://codeload.github.com/janosh/matterviz/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janosh%2Fmatterviz/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34379991,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chemistry","d3","data-viz","materials-science","plotting","svelte","threejs"],"created_at":"2025-06-21T03:02:52.238Z","updated_at":"2026-06-15T22:00:52.586Z","avatar_url":"https://github.com/janosh.png","language":"TypeScript","funding_links":[],"categories":["Visualization","TypeScript","Sites"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003csub\u003e\u003cimg src=\"static/favicon.svg\" alt=\"Logo\" width=\"40px\"\u003e\u003c/sub\u003e MatterViz\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003e\n\n[![Tests](https://github.com/janosh/matterviz/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/matterviz/actions/workflows/test.yml)\n[![GH Pages](https://github.com/janosh/matterviz/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/janosh/matterviz/actions/workflows/gh-pages.yml)\n[![VSCode Extension](https://img.shields.io/badge/Install%20VSCode-Extension-blue?logo=typescript\u0026logoColor=white)](https://marketplace.visualstudio.com/items?itemName=janosh.matterviz)\n[![Docs](https://img.shields.io/badge/Read-the%20docs-blue?logo=googledocs\u0026logoColor=white)](https://matterviz.janosh.dev)\n[![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz\u0026logoColor=white)](https://stackblitz.com/github/janosh/matterviz)\n[![Zenodo DOI](https://zenodo.org/badge/498793280.svg)](https://doi.org/10.5281/zenodo.17094509)\n\n\u003c/h4\u003e\n\n`matterviz` is a toolkit for building interactive web UIs for materials science: 3D crystal structures, molecules, MD/relaxation trajectories, periodic tables, phase diagrams, convex hulls, spectral data (bands, DOS, XRD), heatmaps, and scatter plots.\n\n## 🔌 \u0026thinsp; [MatterViz VSCode Extension]\n\nVisualize crystal structures, molecules, and molecular dynamics trajectories [directly in VSCode][MatterViz VSCode Extension]. Features include:\n\n- Native support for common file formats (CIF, POSCAR, XYZ, TRAJ, HDF5, etc.)\n- Context menu (right click \u003e \"Render with MatterViz\") and keyboard shortcuts (\u003ckbd\u003ectrl\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003ev\u003c/kbd\u003e on Windows, \u003ckbd\u003ecmd\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003ev\u003c/kbd\u003e on Mac) for quick access\n- Custom viewer for MD trajectories/geometry optimizations\n- **Extensive customization options** via VSCode settings - see [Configuration Guide](extensions/vscode/readme.md#️-configuration--customization) for examples\n\n[matterviz vscode extension]: https://marketplace.visualstudio.com/items?itemName=janosh.matterviz\n\n## 🗺️ \u0026thinsp; Roadmap\n\n- **✅ MatterViz Web**: [matterviz.janosh.dev](https://matterviz.janosh.dev)\n- **✅ MatterViz VSCode/Cursor**: [marketplace.visualstudio.com/items?itemName=janosh.matterviz](https://marketplace.visualstudio.com/items?itemName=janosh.matterviz)\n- **✅ pymatviz**: [Jupyter](https://jupyter.org)/[Marimo](https://marimo.io) widgets for Python notebooks. See [`pymatviz` readme](https://github.com/janosh/pymatviz/blob/main/readme.md#interactive-widgets).\n\n![Landing page showing 3D structure viewers](https://github.com/janosh/matterviz/releases/download/v0.2.2/2026-01-23-landing-page.webp)\n\n## ⚛️ \u0026thinsp; 3D Structure Viewer\n\nInteractively visualize crystal structures and molecules. Supports drag-and-drop file loading for CIF, POSCAR, XYZ/EXTXYZ, pymatgen JSON, OPTIMADE JSON, and compressed formats.\n\n![3D Structure Viewer](https://github.com/janosh/matterviz/releases/download/v0.2.2/2026-01-23-structure-viewer.webp)\n\n## 📊 \u0026thinsp; Periodic Table Heatmap\n\nVisualize elemental properties across the periodic table. The inset scatter plot shows how properties vary with atomic number - here demonstrating the periodicity of first ionization energy.\n\n![Periodic table heatmap](https://github.com/janosh/matterviz/releases/download/v0.2.2/2026-01-23-heatmap.webp)\n\n## 🔬 \u0026thinsp; Element Details Pages\n\nRich element pages with physical properties, electron configurations, Bohr atom visualizations, and element photos.\n\n![Element details page for gold](https://github.com/janosh/matterviz/releases/download/v0.2.2/2026-01-23-details-page.webp)\n\n## 🔨 \u0026thinsp; Installation\n\n```sh\nnpm add -D matterviz\n```\n\n## 📙 \u0026thinsp; Usage\n\n### Periodic Table\n\n```svelte\n\u003cscript\u003e\n  import { PeriodicTable } from 'matterviz'\n\n  const heatmap_values = { H: 10, He: 4, Li: 8, Fe: 3, O: 24 }\n\u003c/script\u003e\n\n\u003cPeriodicTable {heatmap_values} /\u003e\n```\n\n### Structure\n\n```svelte\n\u003cscript\u003e\n  import { Structure } from 'matterviz'\n  const data_url = '/structures/TiO2.cif'\n  // supports .cif, .poscar, .xyz/.extxyz, pymatgen JSON, OPTIMADE JSON, .gz\n\u003c/script\u003e\n\n\u003cStructure {data_url} style=\"width: 500px; aspect-ratio: 1\" /\u003e\n```\n\n### Composition\n\n```svelte\n\u003cscript\u003e\n  import { Composition } from 'matterviz'\n  // modes can be 'pie' (default) | 'bubble' | 'bar'\n\u003c/script\u003e\n\n\u003cComposition composition=\"LiFePO4\" mode=\"pie\" /\u003e\n```\n\n### Trajectory\n\n```svelte\n\u003cscript\u003e\n  import { Trajectory } from 'matterviz'\n  // supports .xyz/.extxyz, .traj, .hdf5, .npz, .pkl, .dat, .gz, .zip, .bz2, .xz\n\u003c/script\u003e\n\n\u003cTrajectory data_url=\"/traj/ase-md.xyz\" auto_play fps={10} style=\"max-height: 700px\" /\u003e\n```\n\n## 🧪 \u0026thinsp; Coverage\n\n| Statements                                                                                 | Branches                                                                          | Lines                                                                            |\n| ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |\n| ![Statements](https://img.shields.io/badge/statements-99.84%25-brightgreen.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-82.92%25-yellow.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-99.84%25-brightgreen.svg?style=flat) |\n\n## 🙏 \u0026thinsp; Acknowledgements\n\n- Element properties in `src/lib/element/data.ts` were combined from [`Bowserinator/Periodic-Table-JSON`](https://github.com/Bowserinator/Periodic-Table-JSON/blob/master/PeriodicTableJSON.json) under Creative Commons license and [`robertwb/Periodic Table of Elements.csv`](https://gist.github.com/robertwb/22aa4dbfb6bcecd94f2176caa912b952) (unlicensed).\n- Thanks to [Images of Elements](https://images-of-elements.com) for providing photos of elemental crystals and glowing excited gases.\n- Thanks to [@kadinzhang](https://github.com/kadinzhang) and their [Periodicity project](https://ptable.netlify.app) [[code](https://github.com/kadinzhang/Periodicity)] 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.\n- Big thanks to all sources of element images. See [`fetch-elem-images.ts`](https://github.com/janosh/matterviz/blob/-/src/scripts/fetch-elem-images.ts) and [`static/elements`](https://github.com/janosh/matterviz/tree/main/static/elements).\n- Thanks to [@ixxie](https://github.com/ixxie) ([shenhav.fyi](https://shenhav.fyi)) for great suggestions.\n\nThis project would not have been possible as a one-person side project without many fine open-source projects. 🙏 To name just a few:\n\n|           3D graphics           |               2D graphics                |                     Docs                     |               Bundler               |               Testing                |\n| :-----------------------------: | :--------------------------------------: | :------------------------------------------: | :---------------------------------: | :----------------------------------: |\n| [three.js](https://threejs.org) |          [d3](https://d3js.org)          |         [mdsvex](https://mdsvex.com)         |     [vite](https://vitejs.dev)      | [playwright](https://playwright.dev) |\n| [threlte](https://threlte.xyz)  | [sharp](https://sharp.pixelplumbing.com) | [rehype](https://github.com/rehypejs/rehype) | [sveltekit](https://kit.svelte.dev) |     [vitest](https://vitest.dev)     |\n\n## How to cite `matterviz`\n\nUse [`citation.cff`](citation.cff) or cite the [Zenodo record](https://zenodo.org/badge/latestdoi/498793280) using the following BibTeX entry:\n\n```bib\n@software{riebesell_matterviz_2022,\n  title = {matterviz: visualization toolkit for materials informatics},\n  author = {Riebesell, Janosh and Evans, Matthew},\n  date = {2026-01-23},\n  year = {2026},\n  doi = {10.5281/zenodo.17094509},\n  url = {https://github.com/janosh/matterviz},\n  note = {10.5281/zenodo.17094509 - https://github.com/janosh/matterviz},\n  urldate = {2026-01-23}, % optional, replace with your date of access\n  version = {0.3.1}, % replace with the version you use\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanosh%2Fmatterviz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjanosh%2Fmatterviz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanosh%2Fmatterviz/lists"}