------------------------------------------------------------
commit dad00e7dc4689b4d37d5c04073839a84d5c75fb9
Author: ffff:222.155.80.110 <ffff:222.155.80.110@hub.scroll.pub>
Date: Fri Oct 4 07:36:57 2024 +0000
Updated script.js
diff --git a/script.js b/script.js
index e69de29..44626b3 100644
--- a/script.js
+++ b/script.js
@@ -0,0 +1,80 @@
+function showIntroduction() {
+ document.getElementById("content").innerHTML = `
+ <h2>What is PCA?</h2>
+ <p>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.</p>
+ <p>This tutorial will walk you through the key steps of PCA and demonstrate how it is used in data science and machine learning.</p>
+ `;
+}
+
+function showSteps() {
+ document.getElementById("content").innerHTML = `
+ <h2>Steps of PCA</h2>
+ <ol>
+ <li>Standardize the data.</li>
+ <li>Calculate the covariance matrix.</li>
+ <li>Calculate the eigenvalues and eigenvectors of the covariance matrix.</li>
+ <li>Choose principal components and form a feature vector.</li>
+ <li>Transform the data.</li>
+ </ol>
+ `;
+}
+
+function showVisualization() {
+ document.getElementById("content").innerHTML = `
+ <h2>PCA Visualization</h2>
+ <p>Below is a simple example showing data points before and after PCA transformation.</p>
+ <canvas id="pcaCanvas" width="600" height="400"></canvas>
+ `;
+ 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 = `
+ <h2>Applications of PCA</h2>
+ <p>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.</p>
+ <ul>
+ <li><strong>Image Compression</strong>: Reducing the size of images without significant loss in quality.</li>
+ <li><strong>Data Visualization</strong>: Reducing high-dimensional data to 2D or 3D for visualization.</li>
+ <li><strong>Feature Extraction</strong>: Identifying significant patterns in data.</li>
+ </ul>
+ `;
+}
------------------------------------------------------------
commit 3c35ebfc869ba5ad7c05f7eab2cc0543494d4523
Author: ffff:222.155.80.110 <ffff:222.155.80.110@hub.scroll.pub>
Date: Fri Oct 4 07:36:49 2024 +0000
Updated script.js
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e69de29
------------------------------------------------------------
commit 9daa11811c76f0ba7dad101263a54331ad2c9a19
Author: ffff:222.155.80.110 <ffff:222.155.80.110@hub.scroll.pub>
Date: Fri Oct 4 07:35:13 2024 +0000
Updated main.scroll
diff --git a/main.scroll b/main.scroll
index 8b13789..6b6c1e4 100644
--- a/main.scroll
+++ b/main.scroll
@@ -1 +1,24 @@
-
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Interactive PCA Tutorial</title>
+ <link rel="stylesheet" href="styles.css">
+ <script src="script.js" defer></script>
+</head>
+<body>
+ <header>
+ <h1>Principal Component Analysis (PCA) Interactive Tutorial</h1>
+ </header>
+ <nav>
+ <button onclick="showIntroduction()">Introduction</button>
+ <button onclick="showSteps()">Steps of PCA</button>
+ <button onclick="showVisualization()">PCA Visualization</button>
+ <button onclick="showApplications()">Applications</button>
+ </nav>
+ <main id="content">
+ <!-- Content will be dynamically inserted here -->
+ </main>
+</body>
+</html>
------------------------------------------------------------
commit 7ea2828a5034c83dce60a4f9cad4af7e5bdc6b8c
Author: ffff:222.155.80.110 <ffff:222.155.80.110@hub.scroll.pub>
Date: Fri Oct 4 07:34:58 2024 +0000
Updated index.scroll
diff --git a/index.scroll b/index.scroll
index 48cb16d..5c973a1 100644
--- a/index.scroll
+++ b/index.scroll
@@ -1,5 +1,5 @@
-buildHtml
-
-theme roboto
-
-main.scroll
+buildHtml
+
+theme roboto
+
+main.scroll
------------------------------------------------------------
commit 80e9b1ea5c17af81af52571c92775d5825501386
Author: ffff:222.155.80.110 <ffff:222.155.80.110@hub.scroll.pub>
Date: Fri Oct 4 07:34:54 2024 +0000
Updated index.scroll
diff --git a/index.scroll b/index.scroll
index 6b06f2f..48cb16d 100644
--- a/index.scroll
+++ b/index.scroll
@@ -2,4 +2,4 @@ buildHtml
theme roboto
-Hello World my name is
+main.scroll
------------------------------------------------------------
commit 7b5d90bd976d1823d2044dc7baa7e16a064c2242
Author: ffff:222.155.80.110 <ffff:222.155.80.110@hub.scroll.pub>
Date: Fri Oct 4 07:34:36 2024 +0000
Updated main.scroll
diff --git a/main.scroll b/main.scroll
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/main.scroll
@@ -0,0 +1 @@
+
------------------------------------------------------------
commit eb78dd48ead968804b2e54760f0e3139120d1074
Author: root <root@hub.scroll.pub>
Date: Fri Oct 4 06:33:37 2024 +0000
Initial commit from blank template
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..6b06f2f
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,5 @@
+buildHtml
+
+theme roboto
+
+Hello World my name is