Skip to content

Commit 465f18d

Browse files
GaelGilGaelGil
committed
updating project
1 parent f1cdd06 commit 465f18d

File tree

4 files changed

+81
-85
lines changed

4 files changed

+81
-85
lines changed

‎src/data/arraysInfo.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
export const arraysInfo = [
2+
{
3+
name: "General",
4+
description: `Here you can visulize sorting algorithms. The array contains 50 items. Below are some basic notes on each algorithm. To learn more
5+
about the implementation of the algorithms click the link below.`,
6+
link: "https://en.wikipedia.org/wiki/Sorting_algorithm",
7+
},
8+
{
9+
name: "Bubble Sort",
10+
description: `Bubble sort goes through every element in the array comparing the current item to the one after it.
11+
If the current is greater than the next we swap them. We repeat this until were done. The time complexity of this is
12+
O(N^2)`,
13+
},
14+
{
15+
name: "Merge Sort",
16+
description: `In merge sort we split the array recursively. The idea is that we want to solve a smaller version of the problem so we break it down
17+
to its simplest form. This would be two items that we compare which merge into correct order. Then we repeat again until fully merged. The time complexity of this is
18+
O(N LOG(N))`,
19+
},
20+
{
21+
name: "Selection Sort",
22+
description: `In selection sort we set a min (first item by default). We itterate the list looking for a smaller min.
23+
If we get to the end of the list without finding another min we swap it. We continue this until all iterrations are done.
24+
The time complexity of this is
25+
O(N^2)`,
26+
},
27+
{
28+
name: "Insertion Sort",
29+
description: `Here we itterate through the array with a right pointer. If it the item before the right pointer is greater than we pass it back and swap it.
30+
We continue this until it the right pointer is in the correct position. The time complexity of this is
31+
O(N^2) `,
32+
},
33+
];

‎src/data/graphsInfo.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
export const graphsInfo = [
2+
{
3+
name: "General",
4+
description: `In this project you can visualize path finding algorithms.
5+
Each weighted node has a cost of 5 while non weighted node cost is 1. Below are some basic notes on each algorithm. To learn more
6+
about the implementation of the algorithms click the link below.`,
7+
link: "https://github.com/GaelGil/algorithm-visualizer/tree/main/src/pages/graphs/graphAlgorithms",
8+
},
9+
{
10+
name: "Breadth First Search (BFS)",
11+
description: `To implement BFS we use a queue and explore nodes in the order of the queue.
12+
This algorithm finds the shortest path but not necessarily the quicket path.
13+
This can be seen above when it goes through weighted graphs.
14+
Time complexity is O(V+E) where V is vertices (nodes) and E is edges. `,
15+
},
16+
{
17+
name: "Depth First Search (DFS)",
18+
description: `To implement BFS we use a stack and explore nodes in the order of the stack.
19+
This rarely if ever finds the shortest path.
20+
Because it explores depth wise it will stop until it cannot exlpore any further this can cause it to get lost in a path to nowhere.
21+
DFS is very similar to BFS except we use a stack instead of a queue.
22+
Time complexity is O(V+E)`,
23+
},
24+
{
25+
name: "Uniform Cost Search (UCS)",
26+
description: `To implement UCS we use a priority queue.
27+
UCS is similar to dijkstra however we dont find the shortest path to all nodes just the goal.
28+
UCS can be used for weighted and non weighted graphs. When a graph is not weighted UCS will act as BFS.
29+
When a graph is weighted UCS will find the shortest and least costly path. It does this using a priorityqueue
30+
prioritizing nodes that have a lower cost path`,
31+
},
32+
{
33+
name: "A* (Astar)",
34+
description: `A* algorithm is very similar to UCS however we use a heuristic to calculate how close we are to our goal.
35+
What we pass in to our priorityqueue is f = h + g. Where g is the total cost to the node and h is the approximate distance from
36+
the node to the destination. The priority here is the f value. This algorithm is an informed algorithm because we are using some
37+
information on the destination to guide us. This algorithm finds the least costly path. This also expands a less number of nodes
38+
them all the aobve
39+
`,
40+
},
41+
];

‎src/pages/Arrays.tsx‎

Lines changed: 5 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,13 @@ import { getMergeSortAnimations } from "../services/sortingAlgorithms/mergeSort"
33
import { getBubbleSortAnimations } from "../services/sortingAlgorithms/bubbleSort";
44
import { getInsertionSortAnimations } from "../services/sortingAlgorithms/insertionSort";
55
import { getSelectionSortAnimations } from "../services/sortingAlgorithms/selectionSort";
6+
import { randInts } from "../services/graphAlgorithms/helper";
7+
import { arraysInfo } from "../data/arraysInfo";
68
import "../css/Arrays.css";
79

810
const ANIMATION_SPEED_MS = 5;
911
const PRIMARY_COLOR = "green";
1012
const SECONDARY_COLOR = "red";
11-
const algorithmsInfo = [
12-
{
13-
name: "General",
14-
description: `Here you can visulize sorting algorithms. The array contains 50 items. Below are some basic notes on each algorithm. To learn more
15-
about the implementation of the algorithms click the link below.`,
16-
link: "https://en.wikipedia.org/wiki/Sorting_algorithm",
17-
},
18-
{
19-
name: "Bubble Sort",
20-
description: `Bubble sort goes through every element in the array comparing the current item to the one after it.
21-
If the current is greater than the next we swap them. We repeat this until were done. The time complexity of this is
22-
O(N^2)`,
23-
},
24-
{
25-
name: "Merge Sort",
26-
description: `In merge sort we split the array recursively. The idea is that we want to solve a smaller version of the problem so we break it down
27-
to its simplest form. This would be two items that we compare which merge into correct order. Then we repeat again until fully merged. The time complexity of this is
28-
O(N LOG(N))`,
29-
},
30-
{
31-
name: "Selection Sort",
32-
description: `In selection sort we set a min (first item by default). We itterate the list looking for a smaller min.
33-
If we get to the end of the list without finding another min we swap it. We continue this until all iterrations are done.
34-
The time complexity of this is
35-
O(N^2)`,
36-
},
37-
{
38-
name: "Insertion Sort",
39-
description: `Here we itterate through the array with a right pointer. If it the item before the right pointer is greater than we pass it back and swap it.
40-
We continue this until it the right pointer is in the correct position. The time complexity of this is
41-
O(N^2) `,
42-
},
43-
];
4413

