ToolSegment TreeLazy Propagation
More ▼

Segment Tree Visualizer

Select Segment Tree Type:-

1x

▼ Update Index

▶ Range Query

▶ Range Update

Interactive Segment Tree Visualizer & Simulator

Welcome to the ultimate Segment Tree Visualizer—an interactive tool designed to help developers, students, and competitive programmers master range-based queries and update algorithms. This simulator renders the entire tree hierarchy using D3.js, letting you watch the internal mechanics of divide-and-conquer tree builds, point updates, and lazy propagation range updates step-by-step.

Key Features of the Segment Tree Visualizer

  • Interactive Tree Construction: Input your custom integer array, select a query type (Sum, Min, or Max), and watch the simulator divide segments in half and build the tree nodes recursively.
  • Animated Range Queries: Query ranges like [L, R] and observe how the search algorithm categorizes overlaps (complete overlap, partial overlap, or no overlap) and aggregates segment results.
  • Point & Range Updates: Update values at a single index or apply updates across an entire subarray. The visualizer shows exactly how parent values re-evaluate and how lazy markers resolve.
  • Lazy Propagation Animations: Visualize deferred updates in real-time. Watch the simulator attach lazy values to upper segment boundaries and push them down to child nodes only when accessed.
  • Speed Customization: Adjust the animation speed slider from slow step-by-step details to fast sweeps, making it easy to learn tree traversals at your own pace.

How to Use the Visualizer

  1. Initialize the Array: Use the sidebar input options to define an array. You can type comma-separated values (e.g., 1, 3, -2, 8, -7) or load presets.
  2. Choose Segment Tree Type: Select the merge logic. Choose Sum for range sums, Min for Range Minimum Queries (RMQ), or Max for Range Maximum Queries.
  3. Run Operations:
    • Query: Set start and end indices and click Query to trace the query overlap traversal.
    • Point Update: Specify an index and value offset to modify a single leaf node.
    • Range Update: Specify boundaries and a value to trigger the Lazy Propagation sequence.

Deepen Your Segment Tree Knowledge

To help you grasp the underlying theory and master implementing this data structure in your code editor, we have written comprehensive reference guides: