cagatayuresin
← All projects

interactive-pca

🔬 Interactive PCA Analysis Tool - Upload any CSV file and explore Principal Component Analysis step-by-step with interactive visualizations. | Herhangi bir CSV dosyasına PCA analizi yapan, adım adım matematiksel işlemleri gösteren interaktif web aracı.

● JavaScript ★ 3 ⑂ 0 Last updated: December 11, 2025
Open on GitHub → Live demo →

🔬 İnteraktif PCA Analizi

GitHub Pages License: MIT

Herhangi bir CSV dosyasına Principal Component Analysis (PCA) uygulayan, adım adım matematiksel işlemleri gösteren ve sonuçları interaktif grafiklerle görselleştiren web tabanlı bir araç.

🌟 Özellikler

📊 Veri İşleme

  • Esnek CSV Desteği: Virgül, noktalı virgül veya tab ile ayrılmış dosyaları destekler
  • Otomatik Tip Algılama: Sayısal ve kategorik sütunları otomatik olarak tanır
  • Sütun Seçimi: Analiz için hangi sütunların kullanılacağını seçebilirsiniz
  • Veri Önizleme: Yüklenen verinin ilk 5 satırını gösterir

📐 Adım Adım PCA Analizi (12 Adım)

  1. Ham Veri İstatistikleri

    • N, ortalama, standart sapma, min, max, medyan, aralık

  2. Ortalama Merkezleme (Mean Centering)

    • Her değişken için ortalama hesaplaması
    • Merkezlenmiş veri tablosu

  3. Standartlaştırma (Z-Score)

    • Standart sapma hesaplaması
    • Z-score dönüşümü

  4. Kovaryans Matrisi

    • Değişkenler arası kovaryans değerleri
    • Interaktif heatmap

  5. Korelasyon Matrisi

    • Standartlaştırılmış korelasyon değerleri
    • Interaktif heatmap

  6. Özdeğer ve Özvektör Hesaplaması

    • Eigenvalue ve eigenvector tabloları
    • Kaiser kriteri önerisi

  7. Açıklanan Varyans & Boyut İndirgeme

    • Bireysel ve kümülatif varyans yüzdeleri
    • Dirsek Noktası (Elbow Point) Grafiği
    • Scree Plot
    • Kümülatif varyans grafiği
    • %80 varyans önerisi

  8. Ana Bileşen Skorları

    • PC skorları tablosu

  9. Yüklemeler (Loadings)

    • Loading matrisi
    • Loadings heatmap

  10. Özellik Önem Analizi (Feature Importance) 🆕

    • Her özelliğin PCA'ya katkısının hesaplanması
    • Önem sıralaması bar grafiği
    • Otomatik bulgular ve öneriler
    • En önemli ve en az önemli özellikler

  11. PCA Sezgiselliği: Varyansı Maksimize Eden Yön

    • Sinyal-Gürültü Oranı (SNR) açıklaması
    • PC1 ve PC2 yönlerinin görselleştirilmesi
    • Varyans maksimizasyonu grafiği

  12. Bakış Açısını Değiştirmek: Önce ve Sonra

    • Orijinal eksenler (Naïve Baz) görünümü
    • Temel bileşenler bazı görünümü
    • Dönüşüm karşılaştırması

  13. İnteraktif Görselleştirmeler

    • 2D Scatter Plot (seçilebilir eksenler)
    • 3D Scatter Plot (interaktif döndürme)
    • Biplot (skorlar + yüklemeler)

📥 Export Seçenekleri

  • PC Skorları (CSV): Ana bileşen skorlarını indir
  • Yüklemeler (CSV): Loading matrisini indir
  • Özdeğerler (CSV): Eigenvalue tablosunu indir
  • Tam Rapor (JSON): Tüm analiz sonuçlarını JSON formatında indir
  • PDF Raporu: Yazdırılabilir format

🚀 Kullanım

Online Kullanım

https://cagatayuresin.github.io/interactive-pca/

Lokal Kullanım

  1. Repoyu klonlayın:

    git clone https://github.com/cagatayuresin/interactive-pca.git

  2. Klasöre gidin:

    cd interactive-pca

  3. index.html dosyasını tarayıcınızda açın veya bir lokal sunucu başlatın:

    # Python ile
python -m http.server 8000

# Node.js ile
npx serve

  4. Tarayıcınızda http://localhost:8000 adresine gidin

📁 Proje Yapısı

interactive-pca/
├── index.html             # Ana HTML dosyası
├── css/
│   └── style.css          # Stil dosyası
├── js/
│   ├── utils.js           # Yardımcı fonksiyonlar
│   ├── csvParser.js       # CSV işleme modülü
│   ├── pca.js             # PCA hesaplama motoru
│   ├── visualizations.js  # Grafik modülü (Plotly.js)
│   ├── export.js          # Export fonksiyonları
│   └── app.js             # Ana uygulama
├── sample_data/
│   └── iris.csv           # Örnek veri seti
└── README.md

🧮 Matematiksel Açıklama

PCA Adımları

  1. Ortalama Merkezleme: $$X_{centered} = X - \mu$$

  2. Standartlaştırma: $$Z = \frac{X - \mu}{\sigma}$$

  3. Kovaryans Matrisi: $$Cov(X,Y) = \frac{\sum(X_i - \bar{X})(Y_i - \bar{Y})}{n-1}$$

  4. Özdeğer Denklemi: $$Cov \cdot v = \lambda \cdot v$$

  5. Açıklanan Varyans: $$\text{Explained Variance} = \frac{\lambda_i}{\sum\lambda} \times 100%$$

  6. Ana Bileşen Skorları: $$PC = Z \times V$$

🛠️ Teknolojiler

  • HTML5 / CSS3: Modern, responsive tasarım (Navy & Egg White tema)
  • Vanilla JavaScript: Bağımlılık olmadan saf JS
  • Plotly.js: İnteraktif grafikler
  • Math.js: Matris işlemleri ve özdeğer hesaplaması
  • Font Awesome: İkonlar

🎨 Tasarım

Proje, profesyonel Navy Blue & Egg White renk paleti kullanmaktadır:

  • Primary: Navy (#1e3a5f)
  • Background: Egg White (#faf8f5)
  • Accent: Gold (#c9a227)
  • Secondary: Soft Green (#3d8b6e)

📊 Örnek Veri Setleri

Test etmek için kullanabileceğiniz veri setleri:

  • Iris Dataset
  • Wine Dataset
  • Boston Housing Dataset
  • MNIST (küçültülmüş)

🤝 Katkıda Bulunma

  1. Fork edin
  2. Feature branch oluşturun (git checkout -b feature/amazing-feature)
  3. Değişikliklerinizi commit edin (git commit -m 'Add amazing feature')
  4. Branch'i push edin (git push origin feature/amazing-feature)
  5. Pull Request açın

📝 Lisans

Bu proje MIT lisansı altında lisanslanmıştır. Detaylar için LICENSE dosyasına bakın.

👤 Yazar

Çağatay Üresin

🙏 Teşekkürler

⭐ Bu projeyi beğendiyseniz yıldız vermeyi unutmayın!