{ "id": "contour-plot-latency-capacity-surface", "schemaVersion": 2, "title": { "ja": "同時接続数とキャッシュ命中率 — 応答遅延の等値線", "en": "Concurrency and Cache Hit Rate — Latency Contours" }, "summary": { "ja": "連続する二変数応答面を等しいp95応答時間の境界線と内側の段階色で示すcontour plot", "en": "A contour plot encodes a continuous two-variable response surface with equal-p95-latency isolines and nested bands." }, "capturedAt": "2026-09-25", "categories": [ "presentation" ], "tags": [ "data-viz", "minimal" ], "useCases": [ "comparison", "comparison" ], "format": "slide-16x9", "density": "medium", "layout": { "kind": "axis", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 100, "right": 140, "bottom": 100, "left": 140 } }, "type": { "title": { "size": 46, "weight": 700, "tracking": "0.01em" }, "subtitle": { "size": 22, "weight": 500 }, "axisTitle": { "size": 22, "weight": 700 }, "tick": { "size": 20, "weight": 500 }, "legend": { "size": 20, "weight": 500 }, "takeaway": { "size": 28, "weight": 500 }, "note": { "size": 20, "weight": 400 } }, "colors": { "ground": "#FFFFFF", "surface": "#F4F6F9", "ink": "#131820", "muted": "#667183", "accent": "#1F5FA8", "rule": "#DBE1E9", "series": [ "#5D8FB8", "#96B9D4", "#C8DBEA", "#E8F0F7" ] }, "rules": [ { "ja": "横軸は同時接続数0–500、縦軸はキャッシュ命中率0–100%", "en": "The x-axis is concurrency from 0 to 500 and the y-axis is cache hit rate from 0 to 100%." }, { "ja": "等値線100/110/120/130msは応答面z=70+0.0005(x−250)^2+0.04(y−70)^2の境界", "en": "The 100/110/120/130 ms contours are level sets of z=70+0.0005(x−250)^2+0.04(y−70)^2." }, { "ja": "色面は内側が低遅延、外側が高遅延となるように入れ子で塗り分ける", "en": "Nested bands use deeper fills toward lower latency and lighter fills outside." }, { "ja": "架空モデルの応答面であり、実環境計測や容量保証を示さない", "en": "A synthetic response surface, not real-world measurements or a capacity guarantee." } ], "cover": "https://design-vault.pages.dev/_astro/cover.B6l6grAQ.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "medium", "layout": { "kind": "axis", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 100, "right": 140, "bottom": 100, "left": 140 } }, "type": { "title": { "size": 46, "weight": 700, "tracking": "0.01em" }, "subtitle": { "size": 22, "weight": 500 }, "axisTitle": { "size": 22, "weight": 700 }, "tick": { "size": 20, "weight": 500 }, "legend": { "size": 20, "weight": 500 }, "takeaway": { "size": 28, "weight": 500 }, "note": { "size": 20, "weight": 400 } }, "colors": { "ground": "#FFFFFF", "surface": "#F4F6F9", "ink": "#131820", "muted": "#667183", "accent": "#1F5FA8", "rule": "#DBE1E9", "series": [ "#5D8FB8", "#96B9D4", "#C8DBEA", "#E8F0F7" ] }, "rules": [ "The x-axis is concurrency from 0 to 500 and the y-axis is cache hit rate from 0 to 100%.", "The 100/110/120/130 ms contours are level sets of z=70+0.0005(x−250)^2+0.04(y−70)^2.", "Nested bands use deeper fills toward lower latency and lighter fills outside.", "A synthetic response surface, not real-world measurements or a capacity guarantee." ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 100 右 140 下 100 左 140\n\n## 文字（版面 1920px に対する px）\ntitle 46px / 700 / 字間 0.01em\nsubtitle 22px / 500\naxisTitle 22px / 700\ntick 20px / 500\nlegend 20px / 500\ntakeaway 28px / 500\nnote 20px / 400\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #5D8FB8 / #96B9D4 / #C8DBEA / #E8F0F7\n\n## 外すと崩れる点\n- 横軸は同時接続数0–500、縦軸はキャッシュ命中率0–100%\n- 等値線100/110/120/130msは応答面z=70+0.0005(x−250)^2+0.04(y−70)^2の境界\n- 色面は内側が低遅延、外側が高遅延となるように入れ子で塗り分ける\n- 架空モデルの応答面であり、実環境計測や容量保証を示さない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/contour-plot-latency-capacity-surface/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 100 right 140 bottom 100 left 140\n\n## Type (px against a 1920px canvas)\ntitle 46px / 700 / tracking 0.01em\nsubtitle 22px / 500\naxisTitle 22px / 700\ntick 20px / 500\nlegend 20px / 500\ntakeaway 28px / 500\nnote 20px / 400\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #5D8FB8 / #96B9D4 / #C8DBEA / #E8F0F7\n\n## Constraints — dropping these breaks it\n- The x-axis is concurrency from 0 to 500 and the y-axis is cache hit rate from 0 to 100%.\n- The 100/110/120/130 ms contours are level sets of z=70+0.0005(x−250)^2+0.04(y−70)^2.\n- Nested bands use deeper fills toward lower latency and lighter fills outside.\n- A synthetic response surface, not real-world measurements or a capacity guarantee.\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/contour-plot-latency-capacity-surface/pattern.html." }, "code": { "html": "同時接続数とキャッシュ命中率 — 応答遅延の等値線
\n同時接続数とキャッシュ命中率 — 応答遅延の等値線p95応答時間の連続応答面 / 架空の性能モデルp95応答時間（ms）— 等しい遅延の境界を追う01002003004005000%25%50%75%100%同時接続数キャッシュ命中率等遅延線（ms）100 ms110 ms120 ms130 ms低遅延域250同時接続命中率70%命中率70%付近なら、250接続でもp95は約70ms等値線はモデルの近似出力。実環境の計測・容量保証ではない。
", "url": "https://design-vault.pages.dev/designs/contour-plot-latency-capacity-surface/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/contour-plot-latency-capacity-surface/font.css", "https://design-vault.pages.dev/designs/contour-plot-latency-capacity-surface/font-0.woff2", "https://design-vault.pages.dev/designs/contour-plot-latency-capacity-surface/font-1.woff2", "https://design-vault.pages.dev/designs/contour-plot-latency-capacity-surface/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/contour-plot-latency-capacity-surface", "en": "https://design-vault.pages.dev/en/designs/contour-plot-latency-capacity-surface" }, "notesMarkdown": "### 視覚的な問い\n同時接続数とキャッシュ命中率の組み合わせを変えると、p95応答時間が同じになる境界や低遅延域はどこに現れるか。\n\n### 構造\n横軸に同時接続数、縦軸にキャッシュ命中率を置いた連続な二変数平面を描く。曲線は同じp95応答時間となる等値線で、内側へ進むほど低遅延になる。塗り分けた帯と等値線を一緒に追うことで、二入力の組み合わせに対する応答面の形と閾値の境界を読む。点を六角形ビンへ集約して点密度を比較するhexbinとは異なり、観測点頻度ではなく連続した応答値の高さを示す。\n\n架空モデルでは同時接続250、キャッシュ命中率70%が約70msの中心低遅延域で、そこから変数を離すと遅延等値線が高くなる。実測ではないため、実環境の性能予測には利用しない。" }