Skip to content

Commit fe67429

Browse files
joshiayushjoshiayush
committed
feat(visualizations): add interactive tabs to complexity analysis section
Signed-off-by: Ayush Joshi <ayush854032@gmail.com>
1 parent dceae64 commit fe67429

15 files changed

Lines changed: 1434 additions & 0 deletions

File tree

‎visualizations/arrays/best-time-to-buy-and-sell-stock/index.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ <h3>Max Profit</h3>
7979
<span>Best Sell Day</span>
8080
</div>
8181
</div>
82+
8283
</div>
8384

8485
<div class="code-panel">
@@ -106,6 +107,82 @@ <h3>Max Profit</h3>
106107
</div>
107108
</div>
108109
</div>
110+
111+
<div class="complexity-section">
112+
<input type="checkbox" id="complexity-toggle" class="complexity-toggle-input" checked>
113+
<label for="complexity-toggle" class="complexity-header">
114+
<span class="complexity-title">Complexity Analysis</span>
115+
<span class="complexity-icon"></span>
116+
</label>
117+
<div class="complexity-content">
118+
<input type="radio" id="tab-time" name="complexity-tab" class="complexity-tab-input" checked>
119+
<input type="radio" id="tab-space" name="complexity-tab" class="complexity-tab-input">
120+
<div class="complexity-columns">
121+
<div class="complexity-stats">
122+
<label for="tab-time" class="complexity-item">
123+
<span class="complexity-label">Time Complexity</span>
124+
<span class="complexity-value">O(n)</span>
125+
</label>
126+
<label for="tab-space" class="complexity-item">
127+
<span class="complexity-label">Space Complexity</span>
128+
<span class="complexity-value">O(1)</span>
129+
</label>
130+
</div>
131+
<div class="complexity-explanation">
132+
<div class="complexity-detail time-detail">
133+
<h4 class="detail-title">Time Complexity: <span class="big-o">O(n)</span></h4>
134+
<div class="detail-section">
135+
<div class="detail-section-title">Breakdown</div>
136+
<div class="detail-content">
137+
<ul class="detail-list">
138+
<li>Single iteration through n price values</li>
139+
<li>Each iteration: compute profit, update minimum</li>
140+
<li>Two comparisons per element: O(1)</li>
141+
<li>No nested loops or lookbacks</li>
142+
</ul>
143+
<div class="detail-formula">T(n) = n × O(1) = O(n)</div>
144+
</div>
145+
</div>
146+
<div class="detail-section">
147+
<div class="detail-section-title">Mathematical Intuition</div>
148+
<div class="detail-content">
149+
<p>The brute force checks all <code>n(n-1)/2</code> pairs (i, j) where i < j. The optimization: for any sell day j, the optimal buy day is <code>argmin(prices[0..j-1])</code>. Since this minimum only depends on previous elements, we track it incrementally—avoiding repeated scans.</p>
150+
</div>
151+
</div>
152+
<div class="detail-insight">
153+
<span class="detail-insight-label">Key Insight</span>
154+
<p>This is equivalent to finding the maximum difference between a peak and its preceding valley in a sequence—a classic prefix minimum pattern.</p>
155+
</div>
156+
</div>
157+
<div class="complexity-detail space-detail">
158+
<h4 class="detail-title">Space Complexity: <span class="big-o">O(1)</span></h4>
159+
<div class="detail-section">
160+
<div class="detail-section-title">Breakdown</div>
161+
<div class="detail-content">
162+
<ul class="detail-list">
163+
<li><code>minPrice</code>: tracks minimum seen so far</li>
164+
<li><code>maxProfit</code>: tracks best profit found</li>
165+
<li>No arrays or data structures allocated</li>
166+
<li>Input array is read-only</li>
167+
</ul>
168+
<div class="detail-formula">S(n) = O(1) — two scalar variables</div>
169+
</div>
170+
</div>
171+
<div class="detail-section">
172+
<div class="detail-section-title">Mathematical Intuition</div>
173+
<div class="detail-content">
174+
<p>We only need the running minimum, not the full prefix minimum array. This "online" property means we can process prices as a stream, discarding each value after extracting its information.</p>
175+
</div>
176+
</div>
177+
<div class="detail-insight">
178+
<span class="detail-insight-label">Key Insight</span>
179+
<p>The problem has the "prefix property": the answer at position j depends only on <code>prices[0..j]</code>, enabling single-pass processing with constant memory.</p>
180+
</div>
181+
</div>
182+
</div>
183+
</div>
184+
</div>
185+
</div>
109186
</div>
110187

