podsni/algorithm-animator
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Graph Algorithms - Algorithm Animator</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>12 <style>13 body {14 background-color: #0f172a;15 color: #e2e8f0;16 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;17 }18 19 .algorithm-selector {20 background-color: #1e293b;21 border-radius: 8px;22 transition: all 0.3s ease;23 }24 25 .algorithm-selector:hover {26 background-color: #334155;27 }28 29 .active-algorithm {30 background-color: #334155;31 border-left: 4px solid #34d399;32 }33 34 .visualization-area {35 background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);36 border-radius: 12px;37 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);38 }39 40 .node {41 fill: #60a5fa;42 stroke: #93c5fd;43 stroke-width: 2px;44 transition: all 0.3s ease;45 }46 47 .node.visited {48 fill: #34d399;49 stroke: #6ee7b7;50 }51 52 .node.current {53 fill: #fbbf24;54 stroke: #fcd34d;55 }56 57 .edge {58 stroke: #64748b;59 stroke-width: 2;60 }61 62 .edge.visited {63 stroke: #34d399;64 stroke-width: 3;65 }66 67 .edge.current {68 stroke: #fbbf24;69 stroke-width: 3;70 }71 72 .code-block {73 background-color: #1e293b;74 border-left: 4px solid #34d399;75 font-family: 'Fira Code', monospace;76 }77 78 .complexity-badge {79 background-color: #334155;80 }81 </style>82</head>83<body class="min-h-screen">84 <!-- Navigation -->85 <nav class="bg-slate-900 border-b border-slate-700 sticky top-0 z-50">86 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">87 <div class="flex items-center justify-between h-16">88 <div class="flex items-center">89 <div class="flex-shrink-0 flex items-center">90 <i data-feather="cpu" class="text-blue-400 mr-2"></i>91 <span class="font-bold text-xl text-white">Algorithm Animator</span>92 </div>93 <div class="hidden md:block">94 <div class="ml-10 flex items-baseline space-x-4">95 <a href="index.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>96 <a href="sorting.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Sorting</a>97 <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium">Graph Algorithms</a>98 <a href="dynamic.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dynamic Programming</a>99 </div>100 </div>101 </div>102 </div>103 </div>104 </nav>105 106 <!-- Main Content -->107 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">108 <div class="text-center mb-10">109 <h1 class="text-3xl font-extrabold text-white sm:text-4xl">110 Graph Algorithms Visualization111 </h1>112 <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300">113 Explore fundamental graph algorithms through interactive visualizations114 </p>115 </div>116 117 <div class="flex flex-col lg:flex-row gap-8">118 <!-- Algorithm Selection Panel -->119 <div class="lg:w-1/4">120 <div class="bg-slate-800 rounded-lg p-6 sticky top-24">121 <h2 class="text-xl font-bold text-white mb-4">Graph Algorithms</h2>122 <div class="space-y-3">123 <div class="algorithm-selector p-4 cursor-pointer active-algorithm">124 <h3 class="font-medium text-white">Breadth-First Search</h3>125 <p class="text-sm text-gray-300 mt-1">Level-order traversal algorithm</p>126 </div>127 <div class="algorithm-selector p-4 cursor-pointer">128 <h3 class="font-medium text-white">Depth-First Search</h3>129 <p class="text-sm text-gray-300 mt-1">Recursive traversal algorithm</p>130 </div>131 <div class="algorithm-selector p-4 cursor-pointer">132 <h3 class="font-medium text-white">Dijkstra's Algorithm</h3>133 <p class="text-sm text-gray-300 mt-1">Shortest path in weighted graphs</p>134 </div>135 <div class="algorithm-selector p-4 cursor-pointer">136 <h3 class="font-medium text-white">Prim's Algorithm</h3>137 <p class="text-sm text-gray-300 mt-1">Minimum spanning tree</p>138 </div>139 <div class="algorithm-selector p-4 cursor-pointer">140 <h3 class="font-medium text-white">Kruskal's Algorithm</h3>141 <p class="text-sm text-gray-300 mt-1">Minimum spanning forest</p>142 </div>143 </div>144 145 <div class="mt-8">146 <h3 class="font-medium text-white mb-3">Controls</h3>147 <div class="grid grid-cols-2 gap-3">148 <button class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded">149 Play150 </button>151 <button class="bg-slate-700 hover:bg-slate-600 text-white py-2 px-4 rounded">152 Pause153 </button>154 <button class="bg-slate-700 hover:bg-slate-600 text-white py-2 px-4 rounded">155 Reset156 </button>157 <button class="bg-slate-700 hover:bg-slate-600 text-white py-2 px-4 rounded">158 Step159 </button>160 </div>161 </div>162 163 <div class="mt-8">164 <h3 class="font-medium text-white mb-3">Graph Type</h3>165 <select class="w-full bg-slate-700 text-white rounded p-2">166 <option>Undirected Graph</option>167 <option>Directed Graph</option>168 <option>Weighted Graph</option>169 </select>170 </div>171 </div>172 </div>173 174 <!-- Visualization Area -->175 <div class="lg:w-3/4">176 <div class="visualization-area p-6 rounded-xl">177 <div class="flex justify-between items-center mb-6">178 <h2 class="text-2xl font-bold text-white">Breadth-First Search Visualization</h2>179 <div class="flex space-x-3">180 <div class="complexity-badge px-3 py-1 rounded-full text-sm">181 Time: O(V + E)182 </div>183 <div class="complexity-badge px-3 py-1 rounded-full text-sm">184 Space: O(V)185 </div>186 </div>187 </div>188 189 <!-- Graph Visualization -->190 <div class="mb-8">191 <div class="bg-slate-800 rounded-lg p-6 h-96 flex items-center justify-center">192 <!-- SVG Graph Visualization -->193 <svg width="100%" height="100%" viewBox="0 0 600 300">194 <!-- Edges -->195 <line x1="100" y1="150" x2="200" y2="100" class="edge visited"></line>196 <line x1="200" y1="100" x2="300" y2="150" class="edge current"></line>197 <line x1="300" y1="150" x2="400" y2="100" class="edge"></line>198 <line x1="100" y1="150" x2="200" y2="200" class="edge"></line>199 <line x1="200" y1="200" x2="300" y2="150" class="edge visited"></line>200 <line x1="300" y1="150" x2="400" y2="200" class="edge"></line>201 202 <!-- Nodes -->203 <circle cx="100" cy="150" r="20" class="node visited"></circle>204 <circle cx="200" cy="100" r="20" class="node visited"></circle>205 <circle cx="300" cy="150" r="20" class="node current"></circle>206 <circle cx="400" cy="100" r="20" class="node"></circle>207 <circle cx="200" cy="200" r="20" class="node visited"></circle>208 <circle cx="400" cy="200" r="20" class="node"></circle>209 210 <!-- Node Labels -->211 <text x="100" y="155" text-anchor="middle" class="text-white font-bold">A</text>212 <text x="200" y="105" text-anchor="middle" class="text-white font-bold">B</text>213 <text x="300" y="155" text-anchor="middle" class="text-white font-bold">C</text>214 <text x="400" y="105" text-anchor="middle" class="text-white font-bold">D</text>215 <text x="200" y="205" text-anchor="middle" class="text-white font-bold">E</text>216 <text x="400" y="205" text-anchor="middle" class="text-white font-bold">F</text>217 </svg>218 </div>219 </div>220 221 <!-- Current Step Description -->222 <div class="bg-slate-800 rounded-lg p-4 mb-6">223 <h3 class="font-bold text-white mb-2">Current Step</h3>224 <p class="text-gray-300">Visiting node C. Adding its unvisited neighbors D and F to the queue.</p>225 </div>226 227 <!-- Queue Visualization -->228 <div class="bg-slate-800 rounded-lg p-4 mb-6">229 <h3 class="font-bold text-white mb-2">BFS Queue</h3>230 <div class="flex space-x-2">231 <div class="bg-blue-500 px-3 py-1 rounded">D</div>232 <div class="bg-blue-500 px-3 py-1 rounded">F</div>233 <div class="bg-gray-700 px-3 py-1 rounded text-gray-400">Empty</div>234 <div class="bg-gray-700 px-3 py-1 rounded text-gray-400">Empty</div>235 </div>236 </div>237 238 <!-- Pseudocode -->239 <div class="code-block p-4 rounded mb-6">240 <h3 class="font-bold text-white mb-2">Pseudocode</h3>241 <pre class="text-green-400 text-sm">242BFS(graph, start):243 queue = [start]244 visited = set([start])245 246 while queue:247 node = queue.pop(0)248 process(node)249 250 for neighbor in graph[node]:251 if neighbor not in visited:252 visited.add(neighbor)253 queue.append(neighbor)</pre>254 </div>255 256 <!-- Mathematical Explanation -->257 <div class="bg-slate-800 rounded-lg p-4">258 <h3 class="font-bold text-white mb-3">Mathematical Analysis</h3>259 <div class="math-display text-green-300">260 \( \text{Time Complexity: } O(V + E) \)261 </div>262 <p class="text-gray-300 mt-3">263 BFS visits each vertex exactly once and examines each edge exactly twice 264 (once from each endpoint in undirected graphs). Therefore, the time complexity 265 is proportional to the sum of vertices and edges.266 </p>267 <div class="math-display text-green-300">268 \( \text{Space Complexity: } O(V) \)269 </div>270 <p class="text-gray-300 mt-3">271 The space complexity is determined by the maximum size of the queue, which 272 can contain at most \( V-1 \) vertices in the worst case (when all but one 273 vertex are at the same level of the BFS tree).274 </p>275 </div>276 </div>277 </div>278 </div>279 </div>280 281 <!-- Footer -->282 <footer class="bg-slate-900 border-t border-slate-800 mt-12">283 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">284 <div class="md:flex md:items-center md:justify-between">285 <div class="flex justify-center md:justify-start">286 <div class="flex items-center">287 <i data-feather="cpu" class="text-blue-400 mr-2"></i>288 <span class="text-white font-bold">Algorithm Animator</span>289 </div>290 </div>291 <div class="mt-8 md:mt-0 md:order-1">292 <p class="text-center text-base text-gray-400">293 © 2023 Algorithm Animator. All rights reserved.294 </p>295 </div>296 </div>297 </div>298 </footer>299 300 <script>301 feather.replace();302 </script>303</body>304</html>305