4514
const Arrays = () => {
4615
const [array, setArray] = useState([]);
@@ -59,7 +28,7 @@ const Arrays = () => {
5928
};
6029

6130
// Function to start sorting visuals
62-
const startSorting = (animations) => {
31+
const startSorting = (animations: any[]) => {
6332
// Function to handle the animations for sorting algorithms
6433
const arrayBars = document.getElementsByClassName("array-bar"); // select the array bars html
6534
let current_animation = { compare: [] }; // we compare this to the first animation
@@ -96,7 +65,7 @@ const Arrays = () => {
9665
return animations.length * ANIMATION_SPEED_MS;
9766
};
9867

99-
const handleSubmit = (event) => {
68+
const handleSubmit = (event: React.ChangeEvent<HTMLInputElement>) => {
10069
let method = algorithm;
10170
let time = 0;
10271
disableButtons();
@@ -183,7 +152,7 @@ const Arrays = () => {
183152
<div className="container mt-5">
184153
<h2 className="mb-4 text-center">About Sorting Algorithms</h2>
185154
<div className="row">
186-
{algorithmsInfo.map((algo, index) => (
155+
{arraysInfo.map((algo, index) => (
187156
<div className="col-md-6 mb-4" key={index}>
188157
<div className="card h-100 shadow-sm">
189158
<div className="card-body">
@@ -212,9 +181,3 @@ const Arrays = () => {
212181
};
213182

214183
export default Arrays;
215-
216-
function randInts(min, max) {
217-
min = Math.ceil(min);
218-
max = Math.floor(max);
219-
return Math.floor(Math.random() * (max - min + 1)) + min;
220-
}

‎src/pages/Graphs.tsx‎

Lines changed: 2 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -5,48 +5,7 @@ import { BFS } from "../services/graphAlgorithms/bfs";
55
import { DFS } from "../services/graphAlgorithms/dfs";
66
import { ASTAR } from "../services/graphAlgorithms/astar";
77
import { conflict } from "../services/graphAlgorithms/helper";
8-
9-
const algorithmsInfo = [
10-
{
11-
name: "General",
12-
description: `In this project you can visualize path finding algorithms.
13-
Each weighted node has a cost of 5 while non weighted node cost is 1. Below are some basic notes on each algorithm. To learn more
14-
about the implementation of the algorithms click the link below.`,
15-
link: "https://github.com/GaelGil/algorithm-visualizer/tree/main/src/pages/graphs/graphAlgorithms",
16-
},
17-
{
18-
name: "Breadth First Search (BFS)",
19-
description: `To implement BFS we use a queue and explore nodes in the order of the queue.
20-
This algorithm finds the shortest path but not necessarily the quicket path.
21-
This can be seen above when it goes through weighted graphs.
22-
Time complexity is O(V+E) where V is vertices (nodes) and E is edges. `,
23-
},
24-
{
25-
name: "Depth First Search (DFS)",
26-
description: `To implement BFS we use a stack and explore nodes in the order of the stack.
27-
This rarely if ever finds the shortest path.
28-
Because it explores depth wise it will stop until it cannot exlpore any further this can cause it to get lost in a path to nowhere.
29-
DFS is very similar to BFS except we use a stack instead of a queue.
30-
Time complexity is O(V+E)`,
31-
},
32-
{
33-
name: "Uniform Cost Search (UCS)",
34-
description: `To implement UCS we use a priority queue.
35-
UCS is similar to dijkstra however we dont find the shortest path to all nodes just the goal.
36-
UCS can be used for weighted and non weighted graphs. When a graph is not weighted UCS will act as BFS.
37-
When a graph is weighted UCS will find the shortest and least costly path. It does this using a priorityqueue
38-
prioritizing nodes that have a lower cost path`,
39-
},
40-
{
41-
name: "A* (Astar)",
42-
description: `A* algorithm is very similar to UCS however we use a heuristic to calculate how close we are to our goal.
43-
What we pass in to our priorityqueue is f = h + g. Where g is the total cost to the node and h is the approximate distance from
44-
the node to the destination. The priority here is the f value. This algorithm is an informed algorithm because we are using some
45-
information on the destination to guide us. This algorithm finds the least costly path. This also expands a less number of nodes
46-
them all the aobve
47-
`,
48-
},
49-
];
8+
import { graphsInfo } from "../data/graphsInfo";
509

5110
const Graphs = () => {
5211
const [matrix, setMatrix] = useState([]);
@@ -292,7 +251,7 @@ const Graphs = () => {
292251
<div className="container mt-5">
293252
<h2 className="mb-4 text-center">About Pathfinding Algorithms</h2>
294253
<div className="row">
295-
{algorithmsInfo.map((algo, index) => (
254+
{graphsInfo.map((algo, index) => (
296255
<div className="col-md-6 mb-4" key={index}>
297256
<div className="card h-100 shadow-sm">
298257
<div className="card-body">

0 commit comments

Comments
 (0)