Skip to content

Commit d188822

Browse files
saswatppsaswatpp
authored
Merge pull request #41 from sahilg06/loader
added loader to pca
2 parents 424032b + 6d1022f commit d188822

File tree

4 files changed

+258
-176
lines changed

4 files changed

+258
-176
lines changed

‎PCA/index.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ <h2 style="color: azure;">Random Data</h2>
4646
<div>
4747
<button id="Show1" onclick="show_no_outlier()" class="btn btn-success">Show plots without outlier</button>
4848
</div><br/>
49+
<div id="loader3"></div><br>
4950
<div id="non_outlier" style="display: none;">
5051
<div>
5152
<h2>Using Original AXES</h2>
@@ -88,6 +89,7 @@ <h2 style="color: azure;">Adding an Outlier</h2>
8889
</div><br>
8990
<button id="Show2" onclick="show_outlier()" class="btn btn-success">Show plots with outlier</button>
9091
</div><br>
92+
<div id="loader4"></div><br>
9193
<div id="outlier" style="display: none;">
9294
<div>
9395
<h2>Using Original AXES</h2>
@@ -131,7 +133,8 @@ <h2 style="color: azure;">Using MOON dataset</h2>
131133
</div><br>
132134
<div>
133135
<button id="Show4" onclick="show_moon()" class="btn btn-success">Show plots using Moon-data</button>
134-
</div>
136+
</div><br>
137+
<div id="loader"></div><br>
135138
<div id="moon_set" style="display: none;">
136139
<div>
137140
<h2>Using Original AXES</h2>
@@ -183,7 +186,8 @@ <h2 style="color: azure;">Using IRIS dataset</h2>
183186
</div>
184187
<div>
185188
<button id="Show3" onclick="show_iris()" class="btn btn-success">Show plots using IRIS</button>
186-
</div>
189+
</div><br>
190+
<div id="loader2"></div><br>
187191
<div id="iris_set" style="display: none;">
188192
<div>
189193
<h2>Using Original AXES</h2>

‎PCA/iris.js

+74-56
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
const D1 = 4;
22
const N1 = 50;
33

4+
var load2 = document.getElementById("loader2");
5+
load2.style.fontSize = "30px";
6+
load2.style.color = "black";
7+
load2.style.fontFamily = "monospace";
8+
load2.style.backgroundColor = "greenyellow";
9+
10+
var callback2 = function ()
11+
{
12+
load2.innerHTML = "Processing....";
13+
}
414

