MLIP Performance Explorer — GitHub Pages build

A fully static, client-side web app for exploring machine-learning interatomic potential (MLIP) performance across material properties. It runs entirely in the browser — no server or build step required — which makes it ideal for hosting on GitHub Pages.

What's in this folder

File	Purpose
index.html	The complete single-page app (HTML + CSS + JS).
data.js	Pre-processed dataset exposed as the global LFM_DATA object.
.nojekyll	Tells GitHub Pages to skip Jekyll processing (serve as-is).
deploy.yml	Ready-to-use GitHub Actions workflow (see Option B).
README.md	This file.

External libraries (Plotly and D3) load from public CDNs, so nothing else needs to be bundled.

Features

• Scatter Plot — any property vs. any property, colored by MLIP family
• Histogram & Top / Bottom rankings
• Family Heatmap — median error by family × property
• Pareto Fronts — global or per-family, 2–8 properties
• Clustering — similarity network with adjustable threshold and centre gravity
• Correlations — Pearson r² property network
• Prediction — Lasso coefficient directed network
• Causality — PC-algorithm CPDAG (causal discovery)

---

Deploying to GitHub Pages

Option A — Deploy from a branch (simplest, no Actions)

1. Create a new GitHub repository (e.g. mlip-explorer).
2. Copy the contents of this github/ folder into the repository root (so index.html, data.js, and .nojekyll sit at the top level).
3. Commit and push to the main branch:

   git init
   git add .
   git commit -m "Add MLIP Performance Explorer"
   git branch -M main
   git remote add origin https://github.com/<user>/<repo>.git
   git push -u origin main

4. In the repo: Settings → Pages → Build and deployment → Source: "Deploy from a branch", branch main, folder / (root), then Save.
5. Wait ~1 minute. Your site will be live at https://<user>.github.io/<repo>/.

Tip: GitHub Pages "Deploy from a branch" only supports the repo root or a folder literally named /docs. If you prefer keeping the files in a subfolder, either rename it to docs, or use Option B.

Option B — Deploy with GitHub Actions (keep files in github/)

Use this if you want to keep this whole project structure and publish the github/ subfolder as-is.

1. Move deploy.yml to .github/workflows/deploy.yml at the repository root:

   mkdir -p .github/workflows
   mv github/deploy.yml .github/workflows/deploy.yml

2. In the repo: Settings → Pages → Build and deployment → Source: "GitHub Actions".
3. Push to main. The workflow uploads the github/ folder and deploys it. The published URL appears in the Actions run summary and under Settings → Pages.

---

Running locally

Because everything is static, you can open it with any static file server:

# From inside this folder:
python3 -m http.server 8000
# then visit http://localhost:8000

Opening index.html directly via file:// also works in most browsers, but a local server is recommended so the relative data.js path loads reliably.

Updating the data

data.js defines a single global object:

const LFM_DATA = { cols: [...], meta: [...], data: [[...], ...] };

• cols — array of property (column) names
• meta — per-model metadata (family, name, selection/training type)
• data — 2-D array of normalized log-error values (rows = models, cols = properties)

Regenerate this file from your source dataset and replace it to refresh the app.