Algorithm Visualizer

ソート、グラフ、木のアルゴリズムとデータ構造をステップごとに視覚化。
Comparisons:0
Swaps:0
Array size:0
Pseudocode — Bubble Sort
1for i = 0 to n-1:
2  for j = 0 to n-1-i:
3    if arr[j] > arr[j+1]:
4      swap(arr[j], arr[j+1])
5  mark arr[n-1-i] as sorted
Time Complexity

Repeatedly swaps adjacent elements if they are in the wrong order.

Best CaseO(n)
Average CaseO(n²)
Worst CaseO(n²)
SpaceO(1)
StableYes
Legend
Default
Comparing
Swapping
Sorted

Visual Steps

Watch each comparison, swap, and sorted element highlighted in real time.

Multiple Algorithms

Bubble, Selection, Insertion, Merge, and Quick Sort side by side.

Speed Control

Adjust animation speed from 1ms to 200ms per step with a slider.

Array Customization

Change array size from 10 to 100 elements and regenerate randomly.

Algorithm Visualizerについて

The Algorithm Visualizer animates five classic sorting algorithms — Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, and Quick Sort — step by step using a live bar chart. Each comparison is highlighted in yellow, each swap in red, and each sorted element in green, making it easy to develop an intuitive understanding of how the algorithm progresses. A pseudocode panel highlights the currently executing line in sync with the animation. A complexity panel shows the best, average, and worst-case time complexity and space complexity for the selected algorithm. You can adjust the array size (10–100 elements), control animation speed (1–200 ms per step), pause at any point, and step through individual operations manually. This makes it an ideal study companion for computer science students, developers preparing for technical interviews, and educators teaching algorithms interactively.

Algorithm Visualizerの使い方

  1. Select a sorting algorithm from the dropdown — start with Bubble Sort to understand the basics before moving to more efficient algorithms.
  2. Adjust the array Size slider to choose how many bars to sort — fewer bars (10–20) make individual steps easier to follow.
  3. Set the Speed slider: lower values (1–10 ms) make the animation faster; higher values (100–200 ms) slow it down for detailed analysis.
  4. Click Generate to create a new random array, then click Start to begin the animation.
  5. Click Pause at any time, then use the Step button to advance one operation at a time while reading the highlighted pseudocode.
  6. Compare the Comparisons and Swaps counters to understand how the algorithm's efficiency relates to its theoretical Big O complexity.

よくある質問

What is the most important sorting algorithm to learn?

Quick Sort is arguably the most important to understand deeply — it is the basis for most real-world sorting implementations (including JavaScript's Array.sort() and Python's sorted()). It achieves O(n log n) average performance in-place. Merge Sort is equally important for its guaranteed O(n log n) worst case and stability.

Why does Bubble Sort have O(n²) complexity?

Bubble Sort uses two nested loops — the outer loop runs n-1 times and the inner loop also runs up to n-1 times, resulting in approximately n² comparisons. For 100 elements that's 10,000 operations; for 10,000 elements that's 100,000,000. This quadratic growth makes it impractical for large datasets.

What does "stable" mean for a sorting algorithm?

A stable sort preserves the relative order of equal elements. For example, if you sort a list of names by last name and two people have the same last name, a stable sort guarantees they remain in their original order. Merge Sort, Insertion Sort, and Tim Sort are stable; Quick Sort and Heap Sort are not.

When would you use Insertion Sort over Quick Sort?

Insertion Sort is O(n) on nearly-sorted data, making it faster than Quick Sort for small arrays (typically under 10–20 elements). That is why Tim Sort (used by Python and Java) uses Insertion Sort for small subarrays and Merge Sort for larger ones — combining their strengths.

How does Merge Sort achieve O(n log n) in the worst case?

Merge Sort always divides the array in half (log n levels of recursion) and merges each level in O(n) time, giving exactly O(n log n) regardless of the input order. Its main downside is O(n) extra space for the temporary merge buffers.

Algorithm Visualizerの完全ガイド：無料オンラインツール

ブラウザ完結で安全・高速なAlgorithm Visualizer。開発者やクリエイターの作業を効率化

ソート、グラフ、木のアルゴリズムとデータ構造をステップごとに視覚化。を瞬時に実現する無料ツールです。面倒なソフトのインストールは不要で、安全にブラウザ上で処理できます。

Algorithm Visualizerが選ばれる理由

  • 高速処理: ミリ秒単位で即時実行。
  • プライバシー保護: データは端末外に送信されません。
  • 完全無料: 登録不要で制限なく利用可能。

簡単な3つの利用手順

  1. Algorithm Visualizerのページを開きます。
  2. データを入力または貼り付けます。
  3. 結果を確認してコピーまたは保存します。

機能比較

項目 Metoolzy Algorithm Visualizer 他社オンラインツール 専用ソフト
料金 完全無料 制限あり 有料ライセンス
セキュリティ 完全ローカル処理 サーバー送信あり ローカル処理

主な活用シーン

  • エンジニアの開発・デバッグ効率化
  • Web制作者の日常作業
  • データ変換・最適化

よくある質問 (FAQ)

入力したデータは保存されますか？

いいえ、すべてブラウザ内で処理され保存されません。