Switched To point for datasets

resources/js/components/PerceptronDecisionGraph.vue

@@ -5,10 +5,10 @@ import type {
     BubbleDataPoint,
     Point,
 } from 'chart.js';
-import { Chart } from 'vue-chartjs';
-import type { Iteration } from '@/types/perceptron';
-import { colors } from '@/types/graphs';
 import { computed } from 'vue';
+import { Chart } from 'vue-chartjs';
+import { colors } from '@/types/graphs';
+import type { Iteration } from '@/types/perceptron';
 
 const props = defineProps<{
     cleanedDataset: { label: number; data: { x: number; y: number }[] }[];
@@ -45,13 +45,13 @@ function getPerceptronDecisionBoundaryDataset(
         networkWeights.length == 1 &&
         networkWeights[0].length == 1 &&
         networkWeights[0][0].length == 3
-    ) {
-        // Unique, 3 weights perceptron
+    ) { // Unique, 3 weights perceptron
         const perceptronWeights = networkWeights[0][0]; // We take the unique
 
         function perceptronLine(x: number): number {
             // w0 + w1*x + w2*y = 0 => y = -(w1/w2)*x - w0/w2
-            return -(perceptronWeights[1] / perceptronWeights[2]) * x - perceptronWeights[0] / perceptronWeights[2];
+            const w2 = perceptronWeights[2] == 0 ? 1e-6 : perceptronWeights[2]; // Avoid division by zero
+            return -(perceptronWeights[1] / w2) * x - perceptronWeights[0] / w2;
         }
 
         // Simple line

resources/js/pages/PerceptronViewer.vue

@@ -12,10 +12,11 @@ import {
     PointElement,
     LineElement,
 } from 'chart.js';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import LinkHeader from '@/components/LinkHeader.vue';
 import type {
     Dataset,
+    DatasetPoint,
     InitializationMethod,
     Iteration,
     PerceptronType,
@@ -49,7 +50,7 @@ const props = defineProps<{
 }>();
 
 const selectedDatasetName = ref<string>('');
-const dataset = computed<number[][]>(() => {
+const dataset = computed<DatasetPoint[]>(() => {
     const selected = props.datasets.find(
         (d) => d.label === selectedDatasetName.value,
     );
@@ -72,15 +73,12 @@ const cleanedDataset = computed<
     }[] = [];
     // Separate data into each dataset based on value of the last column (label)
     dataset.value.forEach((row) => {
-        const label = row[row.length - 1];
-        const dataPoint = { x: row[0], y: row[1] };
-
-        let dataset = cleanedDataset.find((d) => d.label === label);
+        let dataset = cleanedDataset.find((d) => d.label === row.label);
         if (!dataset) {
-            dataset = { label, data: [] };
+            dataset = { label: row.label, data: [] };
             cleanedDataset.push(dataset);
         }
-        dataset.data.push(dataPoint);
+        dataset.data.push({ x: row.x, y: row.y });
     });
     return cleanedDataset;
 });

resources/js/types/perceptron.ts

@@ -1,3 +1,5 @@
+import type { Point } from "chart.js";
+
 export type Iteration = {
     iteration: number;
     exampleIndex: number;
@@ -7,10 +9,16 @@ export type Iteration = {
 
 export type Dataset = {
     label: string;
-    data: { x: number; y: number }[];
+    data: DatasetPoint[];
     defaultLearningRate: number | undefined;
 };
 
+export type DatasetPoint = {
+    x: number;
+    y: number;
+    label: number;
+};
+
 export type InitializationMethod = 'zeros' | 'random';
 
 export type PerceptronType = 'simple';