Movatterモバイル変換

Segment Tree Visualizer

Hello Codeforces!

I recently built aSegment Tree Visualizer to help understand how segment trees work.

** PLEASE OPEN ON DESKTOP OR LAPTOP ONLY **

Try it Live:Grow the Segment Tree
GitHub Source:Open the Engine

Features

• Visual Tree Layout – See how the segment tree is built node by node.
• Interactive Controls – Build the tree, update values, and run range queries.
• Clean UI – Dark theme, improved spacing, smooth UX.
• Supports: Sum, Min, Max, OR, AND, XOR operations.

How to Use

1. Input an array (e.g.1,2,3,4,5).
2. Choose an operation from the dropdown.
3. Click“Build Tree” to visualize it.
4. Use"Query in Range" or"Update At Index" to explore further.

Screenshot

• 
• +24
• 

• lazy_abhay
• 31 hour(s) ago
• 3

» pmaddineedi

11 hours ago,#|  +3 Recommendation: Perhaps you could highlight the boxes that are reached in a query in say, blue, to help understand the operations better. For instance, if the query is query-in-range [3, 6], then you would highlight the ancestors of 6 in one color and 3 in another (until both lists overlap). Similarly, for the update at index queries, you can highlight the boxes that are ancestors whenever the value changes. →Reply

• » » lazy_abhay

  8 hours ago,#^|  0 Thanks for the feedback I’ve added the highlighting as you suggested :) →Reply