111188
<script src="../../shared/js/visualizer.js"></script>

‎visualizations/arrays/hybrid-quick-sort/index.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ <h3>High</h3>
107107
<div class="pointer-item mid">&#9660; mid - current scan</div>
108108
<div class="pointer-item high">&#9650; high - boundary for &gt; pivot</div>
109109
</div>
110+
110111
</div>
111112

112113
<div class="code-panel">
@@ -170,6 +171,82 @@ <h3>High</h3>
170171
</div>
171172
</div>
172173
</div>
174+
175+
<div class="complexity-section">
176+
<input type="checkbox" id="complexity-toggle" class="complexity-toggle-input" checked>
177+
<label for="complexity-toggle" class="complexity-header">
178+
<span class="complexity-title">Complexity Analysis</span>
179+
<span class="complexity-icon"></span>
180+
</label>
181+
<div class="complexity-content">
182+
<input type="radio" id="tab-time" name="complexity-tab" class="complexity-tab-input" checked>
183+
<input type="radio" id="tab-space" name="complexity-tab" class="complexity-tab-input">
184+
<div class="complexity-columns">
185+
<div class="complexity-stats">
186+
<label for="tab-time" class="complexity-item">
187+
<span class="complexity-label">Time Complexity</span>
188+
<span class="complexity-value">O(n log n) avg</span>
189+
</label>
190+
<label for="tab-space" class="complexity-item">
191+
<span class="complexity-label">Space Complexity</span>
192+
<span class="complexity-value">O(log n)</span>
193+
</label>
194+
</div>
195+
<div class="complexity-explanation">
196+
<div class="complexity-detail time-detail">
197+
<h4 class="detail-title">Time Complexity: <span class="big-o">O(n log n)</span> average</h4>
198+
<div class="detail-section">
199+
<div class="detail-section-title">Breakdown</div>
200+
<div class="detail-content">
201+
<ul class="detail-list">
202+
<li>Partition: O(n) — single pass through subarray</li>
203+
<li>Recursion depth: O(log n) expected with random pivot</li>
204+
<li>Total work per level: O(n)</li>
205+
<li>Worst case: O(n²) when pivot is always min/max</li>
206+
</ul>
207+
<div class="detail-formula">T(n) = 2T(n/2) + O(n) → O(n log n) by Master theorem</div>
208+
</div>
209+
</div>
210+
<div class="detail-section">
211+
<div class="detail-section-title">Mathematical Intuition</div>
212+
<div class="detail-content">
213+
<p>Random pivot selection ensures that with high probability, each partition divides the array into reasonably balanced parts. Three-way partitioning handles duplicates by grouping equal elements together—excluded from recursion. For arrays with k distinct values, runtime approaches O(n log k).</p>
214+
</div>
215+
</div>
216+
<div class="detail-insight">
217+
<span class="detail-insight-label">Key Insight</span>
218+
<p>The DNF partition transforms the O(n²) duplicate-heavy worst case into O(n) by processing all equal elements in one partition step.</p>
219+
</div>
220+
</div>
221+
<div class="complexity-detail space-detail">
222+
<h4 class="detail-title">Space Complexity: <span class="big-o">O(log n)</span></h4>
223+
<div class="detail-section">
224+
<div class="detail-section-title">Breakdown</div>
225+
<div class="detail-content">
226+
<ul class="detail-list">
227+
<li>Recursion stack depth: O(log n) average</li>
228+
<li>Each stack frame: O(1) local variables</li>
229+
<li>In-place partitioning: no auxiliary arrays</li>
230+
<li>Worst case: O(n) with pathological pivots</li>
231+
</ul>
232+
<div class="detail-formula">S(n) = O(log n) — recursion stack only</div>
233+
</div>
234+
</div>
235+
<div class="detail-section">
236+
<div class="detail-section-title">Mathematical Intuition</div>
237+
<div class="detail-content">
238+
<p>Unlike merge sort (O(n) auxiliary space), quicksort partitions in-place. Space is dominated by the call stack. Tail-call optimization on the larger partition can guarantee O(log n) stack depth even in the worst case.</p>
239+
</div>
240+
</div>
241+
<div class="detail-insight">
242+
<span class="detail-insight-label">Key Insight</span>
243+
<p>Introsort (used in std::sort) switches to heapsort when recursion exceeds 2⌊log n⌋, guaranteeing O(n log n) worst-case while preserving quicksort's cache efficiency.</p>
244+
</div>
245+
</div>
246+
</div>
247+
</div>
248+
</div>
249+
</div>
173250
</div>
174251

