webdevpuneet.com

Related Snippets

64 in Visualizers category
2–7 of 60

Big-O Complexity Growth Visualizer

Quadtree Spatial Partitioning Visualizer

Sliding Window Two-Pointer Visualizer (Longest Substring Without Repeats)

Flex Grow and Shrink Space Distribution Visualizer

Promise.all vs allSettled vs race vs any Visualizer

Huffman Coding Tree Visualizer

Big-O Complexity Growth Visualizer — Free Interactive Chart and Calculator

Big-O Complexity Growth Visualizer · Visualizers · Plain HTML, CSS & JS · Live preview

CategoryVisualizers
TagsSVGAccessibilityCSS Grid

Copy & paste

Source Code

<div class="bo">
  <div class="bo-top">
    <div>
      <h2>How fast does the work grow?</h2>
      <p>Operation counts for common complexity classes, and how long they take at one million simple operations per second.</p>
    </div>
    <label class="bo-n">n = <output id="boNOut"></output>
      <input type="range" id="boN" min="1" max="60" value="20" aria-label="Input size n">
    </label>
  </div>
  <div class="bo-grid">
    <svg id="boSvg" viewBox="0 0 560 340" role="img" aria-label="Growth curves"></svg>
    <table class="bo-table">
      <thead><tr><th>Class</th><th>Example</th><th>Ops at n</th><th>Time</th></tr></thead>
      <tbody id="boRows"></tbody>
    </table>
  </div>
  <div class="bo-scale">
    <span>Big inputs:</span>
    <button type="button" data-n="1000">n = 1,000</button>
    <button type="button" data-n="1000000">n = 1,000,000</button>
    <button type="button" data-n="1000000000">n = 10⁹</button>
    <div id="boBig" class="bo-big" aria-live="polite"></div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Six complexity classes
From O(1) to O(2ⁿ).
Log-scale chart
All curves visible at once.
Live n marker
Dots and labels on each curve.
Operation counts
Formatted with scientific notation for huge values.
Human-readable times
Microseconds to years.
Big-input comparisons
One click for n = 10⁶ and 10⁹.
Example per class
A concrete operation for each.
No libraries
Hand-built SVG chart.

About this UI Snippet

Big-O Notation — What the Growth Classes Mean in Real Time

Screenshot of the Big-O Complexity Growth Visualizer snippet rendered live

Big-O notation describes how the amount of work an algorithm does grows as its input grows. It's easy to memorise "O(n log n) is better than O(n²)", and much more convincing to see how large the gap becomes. This visualizer plots six common complexity classes and translates their operation counts into time.

Log scale, on purpose

The y-axis is logarithmic: each gridline is a thousand times the previous one. On a linear axis, O(2ⁿ) shoots off the chart by n ≈ 20 and flattens every other curve against the floor. On a log axis you can see all six at once — and notice that O(2ⁿ) is a straight line, which is exactly what exponential growth looks like on a log scale.

From operations to seconds

The table converts each class into operations for the chosen n and into time, assuming a million simple operations per second. That's a deliberately simple model: real code has constant factors and caches, but the ranking and the order of magnitude hold. Rows that take over a second turn red.

The big-input buttons

At n = 1,000,000 an O(n log n) sort finishes in about 20 seconds under this model, while an O(n²) algorithm needs around 11 days. At n = 10⁹ the gap becomes the difference between hours and tens of thousands of years. This is why the choice of algorithm dominates micro-optimisation for large inputs.

Examples per class

Each row names a typical operation: constant time for array indexing, logarithmic for binary search, linear for a single loop, n log n for efficient sorting, quadratic for comparing every pair, and exponential for trying every subset.

What Big-O leaves out

Big-O ignores constant factors and lower-order terms. For small n, a "worse" algorithm with a tiny constant can win — which is why sorting libraries switch to insertion sort for short arrays.

Step by step

How to Use

  1. 1
    Drag nFrom 1 to 60; the dashed line and dots move along every curve.
  2. 2
    Read the tableOperation counts and time at 10⁶ operations per second.
  3. 3
    Watch rows turn redAnything over a second is highlighted.
  4. 4
    Try big inputsButtons compute times for n = 1,000, 10⁶ and 10⁹.
  5. 5
    Note the straight lineExponential growth is linear on a log axis.

Real-world uses

Common Use Cases

Building Big-O intuition
Drag n and watch six growth rates diverge on a log-scale chart, so the gap between O(n log n) and O(n squared) becomes obvious instead of memorised.
Big-O interview explanations
Explain trade-offs with real numbers, using operation counts and running times at one million operations per second, even at n equal to a billion.
Classroom demonstrations
Show a class why algorithm choice matters, with dots and labels on each curve marking exactly where the chosen n falls.
Code review justification
Make the case for replacing a nested loop with evidence, showing how counts formatted in scientific notation reveal exponential blow-up.
Feasibility estimates
Judge whether an approach will finish for a given input size, reading real running times rather than guessing from the notation alone.
Related: Sorting Algorithm Visualizer
O(n²) and O(n log n) sorts in action: Sorting Algorithm Visualizer.
Related: Sliding Window Visualizer
Turning O(n²) into O(n): Sliding Window Two-Pointer Visualizer.

Got questions?

Frequently Asked Questions

It describes an upper bound on how an algorithm's work grows with input size n, ignoring constant factors and lower-order terms. O(n) means the work grows proportionally to n; O(n²) means doubling n roughly quadruples the work.

Exponential and quadratic growth become so large that on a linear axis every slower-growing curve looks flat. A log scale compresses large values so all classes can be compared, and it shows exponential growth as a straight line.

Only by a factor of log n, which is about 20 for a million items and 30 for a billion. That's why efficient sorting is practical even for very large inputs.

Not for small inputs. Constant factors, memory access patterns and overhead can make an O(n²) algorithm faster than an O(n log n) one for small n. Big-O describes how cost scales, not the cost at one size.

It is a simple teaching model. Modern CPUs do far more basic operations per second, but real algorithms do more work per step. The comparison between classes, not the absolute time, is the point.