Appearance
Personalize your experience
Mode
Accent Color
Layout
Direction
Orderbook Heatmap WebGL
FreeGPU-friendly liquidity heatmap using orderbook, volume, and OHLC anchors
0.0(0)
0 installs 0 0 commentsQ
42 listings12400 followers
Official QuaTick team — building advanced charting & trading tools for the Indian market.
View Profilewebglorderbookheatmapliquidityvolumeohlcadvanced
Free
Open in QuaTick IDE Edit in IDE Version1.0.0
Updated2026-01-15
Compatiblecandlestick, heiken-ashi, line
Live Preview — BTC/USDT
About
WebGL-ready orderbook heatmap logic using full depth snapshots where available, with OHLCV fallback for historical replay.
Inputs
• OHLCV bars from Quatick Charts
• Optional orderbook snapshots for depth-aware variants
Renderer
• WEBGL tagged for marketplace filtering and runtime selection
Outputs & Parameters
Outputs
Liquidity Intensityhistogram
Parameters
Depth Lookback80
Price Step1
Orderbook Weight2.5
Source Code
Edit in IDEtypescript
| 1 | /** |
| 2 | * Orderbook Heatmap WebGL - Quatick Marketplace Indicator |
| 3 | * Renderer: WEBGL |
| 4 | * Tags: webgl, orderbook, heatmap, liquidity, volume, ohlc |
| 5 | */ |
| 6 | |
| 7 | const metadata = { |
| 8 | "id": "orderbook-heatmap-webgl", |
| 9 | "name": "Orderbook Heatmap WebGL", |
| 10 | "renderer": "webgl", |
| 11 | "tags": [ |
| 12 | "webgl", |
| 13 | "orderbook", |
| 14 | "heatmap", |
| 15 | "liquidity", |
| 16 | "volume", |
| 17 | "ohlc" |
| 18 | ], |
| 19 | "version": "1.0.0" |
| 20 | }; |
| 21 | const defaultParams = { |
| 22 | "lookback": 80, |
| 23 | "tickSize": 1, |
| 24 | "orderbookWeight": 2.5 |
| 25 | }; |
| 26 | |
| 27 | interface BarData { |
| 28 | time: number; |
| 29 | open: number; |
| 30 | high: number; |
| 31 | low: number; |
| 32 | close: number; |
| 33 | volume?: number; |
| 34 | } |
| 35 | |
| 36 | interface OrderBookLevel { |
| 37 | price: number; |
| 38 | size: number; |
| 39 | } |
| 40 | |
| 41 | interface OrderBookSnapshot { |
| 42 | time: number; |
| 43 | bids: OrderBookLevel[]; |
| 44 | asks: OrderBookLevel[]; |
| 45 | } |
| 46 | |
| 47 | interface IndicatorPoint { |
| 48 | time: number; |
| 49 | value: number; |
| 50 | color?: string; |
| 51 | } |
| 52 | |
| 53 | function priceBucket(price: number, tickSize: number): number { |
| 54 | return Math.round(price / tickSize) * tickSize; |
| 55 | } |
| 56 | |
| 57 | function calculate( |
| 58 | bars: BarData[], |
| 59 | params = defaultParams, |
| 60 | orderbook: OrderBookSnapshot[] = [] |
| 61 | ): IndicatorPoint[] { |
| 62 | const lookback = Math.max(1, Number(params.lookback ?? params.sessionBars ?? params.rows ?? 50)); |
| 63 | const tickSize = Math.max(0.000001, Number(params.tickSize ?? 1)); |
| 64 | const decay = Math.min(0.999, Math.max(0.01, Number(params.decay ?? 0.94))); |
| 65 | const profile = new Map<number, number>(); |
| 66 | const outputs: IndicatorPoint[] = []; |
| 67 | |
| 68 | for (let i = 0; i < bars.length; i += 1) { |
| 69 | const bar = bars[i]; |
| 70 | const start = Math.max(0, i - lookback + 1); |
| 71 | profile.clear(); |
| 72 | |
| 73 | for (let j = start; j <= i; j += 1) { |
| 74 | const sourceBar = bars[j]; |
| 75 | const bucket = priceBucket((sourceBar.high + sourceBar.low + sourceBar.close) / 3, tickSize); |
| 76 | const weight = Math.pow(decay, i - j); |
| 77 | const volume = Number(sourceBar.volume ?? 0) * weight; |
| 78 | profile.set(bucket, (profile.get(bucket) ?? 0) + volume); |
| 79 | } |
| 80 | |
| 81 | const snapshot = orderbook.find(book => book.time === bar.time) ?? orderbook[orderbook.length - 1]; |
| 82 | if (snapshot) { |
| 83 | for (const level of [...snapshot.bids, ...snapshot.asks]) { |
| 84 | const bucket = priceBucket(level.price, tickSize); |
| 85 | profile.set(bucket, (profile.get(bucket) ?? 0) + level.size * Number(params.orderbookWeight ?? 1)); |
| 86 | } |
| 87 | } |
| 88 | |
| 89 | let pocPrice = bar.close; |
| 90 | let maxVolume = 0; |
| 91 | for (const [price, volume] of profile.entries()) { |
| 92 | if (volume > maxVolume) { |
| 93 | maxVolume = volume; |
| 94 | pocPrice = price; |
| 95 | } |
| 96 | } |
| 97 | |
| 98 | const delta = (bar.close - bar.open) * Number(bar.volume ?? 0); |
| 99 | const normalizedDelta = maxVolume > 0 ? delta / maxVolume : 0; |
| 100 | const distanceFromPoc = tickSize > 0 ? (bar.close - pocPrice) / tickSize : 0; |
| 101 | const value = Number(params.mode === 'delta' ? normalizedDelta : params.mode === 'distance' ? distanceFromPoc : maxVolume); |
| 102 | |
| 103 | outputs.push({ |
| 104 | time: bar.time, |
| 105 | value, |
| 106 | color: value >= 0 ? '#22c55e' : '#ef4444', |
| 107 | }); |
| 108 | } |
| 109 | |
| 110 | return outputs; |
| 111 | } |
| 112 |
Read-only preview. Open in the QuaTick IDE to edit and deploy.
Reviews
No reviews yet. Be the first to review this listing.
Discussion
Sign in to join the discussion.
Changelog
v1.0.0
Added as advanced Quatick volume/orderbook indicator with renderer metadata.
2026-01-15