script.js
Changed around line 1
+ function showIntroduction() {
+ document.getElementById("content").innerHTML = `
+
What is PCA?
+
Principal Component Analysis (PCA) is a technique for reducing the dimensionality of data. It transforms the data into a set of linearly uncorrelated variables known as principal components.
+
This tutorial will walk you through the key steps of PCA and demonstrate how it is used in data science and machine learning.
+ `;
+ }
+
+ function showSteps() {
+ document.getElementById("content").innerHTML = `
+
Steps of PCA
+
+ Standardize the data.
+ Calculate the covariance matrix.
+ Calculate the eigenvalues and eigenvectors of the covariance matrix.
+ Choose principal components and form a feature vector.
+ Transform the data.
+
+ `;
+ }
+
+ function showVisualization() {
+ document.getElementById("content").innerHTML = `
+
PCA Visualization
+
Below is a simple example showing data points before and after PCA transformation.
+
+ `;
+ drawPCAVisualization();
+ }
+
+ function drawPCAVisualization() {
+ const canvas = document.getElementById("pcaCanvas");
+ const ctx = canvas.getContext("2d");
+
+ // Sample data points before PCA (simulated 2D data)
+ const dataPoints = [
+ { x: 50, y: 150 }, { x: 80, y: 120 }, { x: 90, y: 200 },
+ { x: 200, y: 100 }, { x: 250, y: 80 }, { x: 300, y: 50 }
+ ];
+
+ // Clear canvas
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Draw original data points
+ ctx.fillStyle = "#4CAF50";
+ dataPoints.forEach(point => {
+ ctx.beginPath();
+ ctx.arc(point.x, canvas.height - point.y, 5, 0, 2 * Math.PI);
+ ctx.fill();
+ });
+
+ // Simulated transformed data points (after PCA)
+ const transformedPoints = [
+ { x: 100, y: 200 }, { x: 130, y: 180 }, { x: 140, y: 250 },
+ { x: 250, y: 170 }, { x: 300, y: 150 }, { x: 350, y: 120 }
+ ];
+
+ // Draw transformed data points
+ ctx.fillStyle = "#FF5722";
+ transformedPoints.forEach(point => {
+ ctx.beginPath();
+ ctx.arc(point.x, canvas.height - point.y, 5, 0, 2 * Math.PI);
+ ctx.fill();
+ });
+
+ ctx.fillStyle = "#000";
+ ctx.fillText("Original data points (green) vs PCA transformed (orange)", 10, 20);
+ }
+
+ function showApplications() {
+ document.getElementById("content").innerHTML = `
+
Applications of PCA
+
PCA is widely used in fields like image processing, genetics, and finance. It helps simplify complex datasets by reducing the number of variables while retaining most of the information.
+
+ Image Compression: Reducing the size of images without significant loss in quality.
+ Data Visualization: Reducing high-dimensional data to 2D or 3D for visualization.
+ Feature Extraction: Identifying significant patterns in data.
+
+ `;
+ }
script.js
main.scroll
Changed around line 1
-
+
+
+
+
+
+ Interactive PCA Tutorial
+
+
+
+
+
+
Principal Component Analysis (PCA) Interactive Tutorial
+
+
+
+
+
+
+
+
+
+
+
+
index.scroll
Changed around line 1
- buildHtml
-
- theme roboto
-
- main.scroll
+ buildHtml
+
+ theme roboto
+
+ main.scroll
index.scroll
Changed around line 2: buildHtml
- Hello World my name is
+ main.scroll
main.scroll
Changed around line 1
+
index.scroll
Changed around line 1
+ buildHtml
+
+ theme roboto
+
+ Hello World my name is