Appearance

Personalize your experience

Mode
Accent Color
Direction
3D Book Towers

3D Book Towers

Order Book View

The book as a city of towers: one tower per price level for the latest fourteen slices of the book, older slices fading back.

What it answers

Which levels hold the size now, and were they there a few updates ago? Open it from the order book toolbar with View → 3D Book Towers, or from Settings → . The , bar and order entry stay in place; only the book pane changes.

Connecting to Binance BTC/USDT…
Connecting to Binance BTC/USDT…
Real time: the production 3D Book Towers renderer on the live Binance spot book (REST snapshot + 100ms diff stream + trades). Switch symbol or source above; hover for a readout, click to pick a price. Older slices appear as the recording grows.

Anatomy

Tower
One price bucket in one book slice. Height √(size ÷ the largest size in the ); colour by the side holding the size.
Slices
Fourteen evenly spaced slices from now back through the recorded ; older slices fade toward the .
Bright tops
Towers above three quarters of the maximum whiten: the walls.
Lighting
Per-face lighting with brighter tops, so towers read at any angle.

How to read it

  1. Look for of towers at the same price across slices: persistent walls.
  2. A tower present only in the newest slice is fresh size; one that vanished from it was just or traded.
  3. Use Price side to line all slices up and the profile of the book over time.

How it is computed

  • One unit cube in the vertex shader (36 vertices from vertex_index), drawn once per tower with per-instance position, footprint, height, colour, fade and glow.
  • Up to a few thousand instances per frame; the instance is rewritten only when the book changes.
  • Rendered on the GPU: WebGPU first (one page-wide device, pipelines compiled once and shared by every 3D view), then WebGL2, then Canvas 2D. The recorded book lives in a 240 × float texture; each book update uploads one texture row, never the whole history, and frames are drawn only when the book, the camera or the changes, and not at all while the pane is off screen.
Core calculation
for (let k = 0; k < 14; k++) {
  const c = newest - k * stride;              // one slice
  for (const r of rows) if (size[c][r] > 0)
    towers.push({ x: timeX(c), z: priceZ(r), h: Math.sqrt(size[c][r] / maxSize) * height,
                  colour: bid[c][r] >= ask[c][r] ? bidColor : askColor, fade: 1 - k / 14 * 0.7 });
}

Trading signals

Skyscraper

A whitened tower close to the mid in every slice: the level that decides the next move.

Demolition

A tall tower in older slices that is missing from the newest: a wall removed. If price did not trade there, treat the earlier support as fake.

!
Caution:Slices are evenly spaced through the recorded , not every update; short-lived changes between slices are not shown. Use the or for the full history.

Settings that affect this view

Renderer badge (top right)
Shows WebGPU, WebGL2 or Canvas and the measured CPU time per frame. Click it to cycle auto → WebGPU → WebGL2 → Canvas; the choice is remembered.
Camera bar (top left)
Front, , Top, Price side and Low presets (keys 1–5), auto-rotate (Space), reset (R or double-click), and −/+ to lower or raise the heights.
Bid / ask colours, skin
Every , ridge, tower and pillar uses the book colours.
Glow
Brightens the tallest peaks and walls (off on light themes).
Grid & size labels
grid on or off.
Levels per side, grouping
More levels widen the recorded price ; the bucket size adapts so the band always fits.

Standalone HTML implementation

A complete, dependency-free page that implements this view on a canvas against the real-time book. It runs below exactly as written. The harness keeps a full local book from the REST snapshot and the 100ms diff stream (resyncing on any sequence gap) and reads from aggTrade. Change SYMBOL / GROUP for another market, or replace snapshot() with your own feed, and the draw() function works unchanged.