515
function render3DPrediction1(ctx, xs, name, proj = false) {
616
let xsOriginal = xs.dataSync();
@@ -571,83 +581,91 @@ const tensor_dataset = tf.tensor2d(iris_data, [numExamples, 5]);
571581

572582

573583

574-
async function main3(xs) {
575-
const xs_t = xs.gather([0, 1, 2, 3], 1);
584+
function main3(xs) {
576585

586+
return async function()
587+
{
588+
const xs_t = xs.gather([0, 1, 2, 3], 1);
577589

578-
const [axes, pcaXs] = await pca2(xs, 4);
579-
xs_new = axes.concat(xs);
580590

581-
//const div = document.getElementById('3dplot');
582-
//render3DPrediction(div, xs_new, proj =true);
591+
const [axes, pcaXs] = await pca2(xs, 4);
592+
xs_new = axes.concat(xs);
583593

584-
const ctx4 = document.getElementById('0-dim-iris');
585-
render1DPrediction1(ctx4, xs.gather([0], 1), "1st Feature");
586-
const ctx5 = document.getElementById('1-dim-iris');
587-
render1DPrediction1(ctx5, xs.gather([1], 1), "2nd Feature");
588-
const ctx6 = document.getElementById('2-dim-iris');
589-
render1DPrediction1(ctx6, xs.gather([2], 1), "3rd Feature");
590-
const ctx11 = document.getElementById('3-dim-iris');
591-
render1DPrediction1(ctx11, xs.gather([3], 1), "4th Feature");
594+
//const div = document.getElementById('3dplot');
595+
//render3DPrediction(div, xs_new, proj =true);
592596

593-
console.log("Variance of pca");
594-
variance(pcaXs);
597+
const ctx4 = document.getElementById('0-dim-iris');
598+
render1DPrediction1(ctx4, xs.gather([0], 1), "1st Feature");
599+
const ctx5 = document.getElementById('1-dim-iris');
600+
render1DPrediction1(ctx5, xs.gather([1], 1), "2nd Feature");
601+
const ctx6 = document.getElementById('2-dim-iris');
602+
render1DPrediction1(ctx6, xs.gather([2], 1), "3rd Feature");
603+
const ctx11 = document.getElementById('3-dim-iris');
604+
render1DPrediction1(ctx11, xs.gather([3], 1), "4th Feature");
595605

606+
console.log("Variance of pca");
607+
variance(pcaXs);
596608

597-
yl.push(0);
598609

610+
yl.push(0);
599611

600612

601-
Plotly.newPlot('var-pca', [{
602-
x: xl,
603-
y: yl,
604-
line: { simplify: false },
605-
}], {}, { showSendToCloud: true });
606613

607-
function plot() {
608-
Plotly.animate(
609-
"var-pca", {
610-
data: [{ y: yl }],
611-
traces: [0],
612-
layout: {
613-
autosize: true,
614-
title: "Explained Variance",
615-
},
616-
}, {
617-
transition: {
618-
duration: 500,
619-
easing: "cubic-in-out",
620-
},
621-
frame: {
622-
duration: 500,
623-
},
624-
}
625-
);
626-
}
627-
plot();
614+
Plotly.newPlot('var-pca', [{
615+
x: xl,
616+
y: yl,
617+
line: { simplify: false },
618+
}], {}, { showSendToCloud: true });
619+
620+
function plot() {
621+
Plotly.animate(
622+
"var-pca", {
623+
data: [{ y: yl }],
624+
traces: [0],
625+
layout: {
626+
autosize: true,
627+
title: "Explained Variance",
628+
},
629+
}, {
630+
transition: {
631+
duration: 500,
632+
easing: "cubic-in-out",
633+
},
634+
frame: {
635+
duration: 500,
636+
},
637+
}
638+
);
639+
}
640+
plot();
641+
642+
const div2 = document.getElementById('3dplot-pca-iris');
643+
render3DPrediction1(div2, pcaXs.gather([0, 1, 2], 1), "3D PCA plot");
628644

629-
const div2 = document.getElementById('3dplot-pca-iris');
630-
render3DPrediction1(div2, pcaXs.gather([0, 1, 2], 1), "3D PCA plot");
645+
const ctx7 = document.getElementById('0-dim-pca-iris');
646+
render1DPrediction1(ctx7, pcaXs.gather([0], 1), "1st Principal Component");
631647

632-
const ctx7 = document.getElementById('0-dim-pca-iris');
633-
render1DPrediction1(ctx7, pcaXs.gather([0], 1), "1st Principal Component");
648+
const ctx8 = document.getElementById('1-dim-pca-iris');
649+
render1DPrediction1(ctx8, pcaXs.gather([1], 1), "2nd Principal Component");
634650

635-
const ctx8 = document.getElementById('1-dim-pca-iris');
636-
render1DPrediction1(ctx8, pcaXs.gather([1], 1), "2nd Principal Component");
651+
const ctx9 = document.getElementById('2-dim-pca-iris');
652+
render1DPrediction1(ctx9, pcaXs.gather([2], 1), "3rd Principal Component");
637653

638-
const ctx9 = document.getElementById('2-dim-pca-iris');
639-
render1DPrediction1(ctx9, pcaXs.gather([2], 1), "3rd Principal Component");
654+
const ctx12 = document.getElementById('3-dim-pca-iris');
655+
render1DPrediction1(ctx12, pcaXs.gather([3], 1), "4th Principal Component");
640656

641-
const ctx12 = document.getElementById('3-dim-pca-iris');
642-
render1DPrediction1(ctx12, pcaXs.gather([3], 1), "4th Principal Component");
657+
const ctx10 = document.getElementById('0-1-dim-pca-iris');
658+
render2DPrediction1(ctx10, pcaXs.gather([0, 1], 1), "2D PCA plot");
643659

644-
const ctx10 = document.getElementById('0-1-dim-pca-iris');
645-
render2DPrediction1(ctx10, pcaXs.gather([0, 1], 1), "2D PCA plot");
660+
load2.innerHTML = "Here are your plots"+String.fromCharCode(0xD83D, 0xDE04);
661+
}
646662
}
647663

648664
document.getElementById('Show3')
649665
.addEventListener('click', async() => {
650666
console.clear()
651667
const xs1 = tensor_dataset.gather([0, 1, 2, 3], 1);
652-
main3(xs1);
668+
setTimeout(callback2,0);
669+
setTimeout(main3(xs1),2000);
670+
//main3(xs1);
653671
});

‎PCA/moon.js

+47-25
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
const D2 = 2;
22
const N2 = 50;
33

4+
var load = document.getElementById("loader");
5+
load.style.fontSize = "30px";
6+
load.style.color = "black";
7+
load.style.fontFamily = "monospace";
8+
load.style.backgroundColor = "greenyellow";
9+
10+
11+
var callback1 = function ()
12+
{
13+
load.innerHTML = "Processing....";
14+
}
415

516
function render2DPrediction2(ctx, xs, name) {
617
const xsOriginal = xs.dataSync();
@@ -316,47 +327,58 @@ const moon_data = [
316327

317328
const data = tf.tensor2d(moon_data, [100, 2]);
318329

319-
async function main4(xs) {
330+
function main4(xs) {
320331

321-
const [axes, pcaXs] = await pca3(xs, 2);
322-
xs_new = axes.concat(xs);
332+
return async function()
333+
{
334+
const [axes, pcaXs] = await pca3(xs, 2);
335+
xs_new = axes.concat(xs);
323336

324-
const ctx3 = document.getElementById('2dplot-m');
325-
render2DPrediction2(ctx3, xs, "Original data");
326-
const ctx4 = document.getElementById('0-dim-m');
327-
render1DPrediction2(ctx4, xs.gather([0], 1), "1st Feature");
328-
const ctx5 = document.getElementById('1-dim-m');
329-
render1DPrediction2(ctx5, xs.gather([1], 1), "2nd Feature");
337+
const ctx3 = document.getElementById('2dplot-m');
338+
render2DPrediction2(ctx3, xs, "Original data");
339+
const ctx4 = document.getElementById('0-dim-m');
340+
render1DPrediction2(ctx4, xs.gather([0], 1), "1st Feature");
341+
const ctx5 = document.getElementById('1-dim-m');
342+
render1DPrediction2(ctx5, xs.gather([1], 1), "2nd Feature");
330343

331-
const ctx7 = document.getElementById('0-dim-pca-m');
332-
render1DPrediction2(ctx7, pcaXs.gather([0], 1), "1st Principal Component");
344+
const ctx7 = document.getElementById('0-dim-pca-m');
345+
render1DPrediction2(ctx7, pcaXs.gather([0], 1), "1st Principal Component");
333346

334-
const ctx8 = document.getElementById('1-dim-pca-m');
335-
render1DPrediction2(ctx8, pcaXs.gather([1], 1), "2nd Principal Component");
347+
const ctx8 = document.getElementById('1-dim-pca-m');
348+
render1DPrediction2(ctx8, pcaXs.gather([1], 1), "2nd Principal Component");
336349

337350

338-
const ctx10 = document.getElementById('0-1-dim-pca-m');
339-
render2DPrediction2(ctx10, pcaXs.gather([0, 1], 1), "2D PCA plot");
351+
const ctx10 = document.getElementById('0-1-dim-pca-m');
352+
render2DPrediction2(ctx10, pcaXs.gather([0, 1], 1), "2D PCA plot");
353+
}
340354

341355
}
342356

343-
async function main5(xs, gamma) {
357+
function main5 (xs, gamma) {
344358

345-
const kpcaXs = await kpca(xs, gamma);
346-
const ctx11 = document.getElementById('kpca');
347-
render2DPrediction2(ctx11, kpcaXs, "2D PCA plot");
359+
return async function()
360+
{
361+
const kpcaXs = await kpca(xs, gamma);
362+
const ctx11 = document.getElementById('kpca');
363+
render2DPrediction2(ctx11, kpcaXs, "2D PCA plot");
348364

349-
const ctx12 = document.getElementById('kpca-0');
350-
render1DPrediction2(ctx12, kpcaXs.gather([0], 1), "1st Principal Component");
365+
const ctx12 = document.getElementById('kpca-0');
366+
render1DPrediction2(ctx12, kpcaXs.gather([0], 1), "1st Principal Component");
351367

352-
const ctx13 = document.getElementById('kpca-1');
353-
render1DPrediction2(ctx13, kpcaXs.gather([1], 1), "2nd Principal Component");
368+
const ctx13 = document.getElementById('kpca-1');
369+
render1DPrediction2(ctx13, kpcaXs.gather([1], 1), "2nd Principal Component");
370+
371+
load.innerHTML = "Here are your plots"+String.fromCharCode(0xD83D, 0xDE04);
372+
}
354373
}
355374

356375
document.getElementById('Show4')
357376
.addEventListener('click', async() => {
358377
console.clear();
359-
main4(data);
378+
setTimeout(callback1,0);
379+
setTimeout(main4(data),29000);
380+
//main4(data);
360381
var g = Number(document.getElementById("gamma").value);
361-
main5(data, g);
382+
setTimeout(main5(data, g),2000);
383+
//main5(data, g);
362384
});

0 commit comments

Comments
 (0)