175252
<script src="../../shared/js/visualizer.js"></script>

‎visualizations/arrays/kth-largest-element/index.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ <h3>Result</h3>
9999
<span>Extracted</span>
100100
</div>
101101
</div>
102+
102103
</div>
103104

104105
<div class="code-panel">
@@ -141,6 +142,82 @@ <h3>Result</h3>
141142
</div>
142143
</div>
143144
</div>
145+
146+
<div class="complexity-section">
147+
<input type="checkbox" id="complexity-toggle" class="complexity-toggle-input" checked>
148+
<label for="complexity-toggle" class="complexity-header">
149+
<span class="complexity-title">Complexity Analysis</span>
150+
<span class="complexity-icon"></span>
151+
</label>
152+
<div class="complexity-content">
153+
<input type="radio" id="tab-time" name="complexity-tab" class="complexity-tab-input" checked>
154+
<input type="radio" id="tab-space" name="complexity-tab" class="complexity-tab-input">
155+
<div class="complexity-columns">
156+
<div class="complexity-stats">
157+
<label for="tab-time" class="complexity-item">
158+
<span class="complexity-label">Time Complexity</span>
159+
<span class="complexity-value">O(n + k log n)</span>
160+
</label>
161+
<label for="tab-space" class="complexity-item">
162+
<span class="complexity-label">Space Complexity</span>
163+
<span class="complexity-value">O(n)</span>
164+
</label>
165+
</div>
166+
<div class="complexity-explanation">
167+
<div class="complexity-detail time-detail">
168+
<h4 class="detail-title">Time Complexity: <span class="big-o">O(n + k log n)</span></h4>
169+
<div class="detail-section">
170+
<div class="detail-section-title">Breakdown</div>
171+
<div class="detail-content">
172+
<ul class="detail-list">
173+
<li>Build max-heap (heapify): O(n) via Floyd's algorithm</li>
174+
<li>Extract max k times: k × O(log n) sift-down</li>
175+
<li>Total: O(n) + O(k log n) = O(n + k log n)</li>
176+
<li>When k = 1: O(n), when k = n: O(n log n)</li>
177+
</ul>
178+
<div class="detail-formula">T(n,k) = O(n) + k × O(log n) = O(n + k log n)</div>
179+
</div>
180+
</div>
181+
<div class="detail-section">
182+
<div class="detail-section-title">Mathematical Intuition</div>
183+
<div class="detail-content">
184+
<p>Floyd's heapify is O(n), not O(n log n), because most nodes are near leaves with small subtrees. The sum <code>Σ h(i)</code> over all nodes (where h(i) is height) equals n - ⌊log n⌋ - 1, not n log n. Each extraction removes the root and restores heap property in O(log n).</p>
185+
</div>
186+
</div>
187+
<div class="detail-insight">
188+
<span class="detail-insight-label">Key Insight</span>
189+
<p>For k << n, heap selection beats sorting. QuickSelect offers O(n) expected time but O(n²) worst-case without median-of-medians.</p>
190+
</div>
191+
</div>
192+
<div class="complexity-detail space-detail">
193+
<h4 class="detail-title">Space Complexity: <span class="big-o">O(n)</span></h4>
194+
<div class="detail-section">
195+
<div class="detail-section-title">Breakdown</div>
196+
<div class="detail-content">
197+
<ul class="detail-list">
198+
<li>Heap array: stores all n elements</li>
199+
<li>In-place heapify possible: O(1) extra</li>
200+
<li>If input must be preserved: O(n) copy</li>
201+
<li>Sift operations: O(1) temporary variables</li>
202+
</ul>
203+
<div class="detail-formula">S(n) = O(n) for heap storage (or O(1) if in-place)</div>
204+
</div>
205+
</div>
206+
<div class="detail-section">
207+
<div class="detail-section-title">Mathematical Intuition</div>
208+
<div class="detail-content">
209+
<p>A binary heap is stored as a complete binary tree in an array: parent at index i has children at 2i+1 and 2i+2. This implicit structure requires no pointer overhead. If modifying the input is allowed, heapify is in-place with O(1) auxiliary space.</p>
210+
</div>
211+
</div>
212+
<div class="detail-insight">
213+
<span class="detail-insight-label">Key Insight</span>
214+
<p>Alternative: use a min-heap of size k to find kth largest in O(n log k) time and O(k) space—better when k << n.</p>
215+
</div>
216+
</div>
217+
</div>
218+
</div>
219+
</div>
220+
</div>
144221
</div>
145222

146223
<script src="../../shared/js/visualizer.js"></script>

0 commit comments

Comments
 (0)