{"componentChunkName":"component---src-templates-blog-post-js","path":"/polymarket-orderbook-analysis/","result":{"data":{"site":{"siteMetadata":{"title":"/dev/yukarinoki"}},"markdownRemark":{"id":"f4ea8bbe-2ce4-5796-95ae-8bf8c8fc2446","excerpt":"日本語要約: Polymarketの5分BTCバイナリオプションのL2オーダーブックを分析した記事です。FastAPI + vanilla JSで構築したビジュアライザーを使い、スプレッドの推移、流動性のパターン、スナップショット間のサイズ変化を可視化。市場効率性への考察も行います。 I’ve been…","html":"<blockquote>\n<p><strong>日本語要約</strong>: Polymarketの5分BTCバイナリオプションのL2オーダーブックを分析した記事です。FastAPI + vanilla JSで構築したビジュアライザーを使い、スプレッドの推移、流動性のパターン、スナップショット間のサイズ変化を可視化。市場効率性への考察も行います。</p>\n</blockquote>\n<p>I’ve been spending way too much time staring at Polymarket’s 5-minute BTC binary options lately. Not trading them (well, not much), but pulling apart their orderbooks to understand what’s actually happening in these ultra-short-duration prediction markets. Here’s what I found and the tool I built to see it all.</p>\n<h2 id=\"why-orderbook-analysis-matters-for-prediction-markets\" style=\"position:relative;\"><a href=\"#why-orderbook-analysis-matters-for-prediction-markets\" aria-label=\"why orderbook analysis matters for prediction markets permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why Orderbook Analysis Matters for Prediction Markets</h2>\n<p>Most people look at prediction markets from the price/probability angle: “What does the market think the odds are?” But if you dig into the L2 orderbook, you get a much richer picture. You can see:</p>\n<ul>\n<li><strong>Who’s confident</strong> (large resting orders near the mid)</li>\n<li><strong>Who’s uncertain</strong> (thin books with wide spreads)</li>\n<li><strong>When the market is about to move</strong> (liquidity getting pulled from one side)</li>\n<li><strong>Market maker behavior</strong> (symmetric adjustments, inventory management)</li>\n</ul>\n<p>For 5-minute binary options on BTC price, this is especially interesting because the entire lifecycle of the market plays out in 300 seconds. You get to watch an orderbook be born, mature, and die in the time it takes to make coffee.</p>\n<h2 id=\"l2-orderbook-structure-on-polymarket\" style=\"position:relative;\"><a href=\"#l2-orderbook-structure-on-polymarket\" aria-label=\"l2 orderbook structure on polymarket permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>L2 Orderbook Structure on Polymarket</h2>\n<p>Polymarket runs a CLOB (Central Limit Order Book) on their hybrid exchange. For binary options, you have two outcome tokens — let’s call them YES and NO (or in the BTC case, UP and DOWN). Each outcome has its own orderbook with bids and asks.</p>\n<p>Key things to understand:</p>\n<ul>\n<li><strong>Prices are probabilities</strong>: A bid of 0.65 on YES means someone is willing to pay $0.65 for a token that pays $1.00 if the event happens. That’s an implied probability of 65%.</li>\n<li><strong>Complementary pricing</strong>: YES at 0.65 and NO at 0.35 should be equivalent (minus spread). If YES bid is 0.60 and NO bid is 0.35, there’s a 0.05 gap representing the spread/profit for market makers.</li>\n<li><strong>Size represents conviction</strong>: A $5,000 order at 0.50 is very different from a $50 order at the same price.</li>\n</ul>\n<p>The L2 data gives you multiple price levels deep on each side. For these 5-minute markets, you typically see 3-8 meaningful levels before the book gets sparse.</p>\n<h2 id=\"building-the-orderbook-visualizer\" style=\"position:relative;\"><a href=\"#building-the-orderbook-visualizer\" aria-label=\"building the orderbook visualizer permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Building the Orderbook Visualizer</h2>\n<p>I wanted to see how the orderbook evolves over the life of a 5-minute contract. Not just the final state, but snapshots over time, side by side, with changes highlighted. So I built a simple tool.</p>\n<h3 id=\"architecture-fastapi--vanilla-js\" style=\"position:relative;\"><a href=\"#architecture-fastapi--vanilla-js\" aria-label=\"architecture fastapi  vanilla js permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Architecture: FastAPI + Vanilla JS</h3>\n<p>Nothing fancy. FastAPI backend that polls Polymarket’s API for orderbook snapshots, stores them, and serves them to a vanilla JS frontend that renders the books visually.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/0eaa1b16359b53aec5fd1a5fc06bf829/b12f7/markets_list_which_exists_user_trade.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 19.594594594594593%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAqUlEQVQY022QWRaCMAxFuxfAAp2xBYuWBbD//TyTIuiHH+9kaJObRKSUsOaMUgqWZYFSCsYYaK0xjqpa5xyklGiaFm37X+ebkMOIQWlYH+Av+csP4bB9PxBME8BUfX1NA9grFvNaEB9PpPyCDxNijJhpUm7C0/LHbduw7zsUFUvZ1+anfuOuu0Hcpwkzrc2yRLLW0Yq+UpnO1PABccyQ4xQGmU7FeYae+TfuvnqWwQM2AgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Visualizer UI\"\n        title=\"Visualizer UI\"\n        src=\"/static/0eaa1b16359b53aec5fd1a5fc06bf829/fcda8/markets_list_which_exists_user_trade.png\"\n        srcset=\"/static/0eaa1b16359b53aec5fd1a5fc06bf829/12f09/markets_list_which_exists_user_trade.png 148w,\n/static/0eaa1b16359b53aec5fd1a5fc06bf829/e4a3f/markets_list_which_exists_user_trade.png 295w,\n/static/0eaa1b16359b53aec5fd1a5fc06bf829/fcda8/markets_list_which_exists_user_trade.png 590w,\n/static/0eaa1b16359b53aec5fd1a5fc06bf829/efc66/markets_list_which_exists_user_trade.png 885w,\n/static/0eaa1b16359b53aec5fd1a5fc06bf829/b12f7/markets_list_which_exists_user_trade.png 1020w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>The market selector lets you pick which 5-minute contract to analyze. I filter for markets where there was actual user trading activity (not just market maker quotes sitting there).</p>\n<h3 id=\"snapshot-caching-with-lru\" style=\"position:relative;\"><a href=\"#snapshot-caching-with-lru\" aria-label=\"snapshot caching with lru permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Snapshot Caching with LRU</h3>\n<p>Since these markets are short-lived, I cache snapshots aggressively. Each market gets polled every 2 seconds during its active window, giving ~150 snapshots per contract.</p>\n<div class=\"gatsby-highlight\" data-language=\"python\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-python line-numbers\"><code class=\"language-python\"><span class=\"token keyword\">from</span> functools <span class=\"token keyword\">import</span> lru_cache\n<span class=\"token keyword\">from</span> datetime <span class=\"token keyword\">import</span> datetime\n<span class=\"token keyword\">import</span> httpx\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">OrderbookSnapshotCache</span><span class=\"token punctuation\">:</span>\n    <span class=\"token keyword\">def</span> <span class=\"token function\">__init__</span><span class=\"token punctuation\">(</span>self<span class=\"token punctuation\">,</span> max_snapshots_per_market<span class=\"token operator\">=</span><span class=\"token number\">200</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">:</span>\n        self<span class=\"token punctuation\">.</span>snapshots<span class=\"token punctuation\">:</span> <span class=\"token builtin\">dict</span><span class=\"token punctuation\">[</span><span class=\"token builtin\">str</span><span class=\"token punctuation\">,</span> <span class=\"token builtin\">list</span><span class=\"token punctuation\">[</span><span class=\"token builtin\">dict</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n        self<span class=\"token punctuation\">.</span>max_snapshots <span class=\"token operator\">=</span> max_snapshots_per_market\n\n    <span class=\"token keyword\">async</span> <span class=\"token keyword\">def</span> <span class=\"token function\">capture_snapshot</span><span class=\"token punctuation\">(</span>self<span class=\"token punctuation\">,</span> market_id<span class=\"token punctuation\">:</span> <span class=\"token builtin\">str</span><span class=\"token punctuation\">,</span> token_id<span class=\"token punctuation\">:</span> <span class=\"token builtin\">str</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">:</span>\n        <span class=\"token keyword\">async</span> <span class=\"token keyword\">with</span> httpx<span class=\"token punctuation\">.</span>AsyncClient<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">as</span> client<span class=\"token punctuation\">:</span>\n            resp <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> client<span class=\"token punctuation\">.</span>get<span class=\"token punctuation\">(</span>\n                <span class=\"token string-interpolation\"><span class=\"token string\">f\"https://clob.polymarket.com/book\"</span></span><span class=\"token punctuation\">,</span>\n                params<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span><span class=\"token string\">\"token_id\"</span><span class=\"token punctuation\">:</span> token_id<span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">)</span>\n            book <span class=\"token operator\">=</span> resp<span class=\"token punctuation\">.</span>json<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n\n        snapshot <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token string\">\"timestamp\"</span><span class=\"token punctuation\">:</span> datetime<span class=\"token punctuation\">.</span>utcnow<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>isoformat<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n            <span class=\"token string\">\"bids\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">(</span><span class=\"token builtin\">float</span><span class=\"token punctuation\">(</span>o<span class=\"token punctuation\">[</span><span class=\"token string\">\"price\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token builtin\">float</span><span class=\"token punctuation\">(</span>o<span class=\"token punctuation\">[</span><span class=\"token string\">\"size\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">for</span> o <span class=\"token keyword\">in</span> book<span class=\"token punctuation\">[</span><span class=\"token string\">\"bids\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token string\">\"asks\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">(</span><span class=\"token builtin\">float</span><span class=\"token punctuation\">(</span>o<span class=\"token punctuation\">[</span><span class=\"token string\">\"price\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token builtin\">float</span><span class=\"token punctuation\">(</span>o<span class=\"token punctuation\">[</span><span class=\"token string\">\"size\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">for</span> o <span class=\"token keyword\">in</span> book<span class=\"token punctuation\">[</span><span class=\"token string\">\"asks\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token string\">\"best_bid\"</span><span class=\"token punctuation\">:</span> <span class=\"token builtin\">float</span><span class=\"token punctuation\">(</span>book<span class=\"token punctuation\">[</span><span class=\"token string\">\"bids\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">[</span><span class=\"token string\">\"price\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">if</span> book<span class=\"token punctuation\">[</span><span class=\"token string\">\"bids\"</span><span class=\"token punctuation\">]</span> <span class=\"token keyword\">else</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n            <span class=\"token string\">\"best_ask\"</span><span class=\"token punctuation\">:</span> <span class=\"token builtin\">float</span><span class=\"token punctuation\">(</span>book<span class=\"token punctuation\">[</span><span class=\"token string\">\"asks\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">[</span><span class=\"token string\">\"price\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">if</span> book<span class=\"token punctuation\">[</span><span class=\"token string\">\"asks\"</span><span class=\"token punctuation\">]</span> <span class=\"token keyword\">else</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">}</span>\n\n        <span class=\"token keyword\">if</span> market_id <span class=\"token keyword\">not</span> <span class=\"token keyword\">in</span> self<span class=\"token punctuation\">.</span>snapshots<span class=\"token punctuation\">:</span>\n            self<span class=\"token punctuation\">.</span>snapshots<span class=\"token punctuation\">[</span>market_id<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span>\n\n        snaps <span class=\"token operator\">=</span> self<span class=\"token punctuation\">.</span>snapshots<span class=\"token punctuation\">[</span>market_id<span class=\"token punctuation\">]</span>\n        snaps<span class=\"token punctuation\">.</span>append<span class=\"token punctuation\">(</span>snapshot<span class=\"token punctuation\">)</span>\n        <span class=\"token keyword\">if</span> <span class=\"token builtin\">len</span><span class=\"token punctuation\">(</span>snaps<span class=\"token punctuation\">)</span> <span class=\"token operator\">></span> self<span class=\"token punctuation\">.</span>max_snapshots<span class=\"token punctuation\">:</span>\n            snaps<span class=\"token punctuation\">.</span>pop<span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span>\n\n        <span class=\"token keyword\">return</span> snapshot\n\n    <span class=\"token keyword\">def</span> <span class=\"token function\">get_window</span><span class=\"token punctuation\">(</span>self<span class=\"token punctuation\">,</span> market_id<span class=\"token punctuation\">:</span> <span class=\"token builtin\">str</span><span class=\"token punctuation\">,</span> start_idx<span class=\"token punctuation\">:</span> <span class=\"token builtin\">int</span><span class=\"token punctuation\">,</span> window_size<span class=\"token punctuation\">:</span> <span class=\"token builtin\">int</span> <span class=\"token operator\">=</span> <span class=\"token number\">5</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">:</span>\n        <span class=\"token triple-quoted-string string\">\"\"\"Get a window of consecutive snapshots for side-by-side display.\"\"\"</span>\n        snaps <span class=\"token operator\">=</span> self<span class=\"token punctuation\">.</span>snapshots<span class=\"token punctuation\">.</span>get<span class=\"token punctuation\">(</span>market_id<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n        end_idx <span class=\"token operator\">=</span> <span class=\"token builtin\">min</span><span class=\"token punctuation\">(</span>start_idx <span class=\"token operator\">+</span> window_size<span class=\"token punctuation\">,</span> <span class=\"token builtin\">len</span><span class=\"token punctuation\">(</span>snaps<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n        <span class=\"token keyword\">return</span> snaps<span class=\"token punctuation\">[</span>start_idx<span class=\"token punctuation\">:</span>end_idx<span class=\"token punctuation\">]</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<h3 id=\"computing-deltas-between-snapshots\" style=\"position:relative;\"><a href=\"#computing-deltas-between-snapshots\" aria-label=\"computing deltas between snapshots permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Computing Deltas Between Snapshots</h3>\n<p>This is where it gets interesting. I compute the difference between consecutive snapshots so you can see at a glance what changed — did size get added or pulled at a given level?</p>\n<div class=\"gatsby-highlight\" data-language=\"python\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-python line-numbers\"><code class=\"language-python\"><span class=\"token keyword\">from</span> dataclasses <span class=\"token keyword\">import</span> dataclass\n<span class=\"token keyword\">from</span> typing <span class=\"token keyword\">import</span> Optional\n\n<span class=\"token decorator annotation punctuation\">@dataclass</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">LevelDelta</span><span class=\"token punctuation\">:</span>\n    price<span class=\"token punctuation\">:</span> <span class=\"token builtin\">float</span>\n    prev_size<span class=\"token punctuation\">:</span> <span class=\"token builtin\">float</span>\n    curr_size<span class=\"token punctuation\">:</span> <span class=\"token builtin\">float</span>\n    delta<span class=\"token punctuation\">:</span> <span class=\"token builtin\">float</span>\n    is_new<span class=\"token punctuation\">:</span> <span class=\"token builtin\">bool</span>\n    is_removed<span class=\"token punctuation\">:</span> <span class=\"token builtin\">bool</span>\n\n    <span class=\"token decorator annotation punctuation\">@property</span>\n    <span class=\"token keyword\">def</span> <span class=\"token function\">direction</span><span class=\"token punctuation\">(</span>self<span class=\"token punctuation\">)</span> <span class=\"token operator\">-</span><span class=\"token operator\">></span> <span class=\"token builtin\">str</span><span class=\"token punctuation\">:</span>\n        <span class=\"token keyword\">if</span> self<span class=\"token punctuation\">.</span>is_new<span class=\"token punctuation\">:</span>\n            <span class=\"token keyword\">return</span> <span class=\"token string\">\"new\"</span>\n        <span class=\"token keyword\">if</span> self<span class=\"token punctuation\">.</span>is_removed<span class=\"token punctuation\">:</span>\n            <span class=\"token keyword\">return</span> <span class=\"token string\">\"removed\"</span>\n        <span class=\"token keyword\">if</span> self<span class=\"token punctuation\">.</span>delta <span class=\"token operator\">></span> <span class=\"token number\">0</span><span class=\"token punctuation\">:</span>\n            <span class=\"token keyword\">return</span> <span class=\"token string\">\"increased\"</span>\n        <span class=\"token keyword\">if</span> self<span class=\"token punctuation\">.</span>delta <span class=\"token operator\">&lt;</span> <span class=\"token number\">0</span><span class=\"token punctuation\">:</span>\n            <span class=\"token keyword\">return</span> <span class=\"token string\">\"decreased\"</span>\n        <span class=\"token keyword\">return</span> <span class=\"token string\">\"unchanged\"</span>\n\n\n<span class=\"token keyword\">def</span> <span class=\"token function\">compute_book_deltas</span><span class=\"token punctuation\">(</span>\n    prev_snapshot<span class=\"token punctuation\">:</span> <span class=\"token builtin\">dict</span><span class=\"token punctuation\">,</span>\n    curr_snapshot<span class=\"token punctuation\">:</span> <span class=\"token builtin\">dict</span><span class=\"token punctuation\">,</span>\n    side<span class=\"token punctuation\">:</span> <span class=\"token builtin\">str</span> <span class=\"token operator\">=</span> <span class=\"token string\">\"bids\"</span>\n<span class=\"token punctuation\">)</span> <span class=\"token operator\">-</span><span class=\"token operator\">></span> <span class=\"token builtin\">list</span><span class=\"token punctuation\">[</span>LevelDelta<span class=\"token punctuation\">]</span><span class=\"token punctuation\">:</span>\n    <span class=\"token triple-quoted-string string\">\"\"\"\n    Compare two orderbook snapshots and return per-level deltas.\n    Highlights new levels, removed levels, and size changes.\n    \"\"\"</span>\n    prev_levels <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>price<span class=\"token punctuation\">:</span> size <span class=\"token keyword\">for</span> price<span class=\"token punctuation\">,</span> size <span class=\"token keyword\">in</span> prev_snapshot<span class=\"token punctuation\">[</span>side<span class=\"token punctuation\">]</span><span class=\"token punctuation\">}</span>\n    curr_levels <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>price<span class=\"token punctuation\">:</span> size <span class=\"token keyword\">for</span> price<span class=\"token punctuation\">,</span> size <span class=\"token keyword\">in</span> curr_snapshot<span class=\"token punctuation\">[</span>side<span class=\"token punctuation\">]</span><span class=\"token punctuation\">}</span>\n\n    all_prices <span class=\"token operator\">=</span> <span class=\"token builtin\">sorted</span><span class=\"token punctuation\">(</span>\n        <span class=\"token builtin\">set</span><span class=\"token punctuation\">(</span>prev_levels<span class=\"token punctuation\">.</span>keys<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">|</span> <span class=\"token builtin\">set</span><span class=\"token punctuation\">(</span>curr_levels<span class=\"token punctuation\">.</span>keys<span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n        reverse<span class=\"token operator\">=</span><span class=\"token punctuation\">(</span>side <span class=\"token operator\">==</span> <span class=\"token string\">\"bids\"</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">)</span>\n\n    deltas <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span>\n    <span class=\"token keyword\">for</span> price <span class=\"token keyword\">in</span> all_prices<span class=\"token punctuation\">:</span>\n        prev_size <span class=\"token operator\">=</span> prev_levels<span class=\"token punctuation\">.</span>get<span class=\"token punctuation\">(</span>price<span class=\"token punctuation\">,</span> <span class=\"token number\">0.0</span><span class=\"token punctuation\">)</span>\n        curr_size <span class=\"token operator\">=</span> curr_levels<span class=\"token punctuation\">.</span>get<span class=\"token punctuation\">(</span>price<span class=\"token punctuation\">,</span> <span class=\"token number\">0.0</span><span class=\"token punctuation\">)</span>\n\n        deltas<span class=\"token punctuation\">.</span>append<span class=\"token punctuation\">(</span>LevelDelta<span class=\"token punctuation\">(</span>\n            price<span class=\"token operator\">=</span>price<span class=\"token punctuation\">,</span>\n            prev_size<span class=\"token operator\">=</span>prev_size<span class=\"token punctuation\">,</span>\n            curr_size<span class=\"token operator\">=</span>curr_size<span class=\"token punctuation\">,</span>\n            delta<span class=\"token operator\">=</span>curr_size <span class=\"token operator\">-</span> prev_size<span class=\"token punctuation\">,</span>\n            is_new<span class=\"token operator\">=</span><span class=\"token punctuation\">(</span>price <span class=\"token keyword\">not</span> <span class=\"token keyword\">in</span> prev_levels<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n            is_removed<span class=\"token operator\">=</span><span class=\"token punctuation\">(</span>price <span class=\"token keyword\">not</span> <span class=\"token keyword\">in</span> curr_levels<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n\n    <span class=\"token keyword\">return</span> deltas\n\n\n<span class=\"token keyword\">def</span> <span class=\"token function\">compute_spread</span><span class=\"token punctuation\">(</span>snapshot<span class=\"token punctuation\">:</span> <span class=\"token builtin\">dict</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">-</span><span class=\"token operator\">></span> <span class=\"token builtin\">float</span><span class=\"token punctuation\">:</span>\n    <span class=\"token triple-quoted-string string\">\"\"\"Spread as percentage of mid price.\"\"\"</span>\n    <span class=\"token keyword\">if</span> <span class=\"token keyword\">not</span> snapshot<span class=\"token punctuation\">[</span><span class=\"token string\">\"bids\"</span><span class=\"token punctuation\">]</span> <span class=\"token keyword\">or</span> <span class=\"token keyword\">not</span> snapshot<span class=\"token punctuation\">[</span><span class=\"token string\">\"asks\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">:</span>\n        <span class=\"token keyword\">return</span> <span class=\"token builtin\">float</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"inf\"</span><span class=\"token punctuation\">)</span>\n    best_bid <span class=\"token operator\">=</span> snapshot<span class=\"token punctuation\">[</span><span class=\"token string\">\"bids\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span>\n    best_ask <span class=\"token operator\">=</span> snapshot<span class=\"token punctuation\">[</span><span class=\"token string\">\"asks\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span>\n    mid <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span>best_bid <span class=\"token operator\">+</span> best_ask<span class=\"token punctuation\">)</span> <span class=\"token operator\">/</span> <span class=\"token number\">2</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>best_ask <span class=\"token operator\">-</span> best_bid<span class=\"token punctuation\">)</span> <span class=\"token operator\">/</span> mid <span class=\"token operator\">*</span> <span class=\"token number\">100</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<h3 id=\"the-frontend-rendering-orderbook-levels\" style=\"position:relative;\"><a href=\"#the-frontend-rendering-orderbook-levels\" aria-label=\"the frontend rendering orderbook levels permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>The Frontend: Rendering Orderbook Levels</h3>\n<p>The frontend displays 5 consecutive snapshots side by side. Each level is color-coded based on whether size increased (green), decreased (red), is new (blue), or was removed (gray strikethrough).</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-html line-numbers\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>orderbook-window<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>snapshots-container<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>style</span><span class=\"token punctuation\">></span></span><span class=\"token style\"><span class=\"token language-css\">\n  <span class=\"token selector\">.level</span> <span class=\"token punctuation\">{</span> <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> flex<span class=\"token punctuation\">;</span> <span class=\"token property\">font-family</span><span class=\"token punctuation\">:</span> monospace<span class=\"token punctuation\">;</span> <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> 12px<span class=\"token punctuation\">;</span> <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 2px 4px<span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token selector\">.level.increased</span> <span class=\"token punctuation\">{</span> <span class=\"token property\">background</span><span class=\"token punctuation\">:</span> <span class=\"token function\">rgba</span><span class=\"token punctuation\">(</span>0<span class=\"token punctuation\">,</span> 255<span class=\"token punctuation\">,</span> 0<span class=\"token punctuation\">,</span> 0.1<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token selector\">.level.decreased</span> <span class=\"token punctuation\">{</span> <span class=\"token property\">background</span><span class=\"token punctuation\">:</span> <span class=\"token function\">rgba</span><span class=\"token punctuation\">(</span>255<span class=\"token punctuation\">,</span> 0<span class=\"token punctuation\">,</span> 0<span class=\"token punctuation\">,</span> 0.1<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token selector\">.level.new</span> <span class=\"token punctuation\">{</span> <span class=\"token property\">background</span><span class=\"token punctuation\">:</span> <span class=\"token function\">rgba</span><span class=\"token punctuation\">(</span>0<span class=\"token punctuation\">,</span> 100<span class=\"token punctuation\">,</span> 255<span class=\"token punctuation\">,</span> 0.15<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token property\">border-left</span><span class=\"token punctuation\">:</span> 2px solid #06f<span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token selector\">.level.removed</span> <span class=\"token punctuation\">{</span> <span class=\"token property\">opacity</span><span class=\"token punctuation\">:</span> 0.4<span class=\"token punctuation\">;</span> <span class=\"token property\">text-decoration</span><span class=\"token punctuation\">:</span> line-through<span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token selector\">.price</span> <span class=\"token punctuation\">{</span> <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 60px<span class=\"token punctuation\">;</span> <span class=\"token property\">text-align</span><span class=\"token punctuation\">:</span> right<span class=\"token punctuation\">;</span> <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> 8px<span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token selector\">.size</span> <span class=\"token punctuation\">{</span> <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 80px<span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span>\n  <span class=\"token selector\">.delta</span> <span class=\"token punctuation\">{</span> <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 60px<span class=\"token punctuation\">;</span> <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #666<span class=\"token punctuation\">;</span> <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> 11px<span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>style</span><span class=\"token punctuation\">></span></span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-javascript line-numbers\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">renderOrderbookLevel</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">level<span class=\"token punctuation\">,</span> side</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> el <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  el<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">level </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>level<span class=\"token punctuation\">.</span>direction<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">const</span> priceEl <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'span'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  priceEl<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'price'</span><span class=\"token punctuation\">;</span>\n  priceEl<span class=\"token punctuation\">.</span>textContent <span class=\"token operator\">=</span> level<span class=\"token punctuation\">.</span>price<span class=\"token punctuation\">.</span><span class=\"token function\">toFixed</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">const</span> sizeEl <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'span'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  sizeEl<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'size'</span><span class=\"token punctuation\">;</span>\n  sizeEl<span class=\"token punctuation\">.</span>textContent <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">$</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>level<span class=\"token punctuation\">.</span>curr_size<span class=\"token punctuation\">.</span><span class=\"token function\">toFixed</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">const</span> deltaEl <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'span'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  deltaEl<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'delta'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>level<span class=\"token punctuation\">.</span>delta <span class=\"token operator\">!==</span> <span class=\"token number\">0</span> <span class=\"token operator\">&amp;&amp;</span> <span class=\"token operator\">!</span>level<span class=\"token punctuation\">.</span>is_new <span class=\"token operator\">&amp;&amp;</span> <span class=\"token operator\">!</span>level<span class=\"token punctuation\">.</span>is_removed<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> sign <span class=\"token operator\">=</span> level<span class=\"token punctuation\">.</span>delta <span class=\"token operator\">></span> <span class=\"token number\">0</span> <span class=\"token operator\">?</span> <span class=\"token string\">'+'</span> <span class=\"token operator\">:</span> <span class=\"token string\">''</span><span class=\"token punctuation\">;</span>\n    deltaEl<span class=\"token punctuation\">.</span>textContent <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>sign<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>level<span class=\"token punctuation\">.</span>delta<span class=\"token punctuation\">.</span><span class=\"token function\">toFixed</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n    deltaEl<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>color <span class=\"token operator\">=</span> level<span class=\"token punctuation\">.</span>delta <span class=\"token operator\">></span> <span class=\"token number\">0</span> <span class=\"token operator\">?</span> <span class=\"token string\">'#0a0'</span> <span class=\"token operator\">:</span> <span class=\"token string\">'#c00'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>side <span class=\"token operator\">===</span> <span class=\"token string\">'bid'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    el<span class=\"token punctuation\">.</span><span class=\"token function\">append</span><span class=\"token punctuation\">(</span>deltaEl<span class=\"token punctuation\">,</span> sizeEl<span class=\"token punctuation\">,</span> priceEl<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n    el<span class=\"token punctuation\">.</span><span class=\"token function\">append</span><span class=\"token punctuation\">(</span>priceEl<span class=\"token punctuation\">,</span> sizeEl<span class=\"token punctuation\">,</span> deltaEl<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">return</span> el<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">renderSnapshot</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">snapshot<span class=\"token punctuation\">,</span> deltas<span class=\"token punctuation\">,</span> container</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> header <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  header<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'snapshot-header'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> ts <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Date</span><span class=\"token punctuation\">(</span>snapshot<span class=\"token punctuation\">.</span>timestamp<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  header<span class=\"token punctuation\">.</span>textContent <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>ts<span class=\"token punctuation\">.</span><span class=\"token function\">getMinutes</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">:</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>ts<span class=\"token punctuation\">.</span><span class=\"token function\">getSeconds</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">padStart</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">)</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n  container<span class=\"token punctuation\">.</span><span class=\"token function\">appendChild</span><span class=\"token punctuation\">(</span>header<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">const</span> spread <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span>snapshot<span class=\"token punctuation\">.</span>best_ask <span class=\"token operator\">-</span> snapshot<span class=\"token punctuation\">.</span>best_bid<span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> <span class=\"token number\">100</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toFixed</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> spreadEl <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  spreadEl<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'spread-indicator'</span><span class=\"token punctuation\">;</span>\n  spreadEl<span class=\"token punctuation\">.</span>textContent <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">spread: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>spread<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">c</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n  container<span class=\"token punctuation\">.</span><span class=\"token function\">appendChild</span><span class=\"token punctuation\">(</span>spreadEl<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// Render asks (reversed so lowest ask is closest to spread)</span>\n  <span class=\"token keyword\">const</span> askDeltas <span class=\"token operator\">=</span> deltas<span class=\"token punctuation\">.</span>asks<span class=\"token punctuation\">.</span><span class=\"token function\">slice</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">reverse</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  askDeltas<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">level</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    container<span class=\"token punctuation\">.</span><span class=\"token function\">appendChild</span><span class=\"token punctuation\">(</span><span class=\"token function\">renderOrderbookLevel</span><span class=\"token punctuation\">(</span>level<span class=\"token punctuation\">,</span> <span class=\"token string\">'ask'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// Render bids</span>\n  deltas<span class=\"token punctuation\">.</span>bids<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">level</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    container<span class=\"token punctuation\">.</span><span class=\"token function\">appendChild</span><span class=\"token punctuation\">(</span><span class=\"token function\">renderOrderbookLevel</span><span class=\"token punctuation\">(</span>level<span class=\"token punctuation\">,</span> <span class=\"token string\">'bid'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/7bb280a312f933d0d71df95e05a3a201/277c6/viz_orderbook.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 33.108108108108105%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA5ElEQVQoz2VRW27EMAjMUWzHvJyVqq16/6vRwZDdrfoxgoFhAs6xnj9uX99Oat5a89aHj3N6R2y9ex+nn5Oyhry17gNxjLHzN8/eQRAysROR0ywUZ5a/EC0tv+KtDz7nhCGDqPiOIi6Py/V6uOjlsi7UOHsxtE1Ly2kYmoACJCsMIVDdog3DFmY5jGeQtRKR29qGaVrGmA1dbB+1I75sUgbIldVN1xaIRG5uhg3CEHWBLuoR81R68YnzjzR5n2TYYsGAAQmgJzUY/ZtLnaylz5MNJ9+P+w/vn3LX9k/54FRL0IfuF1jyyguyL7/5AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"L2 Orderbook Visualization\"\n        title=\"L2 Orderbook Visualization\"\n        src=\"/static/7bb280a312f933d0d71df95e05a3a201/fcda8/viz_orderbook.png\"\n        srcset=\"/static/7bb280a312f933d0d71df95e05a3a201/12f09/viz_orderbook.png 148w,\n/static/7bb280a312f933d0d71df95e05a3a201/e4a3f/viz_orderbook.png 295w,\n/static/7bb280a312f933d0d71df95e05a3a201/fcda8/viz_orderbook.png 590w,\n/static/7bb280a312f933d0d71df95e05a3a201/efc66/viz_orderbook.png 885w,\n/static/7bb280a312f933d0d71df95e05a3a201/c83ae/viz_orderbook.png 1180w,\n/static/7bb280a312f933d0d71df95e05a3a201/277c6/viz_orderbook.png 2522w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>The visualization above shows 5 consecutive L2 orderbook snapshots for both UP and DOWN outcomes. You can clearly see the book evolving — levels appearing and disappearing, sizes adjusting, spreads tightening and widening.</p>\n<h2 id=\"observations-from-the-data\" style=\"position:relative;\"><a href=\"#observations-from-the-data\" aria-label=\"observations from the data permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Observations From the Data</h2>\n<p>After watching a few hundred of these 5-minute contracts, some patterns become very clear.</p>\n<h3 id=\"spread-dynamics-tight-at-start-wide-near-expiry\" style=\"position:relative;\"><a href=\"#spread-dynamics-tight-at-start-wide-near-expiry\" aria-label=\"spread dynamics tight at start wide near expiry permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Spread Dynamics: Tight at Start, Wide Near Expiry</h3>\n<p>At market open (T+0), spreads are typically 2-4 cents. Market makers are happy to provide liquidity because there’s plenty of time for the underlying (BTC) to move and create trading opportunities.</p>\n<p>As expiry approaches (T+4:30 onwards), spreads blow out to 8-15 cents. This makes total sense — the market maker’s gamma risk is enormous in the last few seconds. A $10 move in BTC can flip the outcome, and you don’t want to be caught on the wrong side with tight quotes.</p>\n<h3 id=\"liquidity-clustering-around-key-levels\" style=\"position:relative;\"><a href=\"#liquidity-clustering-around-key-levels\" aria-label=\"liquidity clustering around key levels permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Liquidity Clustering Around Key Levels</h3>\n<p>Unsurprisingly, the thickest liquidity clusters around:</p>\n<ul>\n<li><strong>0.50</strong>: The “I have no idea” price. Early in the contract when BTC hasn’t moved much, both sides stack size at 50 cents.</li>\n<li><strong>Round numbers (0.20, 0.30, 0.70, 0.80)</strong>: Psychological anchors. People set limit orders at these levels.</li>\n<li><strong>0.05 and 0.95</strong>: The “almost certain” levels. Large size here from people willing to bet on near-certainties at favorable odds.</li>\n</ul>\n<h3 id=\"size-delta-patterns-market-maker-inventory-management\" style=\"position:relative;\"><a href=\"#size-delta-patterns-market-maker-inventory-management\" aria-label=\"size delta patterns market maker inventory management permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Size Delta Patterns: Market Maker Inventory Management</h3>\n<p>The deltas reveal classic market-making behavior:</p>\n<ol>\n<li><strong>Symmetric pulls</strong>: When a market maker wants to reduce exposure, they simultaneously reduce size on both bid and ask. You see negative deltas on both sides in the same snapshot.</li>\n<li><strong>Leaning</strong>: When BTC starts trending in one direction, you can see market makers shift their quotes — adding size on the side they want to get filled, reducing on the side they don’t.</li>\n<li><strong>Refreshing</strong>: After a fill, new size appears at the same or adjacent level within 2-4 seconds. This is the MM replenishing their quote.</li>\n</ol>\n<h3 id=\"the-close-event-last-10-seconds\" style=\"position:relative;\"><a href=\"#the-close-event-last-10-seconds\" aria-label=\"the close event last 10 seconds permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>The “Close” Event: Last 10 Seconds</h3>\n<p>The final 10 seconds are wild. Here’s what consistently happens:</p>\n<ol>\n<li><strong>T-10s</strong>: Market makers start pulling quotes aggressively. Book thins out.</li>\n<li><strong>T-7s</strong>: Spreads hit maximum. Only stale quotes remain.</li>\n<li><strong>T-5s</strong>: Aggressive traders market-order into whatever’s left, knowing the outcome is nearly certain.</li>\n<li><strong>T-2s</strong>: Book is basically empty. Anyone still quoting is either a bot with a direct feed or someone who forgot to cancel.</li>\n</ol>\n<p>The delta visualization makes this collapse very visible — you see a cascade of “removed” levels (gray strikethrough) rippling through the book in the final snapshots.</p>\n<h2 id=\"market-efficiency-implications\" style=\"position:relative;\"><a href=\"#market-efficiency-implications\" aria-label=\"market efficiency implications permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Market Efficiency Implications</h2>\n<p>A few takeaways about market efficiency in these ultra-short contracts:</p>\n<p><strong>These markets are surprisingly efficient mid-life.</strong> Between T+30s and T+4:00, the prices track BTC movements well. The orderbook adjusts within 2-4 seconds of BTC price changes.</p>\n<p><strong>But they’re inefficient at the edges.</strong> In the first 10 seconds and last 10 seconds, there are clear mispricings. At open, it takes time for the book to populate and find fair value. At close, the liquidity vacuum creates slippage that benefits anyone with a fast feed.</p>\n<p><strong>The spread IS the market’s uncertainty measure.</strong> Wider spreads = more disagreement about the outcome. You can actually use the spread time series as a proxy for realized volatility of the underlying during that 5-minute window.</p>\n<p><strong>Size matters more than price.</strong> A level with $5,000 behind it at 0.48 is much more informative than a level with $20 at 0.52. The orderbook depth weighted by size gives you a better probability estimate than the mid-price alone.</p>\n<h2 id=\"whats-next\" style=\"position:relative;\"><a href=\"#whats-next\" aria-label=\"whats next permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What’s Next</h2>\n<p>I’m planning to:</p>\n<ul>\n<li>Add historical spread analytics per market (average spread curve over contract lifetime)</li>\n<li>Build a simple signal from book imbalance (total bid size vs total ask size) to predict short-term direction</li>\n<li>Overlay BTC price feed to correlate orderbook changes with underlying movements</li>\n</ul>\n<p>The visualizer has been a great tool for building intuition about these markets. If you’re interested in prediction market microstructure, I’d highly recommend building something similar — there’s no substitute for watching the books move in real time.</p>\n<p>The full code is a mess of FastAPI routes and vanilla JS spaghetti, but the core logic above should be enough to get you started. The Polymarket CLOB API is well-documented and rate limits are generous enough for 2-second polling on a handful of markets.</p>","tableOfContents":"<ul>\n<li><a href=\"/polymarket-orderbook-analysis/#why-orderbook-analysis-matters-for-prediction-markets\">Why Orderbook Analysis Matters for Prediction Markets</a></li>\n<li><a href=\"/polymarket-orderbook-analysis/#l2-orderbook-structure-on-polymarket\">L2 Orderbook Structure on Polymarket</a></li>\n<li>\n<p><a href=\"/polymarket-orderbook-analysis/#building-the-orderbook-visualizer\">Building the Orderbook Visualizer</a></p>\n<ul>\n<li><a href=\"/polymarket-orderbook-analysis/#architecture-fastapi--vanilla-js\">Architecture: FastAPI + Vanilla JS</a></li>\n<li><a href=\"/polymarket-orderbook-analysis/#snapshot-caching-with-lru\">Snapshot Caching with LRU</a></li>\n<li><a href=\"/polymarket-orderbook-analysis/#computing-deltas-between-snapshots\">Computing Deltas Between Snapshots</a></li>\n<li><a href=\"/polymarket-orderbook-analysis/#the-frontend-rendering-orderbook-levels\">The Frontend: Rendering Orderbook Levels</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/polymarket-orderbook-analysis/#observations-from-the-data\">Observations From the Data</a></p>\n<ul>\n<li><a href=\"/polymarket-orderbook-analysis/#spread-dynamics-tight-at-start-wide-near-expiry\">Spread Dynamics: Tight at Start, Wide Near Expiry</a></li>\n<li><a href=\"/polymarket-orderbook-analysis/#liquidity-clustering-around-key-levels\">Liquidity Clustering Around Key Levels</a></li>\n<li><a href=\"/polymarket-orderbook-analysis/#size-delta-patterns-market-maker-inventory-management\">Size Delta Patterns: Market Maker Inventory Management</a></li>\n<li><a href=\"/polymarket-orderbook-analysis/#the-close-event-last-10-seconds\">The “Close” Event: Last 10 Seconds</a></li>\n</ul>\n</li>\n<li><a href=\"/polymarket-orderbook-analysis/#market-efficiency-implications\">Market Efficiency Implications</a></li>\n<li><a href=\"/polymarket-orderbook-analysis/#whats-next\">What’s Next</a></li>\n</ul>","frontmatter":{"title":"Analyzing Bid-Ask Spreads and Liquidity Shifts in Polymarket's 5-Minute Binary Option Orderbooks","date":"March 18, 2026","description":"A deep dive into the microstructure of Polymarket's 5-minute BTC binary option orderbooks, examining spread dynamics, liquidity patterns, and building a visualization tool."}}},"pageContext":{"slug":"/polymarket-orderbook-analysis/","previous":{"fields":{"slug":"/crypto-data-pipeline/"},"frontmatter":{"title":"Processing 155 Million Orderbook Records: Building a Fast Data Pipeline for Crypto Microstructure Analysis"}},"next":{"fields":{"slug":"/volatility-oracle-prototype/"},"frontmatter":{"title":"Building a Volatility Oracle Prototype: Computing Realized Volatility from Orderbook Data and Serving It On-Chain"}}}}}