3D book towers — standalone HTML, live Binance feed, no dependencies
orderbook-towers.html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>3D book towers — order book view</title><style>  html, body { margin: 0; height: 100%; background: #0b0e14; overflow: hidden; }  canvas { display: block; width: 100%; height: 100%; }  #status { position: fixed; left: 8px; bottom: 6px; font: 600 10px ui-monospace, Menlo, monospace;            color: #cbd5e1; background: rgba(15,23,42,.85); border: 1px solid rgba(148,163,184,.3);            border-radius: 4px; padding: 2px 6px; pointer-events: none; }  #status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; background: #f59e0b; }</style></head><body><canvas id="c"></canvas><div id="status"><i></i>connecting…</div><script>// ─── Canvas + palette ───────────────────────────────────────────────────────const C = document.getElementById('c'), X = C.getContext('2d');let W = 0, H = 0;function fit() {  const r = C.getBoundingClientRect(), d = Math.min(devicePixelRatio || 1, 2);  W = r.width; H = r.height; C.width = W * d; C.height = H * d; X.setTransform(d, 0, 0, d, 0, 0);}addEventListener('resize', fit); fit();const BID = '#0ecb81', ASK = '#f6465d', GRID = 'rgba(148,163,184,.16)';const TEXT = '#e2e8f0', MUTED = '#64748b', ACCENT = '#8b5cf6', WARN = '#f59e0b';// ─── Feed settings ──────────────────────────────────────────────────────────// Real-time Binance spot book. Change SYMBOL / GROUP for another market// (e.g. 'ETHUSDT' with GROUP 0.1). If the exchange cannot be reached the page// falls back to a synthetic book and says so in the status badge.const SYMBOL = 'BTCUSDT';const GROUP = 1;            // aggregation step (price bucket)const LEVELS = 30;          // levels per side after groupingconst TICK = GROUP;         // views size cells / buckets by the grouped step// ─── Real-time Binance book: REST snapshot + 100ms diff stream ──────────────// Binance's documented procedure: buffer the diff stream, fetch a snapshot,// drop events with u <= lastUpdateId, then apply in order; a gap// (U != previous u + 1) means resnapshot. qty 0 deletes a level.const live = { bids: new Map(), asks: new Map(), lastU: 0, lastE: 0, synced: false, buffer: [], ok: false, ups: [] };const prints = [];let source = 'connecting';const statusEl = document.getElementById('status');function setStatus(text, color) { statusEl.innerHTML = '<i style="background:' + color + '"></i>' + text; }function applyDiff(e) {  for (const [p, q] of e.b) { const v = +q; v === 0 ? live.bids.delete(+p) : live.bids.set(+p, v); }  for (const [p, q] of e.a) { const v = +q; v === 0 ? live.asks.delete(+p) : live.asks.set(+p, v); }  live.lastU = e.u; live.lastE = e.E;  const now = Date.now(); live.ups.push(now); while (now - live.ups[0] > 1000) live.ups.shift();}async function resnapshot() {  live.synced = false;  const r = await fetch('https://api.binance.com/api/v3/depth?symbol=' + SYMBOL + '&limit=1000');  if (!r.ok) throw new Error('HTTP ' + r.status);  const s = await r.json();  live.bids = new Map(s.bids.map(([p, q]) => [+p, +q]));  live.asks = new Map(s.asks.map(([p, q]) => [+p, +q]));  live.lastU = s.lastUpdateId;  const pending = live.buffer.filter(e => e.u > s.lastUpdateId); live.buffer = [];  let first = true;  for (const e of pending) {    if (first && !(e.U <= live.lastU + 1 && e.u >= live.lastU + 1)) continue;    first = false; applyDiff(e);  }  live.synced = true; live.ok = true; source = 'live';}// Snapshot failures fall back to the synthetic book and keep retrying; the page// switches back to live as soon as a snapshot lands.function trySnapshot() {  resnapshot().catch(() => { fallback(); setTimeout(trySnapshot, 5000); });}function connect() {  const s = SYMBOL.toLowerCase();  let ws;  try { ws = new WebSocket('wss://stream.binance.com:9443/stream?streams=' + s + '@depth@100ms/' + s + '@aggTrade'); }  catch (e) { fallback(); return; }  ws.onopen = () => trySnapshot();  ws.onmessage = m => {    const { stream, data } = JSON.parse(m.data);    if (stream.endsWith('@aggTrade')) {      // m = buyer is maker → the aggressor sold      prints.push({ t: data.T, side: data.m ? 'sell' : 'buy', qty: +data.q, price: +data.p });      if (prints.length > 400) prints.shift();      return;    }    if (!live.synced) { live.buffer.push(data); if (live.buffer.length > 600) live.buffer.shift(); return; }    if (data.u <= live.lastU) return;    if (data.U > live.lastU + 1) { live.buffer = [data]; trySnapshot(); return; }    applyDiff(data);  };  ws.onerror = () => { if (!live.ok) fallback(); };  ws.onclose = () => { live.synced = false; setTimeout(connect, live.ok ? 2000 : 8000); };}setTimeout(() => { if (!live.ok) fallback(); }, 15000);connect();// ─── Synthetic fallback (same shape as the live book) ───────────────────────let center = 76500;const base = { bid: [], ask: [] };for (let i = 0; i < LEVELS; i++) { base.bid.push(0.4 + i * 0.5 + Math.random() * 3); base.ask.push(0.4 + i * 0.5 + Math.random() * 3); }function fallback() {  if (source === 'synthetic' || live.ok) return;  source = 'synthetic';  setStatus('SYNTHETIC · live feed unreachable, retrying', '#94a3b8');}function tickSynthetic() {  if (Math.random() < 0.35) center += (Math.random() < 0.5 ? -1 : 1) * GROUP;  for (const s of ['bid', 'ask']) for (let i = 0; i < LEVELS; i++) {    let q = base[s][i] * (0.92 + Math.random() * 0.16);    if (Math.random() < 0.003) q *= 5;    if (q > 40) q *= 0.7;    base[s][i] = q;  }  if (Math.random() < 0.6) {    const side = Math.random() < 0.5 ? 'buy' : 'sell';    prints.push({ t: Date.now(), side, qty: +(Math.random() ** 3 * 8 + 0.01).toFixed(3), price: side === 'buy' ? center + GROUP : center });    if (prints.length > 400) prints.shift();  }}function tick() { if (source === 'synthetic') tickSynthetic(); }// ─── Snapshot: group raw levels into LEVELS buckets per side ────────────────let prev = new Map();const r8 = v => Math.round(v * 1e8) / 1e8;function group(map, side) {  const out = new Map();  for (const [p, q] of map) {    const k = r8((side === 'bid' ? Math.floor(p / GROUP + 1e-9) : Math.ceil(p / GROUP - 1e-9)) * GROUP);    out.set(k, (out.get(k) || 0) + q);  }  return [...out.entries()].sort((a, b) => (side === 'bid' ? b[0] - a[0] : a[0] - b[0])).slice(0, LEVELS);}function rawSynthetic(side) {  const out = [];  for (let i = 0; i < LEVELS; i++) {    if ((i === 7 || i === 13) && Math.random() < 0.45) continue;     // two flickering levels    out.push([side === 'bid' ? center - i * GROUP : center + GROUP + i * GROUP, base[side][i]]);  }  return out;}function snapshot() {  let rb, ra;  if (source === 'live') {    if (!live.synced) return null;    rb = group(live.bids, 'bid'); ra = group(live.asks, 'ask');    setStatus('LIVE · Binance ' + SYMBOL + ' · ' + live.ups.length + ' upd/s · ' + Math.max(0, Date.now() - live.lastE) + 'ms', '#22c55e');  } else if (source === 'synthetic') {    rb = rawSynthetic('bid'); ra = rawSynthetic('ask');  } else return null;  if (!rb.length || !ra.length) return null;  const build = (levels, s) => {    let tot = 0, notl = 0;    return levels.map(([price, q]) => {      const key = s + price;      tot += q; notl += q * price;      return { price, qty: q, total: tot, notional: q * price, cumNotional: notl,               delta: prev.has(key) ? q - prev.get(key) : q, isNew: !prev.has(key) };    });  };  const bids = build(rb, 'bid'), asks = build(ra, 'ask');  const next = new Map();  bids.forEach(l => next.set('bid' + l.price, l.qty));  asks.forEach(l => next.set('ask' + l.price, l.qty));  prev = next;  const all = [...bids, ...asks], avg = all.reduce((s, l) => s + l.qty, 0) / all.length;  all.forEach(l => { l.isWall = l.qty > avg * 3; });  return { bids, asks, bestBid: bids[0].price, bestAsk: asks[0].price,           mid: (bids[0].price + asks[0].price) / 2, t: Date.now(), prints };}// ─── Helpers ────────────────────────────────────────────────────────────────function txt(s, x, y, a = 'left', c = TEXT) { X.fillStyle = c; X.textAlign = a; X.textBaseline = 'middle'; X.fillText(s, x, y); }function fmt(v, d = 2) { return Math.abs(v) >= 1e4 ? v.toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) : v.toFixed(d); }function alpha(hex, a) { return hex + Math.round(Math.max(0, Math.min(1, a)) * 255).toString(16).padStart(2, '0'); }function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }// ─── View ───────────────────────────────────────────────────────────────────// ─── Tiny 3D, no WebGL: recorded book + orbit camera + perspective ──────────// The production view renders this on the GPU (WebGPU, then WebGL2). Here the// same scene is projected on the CPU and painted far → near, so the page has// no dependencies. World box: x = time (oldest −1 → now +1), z = price (low// +1 → high −1), y = height.const HIST = [], NCOL = 90, NROW = 44;function record(b) {  HIST.push({ t: b.t, mid: b.mid, bids: b.bids.map(l => [l.price, l.qty, l.total]), asks: b.asks.map(l => [l.price, l.qty, l.total]) });  if (HIST.length > NCOL) HIST.shift();}// grid[c][r] = { bid, ask, cb, ca } bucketed around the newest mid.function gridOf() {  const mid = HIST[HIST.length - 1].mid, out = [];  for (const s of HIST) {    const col = Array.from({ length: NROW }, () => ({ bid: 0, ask: 0, cb: 0, ca: 0 }));    for (const [p, q, tot] of s.bids) { const r = Math.round((p - mid) / TICK) + NROW / 2; if (r >= 0 && r < NROW) { col[r].bid += q; col[r].cb = tot; } }    for (const [p, q, tot] of s.asks) { const r = Math.round((p - mid) / TICK) + NROW / 2; if (r >= 0 && r < NROW) { col[r].ask += q; col[r].ca = tot; } }    let run = 0; for (let r = NROW / 2; r >= 0; r--) { run = Math.max(run, col[r].cb); col[r].cb = run; }    run = 0; for (let r = NROW / 2; r < NROW; r++) { run = Math.max(run, col[r].ca); col[r].ca = run; }    out.push(col);  }  return out;}// Slow automatic orbit; returns project(x, y, z) → [sx, sy, depth].function camera(W, H, yaw0 = -0.45, pitch = 0.5) {  const yaw = yaw0 + Math.sin(Date.now() / 9000) * 0.3;  const cy = Math.cos(yaw), sy = Math.sin(yaw), cp = Math.cos(pitch), sp = Math.sin(pitch), d = 3.4;  return (x, y, z) => {    const x1 = cy * x - sy * z, z1 = sy * x + cy * z;    const y2 = cp * y - sp * z1, z2 = sp * y + cp * z1;    const depth = d - z2, f = Math.min(W * 0.9, H * 1.5) / depth;    return [W / 2 + x1 * f, H * 0.6 - y2 * f, depth];  };}const wx = (c, n) => (n > 1 ? (c / (n - 1)) * 2 - 1 : 1);const wz = r => 1 - (r / (NROW - 1)) * 2;function poly(pts, fill, stroke) {  X.beginPath(); pts.forEach((p, i) => (i ? X.lineTo(p[0], p[1]) : X.moveTo(p[0], p[1]))); X.closePath();  if (fill) { X.fillStyle = fill; X.fill(); }  if (stroke) { X.strokeStyle = stroke; X.stroke(); }}function line(pts, stroke, width) {  X.lineWidth = width; X.strokeStyle = stroke; X.beginPath();  pts.forEach((p, i) => (i ? X.lineTo(p[0], p[1]) : X.moveTo(p[0], p[1]))); X.stroke();}function floor(P) {  for (let k = 0; k <= 10; k++) {    line([P(-1 + k / 5, 0, -1), P(-1 + k / 5, 0, 1)], GRID, 1);    line([P(-1, 0, -1 + k / 5), P(1, 0, -1 + k / 5)], GRID, 1);  }}function shade(hex, k) {  const n = parseInt(hex.slice(1), 16), f = v => Math.max(0, Math.min(255, Math.round(v * k)));  return 'rgb(' + f(n >> 16 & 255) + ',' + f(n >> 8 & 255) + ',' + f(n & 255) + ')';}// Towers of resting size for the last slices of the book: one tower per level// per slice, height √(size ÷ max), older slices fading back. Painted far →// near with three visible faces (front, side, top).function draw(X, W, H, b) {  record(b);  const g = gridOf(), n = g.length, P = camera(W, H);  let max = 0; for (const col of g) for (const c of col) max = Math.max(max, c.bid + c.ask);  floor(P);  const boxes = [], stride = Math.max(1, Math.floor(n / 10));  for (let k = 0; k < 10; k++) {    const c = n - 1 - k * stride; if (c < 0) break;    for (let r = 0; r < NROW; r++) {      const s = g[c][r].bid + g[c][r].ask; if (!s) continue;      boxes.push({ x: wx(c, n), z: wz(r), h: Math.sqrt(s / max) * 0.6, col: g[c][r].bid >= g[c][r].ask ? BID : ASK, fade: 1 - k * 0.07 });    }  }  const sx = (2 / Math.max(1, n - 1)) * stride * 0.3, sz = (1 / NROW) * 0.85;  boxes.sort((a, c) => P(c.x, 0, c.z)[2] - P(a.x, 0, a.z)[2]);  for (const t of boxes) {    X.globalAlpha = t.fade;    const A = (dx, y, dz) => P(t.x + dx, y, t.z + dz);    poly([A(-sx, 0, sz), A(sx, 0, sz), A(sx, t.h, sz), A(-sx, t.h, sz)], t.col, null);                       // front    poly([A(sx, 0, sz), A(sx, 0, -sz), A(sx, t.h, -sz), A(sx, t.h, sz)], shade(t.col, 0.6), null);          // side    poly([A(-sx, t.h, sz), A(sx, t.h, sz), A(sx, t.h, -sz), A(-sx, t.h, -sz)], shade(t.col, 1.3), null);    // top  }  X.globalAlpha = 1;}// ─── Loop: redraw 4× a second (the live book updates every 100ms) ───────────let last = 0;(function loop(now) {  requestAnimationFrame(loop);  if (now - last < 250) return;  last = now; tick();  const b = snapshot();  if (!b) return;  X.clearRect(0, 0, W, H);  X.font = '11px ui-monospace, Menlo, monospace';  draw(X, W, H, b);})(0);</script></body></html>

See also

Related articles

Related to 3D Book Towers

  • Depth City

    Trading / Order Book / Views

    An isometric 3-D skyline of resting size along the price axis — towers are walls.

  • 3D Depth Canyon

    Trading / Order Book / Views

    The depth chart extruded through time. Cumulative bid and ask depth form two valley walls, and the mid runs along the valley floor.

  • 3D Liquidity Terrain

    Trading / Order Book / Views

    The recorded book as a lit landscape: time across, price in depth, resting size as height. Walls are mountains, thin books are plains.

  • 3D Ridgeline

    Trading / Order Book / Views

    Every price level as its own ridge of resting size through time, as in the book terrain chart: far ridges behind, near ridges in front, newest on the right.

  • 3D Trade Cloud

    Trading / Order Book / Views

    Every print as a pillar at its time and price, its height the trade size, coloured by the aggressor, over the mid path.

  • Book vs Tape Profile

    Trading / Order Book / Views

    What is resting at each price beside what has actually traded there — intent against action.

  • Butterfly

    Trading / Order Book / Views

    Bid level N against ask level N, fanned out from a central spine — a level-by-level comparison of the two sides.

  • Concentration

    Trading / Order Book / Views

    Lorenz curve and Gini coefficient of each side — how few levels hold the liquidity.

  • Depth Bands

    Trading / Order Book / Views

    Liquidity within 5 / 10 / 25 / 50 / 100 bp of mid, over time — how much depth is actually close.

Browse all knowledge base articles →