RajaATAli · RajaATAli · Dec 16, 2023 · Nov 25, 2023 · Nov 25, 2023 · Nov 25, 2023
diff --git a/Web-Visualization/Algorithmvis.html b/Web-Visualization/Algorithmvis.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Algorithm Visualizations</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script src="https://d3js.org/d3.v6.min.js"></script>
+</head>
+<body>
+    <header>
+        <h1>Sorting Algorithm Visualizer</h1>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="notes.html">Notes</a></li>
+                <li><a href="visualizations.html">Data Structures Visualizations</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+      <iframe src="sorting-visualizer/index.html" width="1400px" height="800px"></iframe>
+    </main>
+    <footer>
+        <p>Created by Raja Allmdar Tariq Ali - CSCI 240 TA</p>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Web-Visualization/Data-Structures/.DS_Store b/Web-Visualization/Data-Structures/.DS_Store
diff --git a/Web-Visualization/Data-Structures/Array/index.html b/Web-Visualization/Data-Structures/Array/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Array Visualization</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script src="https://d3js.org/d3.v6.min.js"></script>
+</head>
+<body>
+  <div id="controls">
+    <input type="number" id="newValue" placeholder="Value">
+    <input type="number" id="newIndex" placeholder="Index">
+    <button id="addElement">Add Element</button>
+    <button id="removeElement">Remove Element</button>
+</div>
+    <!-- The visualization will be appended here by D3.js -->
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Web-Visualization/Data-Structures/Array/script.js b/Web-Visualization/Data-Structures/Array/script.js
@@ -0,0 +1,128 @@
+document.addEventListener('DOMContentLoaded', function() {
+  let arrayData = [5, 10, 15, 20, 25, 30, 35, 40];
+
+  // Functions to add and remove elements
+  function addElement() {
+    const value = parseInt(document.getElementById('newValue').value, 10);
+    const index = parseInt(document.getElementById('newIndex').value, 10);
+
+    // Check if the index is valid
+    if (isNaN(index) || index < 0 || index > arrayData.length) {
+      alert("Invalid index. Please enter a valid index.");
+      return;
+    }
+
+    // Check if the value is valid
+    if (isNaN(value)) {
+      alert("Please enter a valid number.");
+      return;
+    }
+
+    // Add element at the specified index
+    arrayData.splice(index, 0, value);
+    updateArray();
+  }
+
+  function removeElement() {
+    arrayData.pop();
+    updateArray();
+  }
+
+  // Update array visualization
+  function updateArray() {
+    // Adjust SVG container size based on array length
+    svg.attr('width', arrayData.length * (barWidth + barSpacing));
+
+    // Update the bars (elements)
+    const bars = svg.selectAll('rect').data(arrayData);
+    bars.enter()
+        .append('rect')
+        .merge(bars)
+        .transition()
+        .duration(500)
+        .attr('x', (d, i) => i * (barWidth + barSpacing))
+        .attr('y', 20)
+        .attr('width', barWidth)
+        .attr('height', 30)
+        .attr('fill', '#4CAF50');
+    bars.exit().remove();
+
+    // Update text labels (values)
+    const values = svg.selectAll('.value').data(arrayData);
+    values.enter()
+        .append('text')
+        .attr('class', 'value')
+        .merge(values)
+        .transition()
+        .duration(500)
+        .text(d => d)
+        .attr('x', (d, i) => i * (barWidth + barSpacing) + barWidth / 2)
+        .attr('y', 40)
+        .attr('text-anchor', 'middle');
+    values.exit().remove();
+
+    // Update index labels (indexes)
+    const indexes = svg.selectAll('.index').data(arrayData);
+    indexes.enter()
+        .append('text')
+        .attr('class', 'index')
+        .merge(indexes)
+        .transition()
+        .duration(500)
+        .text((d, i) => `Index ${i}`)
+        .attr('x', (d, i) => i * (barWidth + barSpacing) + barWidth / 2)
+        .attr('y', 70)
+        .attr('text-anchor', 'middle');
+    indexes.exit().remove();
+}
+
+
+  // Event listeners for buttons
+  document.getElementById('addElement').addEventListener('click', addElement);
+  document.getElementById('removeElement').addEventListener('click', removeElement);
+
+
+  // SVG container dimensions
+  const width = 500;
+  const barWidth = 50;
+  const barSpacing = 10;
+  const height = 100;
+
+  // Create SVG container
+  const svg = d3.select('body').append('svg')
+                .attr('width', width)
+                .attr('height', height);
+
+  // Create bars (elements)
+  svg.selectAll('rect')
+     .data(arrayData)
+     .enter()
+     .append('rect')
+     .attr('x', (d, i) => i * (barWidth + barSpacing))
+     .attr('y', 20)
+     .attr('width', barWidth)
+     .attr('height', 30)
+     .attr('fill', '#4CAF50');
+
+  // Add text labels (values)
+  svg.selectAll('.value')
+     .data(arrayData)
+     .enter()
+     .append('text')
+     .attr('class', 'value')
+     .text(d => d)
+     .attr('x', (d, i) => i * (barWidth + barSpacing) + barWidth / 2)
+     .attr('y', 40)
+     .attr('text-anchor', 'middle');
+
+  // Add index labels (indexes)
+  svg.selectAll('.index')
+     .data(arrayData)
+     .enter()
+     .append('text')
+     .attr('class', 'index')
+     .text((d, i) => `Index ${i}`)
+     .attr('x', (d, i) => i * (barWidth + barSpacing) + barWidth / 2)
+     .attr('y', 70)
+     .attr('text-anchor', 'middle');
+});
diff --git a/Web-Visualization/Data-Structures/Array/style.css b/Web-Visualization/Data-Structures/Array/style.css
@@ -0,0 +1,21 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+
+svg {
+  border: 1px solid black;
+}
+
+#controls {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+button {
+  margin: 0 10px;
+  padding: 5px 15px;
+}
diff --git a/Web-Visualization/Data-Structures/Binary-Tree/index.html b/Web-Visualization/Data-Structures/Binary-Tree/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script src="https://d3js.org/d3.v6.min.js"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Binary Search Tree Visualization</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="bstContainer">
+    <input type="number" id="bstInput" placeholder="Enter value">
+    <button onclick="insertNode()">Insert Node</button>
+    <button onclick="deleteNode()">Delete Node</button>
+    <button onclick="searchNode()">Search Node</button>
+    <button onclick="highlightMin()">Find Min</button>
+    <button onclick="highlightMax()">Find Max</button>
+    <button onclick="resetAndTraverse(traverseInOrder)">In-Order Traversal</button>
+    <button onclick="resetAndTraverse(traversePreOrder)">Pre-Order Traversal</button>
+    <button onclick="resetAndTraverse(traversePostOrder)">Post-Order Traversal</button>
+
+    </div>
+    <script src="script.js"></script>
+    <div id="message"></div>
+</body>
+</html>