Daniel Arcé

Senior Front-End Developer & Design TechnologistProduction interfaces, accessibility, prototyping

Live Order Book: Real-Time Market Visualization

Format: field noteEvidence: closed

What is an Order Book?

In a marketplace, some market participants want to buy, and others want to sell. An order book records resting buy and sell orders, grouped by price.

Below, the demo attempts to connect to Binance’s partial depth stream through a WebSocket, a persistent connection that lets the exchange push updates. It requests 20 price levels on each side at 100 ms intervals, as specified in the partial-depth stream documentation. The table displays 10 levels per side, the depth chart displays 15, and metrics use the received 20. Connection failure or unavailable data prevents a current reading.

For BTC/USDT, BTC (bitcoin) is the base asset being bought or sold; USDT (Tether) is the quote asset in which its price is stated. Prices are USDT per BTC, not US dollars. The demo’s dollar-sign price labels are a display shorthand, not a currency conversion.

Bids and asks

Bids (Buy Side)

Bids are prices at which traders are willing to buy.

"Buy 0.5 BTC at 93,000 USDT"

The best bid is the highest buy price currently in the book. It defines the top of the bid side.

Asks (Sell Side)

Asks are prices at which traders are willing to sell.

"Sell 0.3 BTC at 93,050 USDT"

The best ask is the lowest sell price currently in the book. It defines the top of the ask side.

Together, best bid and best ask define the top of book.

Read the displayed volume and spread

Order Imbalance

Order imbalance compares visible buy and sell volume. In this demo, it reflects the top 20 levels of the book, not the full market.

Displayed volume does not tell us how many traders placed the orders or whether those orders will remain. Imbalance alone does not predict the next price.

Where Does Volume Come From?

Every order in the book has a size, how many units someone wants to buy or sell at that price.

Here is an invented two-level example in JSON, a text format for structured data. For a hypothetical BASE/USDT pair, each inner pair contains price (USDT per BASE), then quantity (BASE units). These numbers are not a BTC snapshot:

{
  "bids": [["2.35", "1500"], ["2.34", "800"]],
  "asks": [["2.36", "1200"], ["2.37", "600"]]
}

The first bid level contains 1,500 BASE units at 2.35 USDT per BASE; the first ask level contains 1,200 BASE units at 2.36 USDT per BASE. Quantity is measured in the base asset, as distinguished from quote-asset spending in Binance’s new-order documentation. Each level can aggregate several orders.

Total volume is just adding up all the sizes on each side:

  • Bids: 1,500 + 800 = 2,300 total
  • Asks: 1,200 + 600 = 1,800 total
const totalBidVolume = bids.reduce((sum, entry) => sum + entry.size, 0)
const totalAskVolume = asks.reduce((sum, entry) => sum + entry.size, 0)

How Imbalance Is Calculated

The formula compares how much is on each side:

Order Imbalance = (Bid Volume − Ask Volume) ÷ (Bid Volume + Ask Volume)

Subtract ask volume from bid volume, then divide by their combined volume.

const orderImbalance = (totalBidVolume - totalAskVolume) / (totalBidVolume + totalAskVolume)

For nonzero combined volume, the result lies between -1 and +1. If both sides are empty, the ratio is undefined. The inline card currently substitutes zero for an undefined ratio; that empty-data placeholder must not be interpreted as evidence of a balanced market.

ResultWhat It Means
+1Bid volume only
+0.5Bid volume is three times ask volume
0Equal bid and ask volume
-0.5Ask volume is three times bid volume
-1Ask volume only

A Simple Example

Using the numbers above (bids = 2,300, asks = 1,800):

2300−18002300+1800=5004100=0.12\frac{2300 - 1800}{2300 + 1800} = \frac{500}{4100} = 0.12

Rounded to two decimal places, the imbalance is +0.12. In the live card’s percentage format, the unrounded ratio would display as 12.20%. Bid volume exceeds ask volume in these displayed levels.

Spread

The spread is the gap between the best ask and the best bid:

Spread = Best Ask − Best Bid

The live value above shows the current spread for the selected trading pair.

A narrow spread puts the best available buying and selling prices close together. A wider spread increases the gap an immediate trade must cross. Liquidity also depends on how much size is available at those prices and farther into the book.

Market Depth

The colored bars aggregate volume at each price level. Longer bars mean more resting size at that price.

Depth shows where displayed size is concentrated and which price levels an immediate order may consume. This partial view cannot account for orders beyond the displayed levels or changes before execution.

How Trades Execute

A buy can execute when its price condition permits matching an available sell, and conversely for a sell. The following is a simplified execution model; the displayed depth is neither a trade instruction nor a guarantee of execution.

Two basic order types:

  1. Market order

    • “Buy now, whatever the best available price is.”
    • Attempts to match against available prices on the opposite side; the price is not guaranteed.
    • Consumes liquidity.
  2. Limit order

    • “Buy at 93,000 or better (lower).”
    • Can execute immediately if it crosses an available price.
    • An unfilled portion supplies resting liquidity only if the order’s conditions allow it.

When a market buy arrives, it lifts the lowest ask.
When a market sell arrives, it hits the highest bid.
A large order may consume several price levels and receive several execution prices. A partial fill means only part of the requested quantity executed. Binance’s time-in-force and order-status definitions distinguish orders that may rest until cancelled (GTC), those that cancel an unfilled remainder immediately (IOC), and those requiring a complete immediate fill (FOK). Orders can expire after a partial fill; visible liquidity can also change before execution.

Data streamed from Binance's public WebSocket API. This page is not affiliated with or endorsed by Binance.