PCA Cloud ☁️

A table gives you the numbers. PCA Cloud helps you explore how they fit together. Bring measurements from an experiment, a public dataset, or a CSV you've been curious about, and see their projected shape in three dimensions.

• Look for patterns worth investigating! Explore groups, spread, and unusual points from different angles.
• Build intuition as you go... Switch between PCA and t-SNE to see how different ways of simplifying the same data change the picture.
• Make the view your own Choose soft cloud particles or individual data points, adjust the atmosphere, and save an image for a slide, notebook, or conversation.
• Keep your data on your device. Uploaded CSVs are processed locally in your browser. No account or API key is needed.

Open the app and the built-in atmospheric sample is ready to explore. You don't need a dataset to get started.

1. Drag to orbit. See the cloud from another angle. Scroll or use +/− to zoom.
2. Choose Data points. See the individual projected rows behind the cloud.
3. Switch to t-SNE. Explore local similarities, then switch back to PCA to compare the views.
4. Save your favorite view. Select Save image to download a PNG.

Use Reset view whenever you want to return to the starting camera position.

Select the Learn PCA tab on the right edge to slide out the learning drawer while keeping the sky interactive. Variance shows the complete scree plot; Loadings connects feature weights to a highlighted PCA axis. Walkthrough guides you through six steps using the assignment’s four-point example: change units, toggle standardization, orbit the scene, and click A–D to inspect a point. The main visualization highlights centering, component directions, projections, and reconstruction loss for the active step. Select Studio or press Escape to return to your dataset. Opening Learn PCA switches a t-SNE view to PCA.

Drop a file onto Bring your own data, or click to browse. Include a header row and at least two numeric columns with two complete data rows.

You can explore files up to 5 MB and 100 columns. Text columns are excluded, and incomplete or malformed rows are skipped. Remove numeric IDs or other columns you don't want included before uploading.

Open Import from Kaggle and select Try Iris dataset, or paste a public dataset link, choose Find CSVs, and select Visualize dataset for your chosen file.

If Kaggle can't serve the file directly to your browser, download the CSV yourself and drop it into the app. Private datasets, competition authentication, and ZIP extraction aren't supported.

Try toggling Standardize features, especially when your columns use different units. It scales features to equal sample variance so their original measurement scales don't dominate the analysis.

PCA's two objective options produce the same point positions; they let you emphasize explained variance or reconstruction error. For t-SNE, changing perplexity lets you explore different neighborhood scales.

These views help you ask questions about your data. A visible group alone doesn't establish a meaningful category, and a 3D projection can leave information out. Cloud density and particle size change the appearance, not the analysis.

• CSVs with more than 2,500 valid rows are evenly sampled before analysis.
• t-SNE uses at most 500 rows, runs for 500 iterations, and uses a fixed seed. Identical inputs and settings give reproducible results; a fixed iteration count does not guarantee convergence.
• t-SNE's KL divergence is not comparable to PCA's explained variance or reconstruction error, and should not be compared directly across different datasets or perplexities.
• With two numeric features, PCA produces a flat projection. Constant data produces a validation message.
• The sample is synthetic atmospheric data. The cloud is an artistic rendering, not a weather simulation.

See Projection methods for the mathematics, implementation details, and interpretation limits.

CSV parsing and projection calculations happen on your device. The app does not upload your dataset.

The page loads fonts from Google Fonts, with system-font fallbacks. If you use the Kaggle importer, your browser also contacts Kaggle and its download host. Each import requests the current file; datasets aren't refreshed in the background.

Find the shape in your data → ⋆｡˚ ☁︎ ˚｡⋆

Built with vanilla JavaScript and Canvas 2D, packaged as a reusable Jekyll theme. The app has no JavaScript runtime package dependencies. See the roadmap for fixes, release checks, and ideas for future features.

PCACloud/
├── index.html       # Home page front matter
├── _config.yml      # Site URLs, branding, and intro text
├── _layouts/        # default, home, page, and post layouts
├── _includes/       # Head, header, footer, studio, and learning drawer
├── assets/          # JavaScript modules, stylesheet, image, and favicon
├── tests/           # Automated projection and importer tests
├── docs/            # Projection guide, roadmap, and screenshot
├── Gemfile          # Jekyll development dependencies
├── jekyll-theme-pca-cloud.gemspec
└── .github/         # Jekyll GitHub Pages deployment workflow

With Ruby 3.1 or newer, Bundler, and Node.js/npm installed:

bundle install
npm start

Open localhost:5173. Jekyll renders the layouts and Liquid templates. npm start serves at the domain root for local development. Run npm run build to generate _site/ using the configured /PCACloud base path. Any static web server can serve the generated _site/ directory.

npm test

Tests use Node's built-in test runner and cover PCA variance, component orthogonality, scale invariance, reconstruction error, CSV parsing and validation, mocked Kaggle responses, and t-SNE affinities, gradients, and reproducibility.

In repository Settings → Pages, select GitHub Actions as the deployment source.

The included workflow runs tests, builds Jekyll, and publishes _site/ on every push to main. You can also start it manually from the repository's Actions tab. Jekyll’s relative_url filter supports the /PCACloud/ project path. Set url and baseurl in _config.yml for your own domain or repository (baseurl: "" for a domain root).

The theme follows Jekyll’s theme structure and can be used from a checkout, as a gem, or as a remote theme.

To use this checkout directly, run the local commands above. Edit _config.yml to change branding, the header/footer notes, and the home page introduction. headline and intro accept HTML; other text settings are escaped. Per-page headline, intro, and eyebrow override the site settings. Keep the studio’s element IDs when customizing its HTML because the interactive app uses them.

To use it in another Jekyll site without publishing a gem, add this to that site’s Gemfile:

gem "jekyll", "~> 4.4"
gem "jekyll-theme-pca-cloud", git: "https://github.com/archipelagoing/PCACloud", branch: "main"

After these changes are pushed to that branch, run bundle install and set:

theme: jekyll-theme-pca-cloud
title: PCA Cloud

Alternatively, add gem "jekyll-remote-theme" to the consuming site’s Gemfile and configure:

remote_theme: archipelagoing/PCACloud
plugins:
  - jekyll-remote-theme

Remote theme usage also requires these files to be pushed first. When using either method, create your own index.html:

---
layout: home
title: Find the shape in your data
---

Use layout: page for ordinary Markdown pages and layout: post for dated posts. Those layouts share the sky colors and glass cards; the interactive studio loads on layout: home pages. Theme installation supplies layouts and assets, so the consuming site provides its own content and _config.yml. Copy a file into your own _includes/ or _layouts/ directory to override it.

To package the theme locally:

gem build jekyll-theme-pca-cloud.gemspec

This creates jekyll-theme-pca-cloud-0.1.0.gem; publishing it to RubyGems is a separate step.

Licensed under Apache License 2.0.

For Tyler.