{
  "id": "polar-area-chart-support-ticket-mix",
  "schemaVersion": 2,
  "title": {
    "ja": "問い合わせの内訳 — 応答遅延が最多64件",
    "en": "Support Ticket Mix — Response Delay Leads with 64 Cases"
  },
  "summary": {
    "ja": "各カテゴリを等角度の扇形に割り当て、半径の二乗で面積を件数に比例させるpolar area chart",
    "en": "A polar area chart gives categories equal angles and scales sector area with the square of radius so area is proportional to count."
  },
  "capturedAt": "2026-09-25",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz",
    "minimal"
  ],
  "useCases": [
    "comparison",
    "comparison"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "radial",
    "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
    },
    "category": {
      "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": []
  },
  "rules": [
    {
      "ja": "カテゴリに等しい45度の中心角を与える",
      "en": "Give every category the same 45-degree central angle."
    },
    {
      "ja": "半径を件数の平方根に比例させ、扇形面積を件数に比例させる",
      "en": "Make radius proportional to the square root of count so sector area is proportional to count."
    },
    {
      "ja": "半径目盛りは面積変換に使った参照線であり、線形な件数目盛りとして読まない",
      "en": "Concentric rings are reference lines for the area mapping, not a linear count scale."
    },
    {
      "ja": "架空の月間228件。期間・カテゴリ定義を揃え、重複分類しない",
      "en": "Fictional monthly total of 228 tickets; align the period and category definitions without double-counting."
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.BOG-ny1B.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": []
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "radial",
        "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
        },
        "category": {
          "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"
      },
      "rules": [
        "Give every category the same 45-degree central angle.",
        "Make radius proportional to the square root of count so sector area is proportional to count.",
        "Concentric rings are reference lines for the area mapping, not a linear count scale.",
        "Fictional monthly total of 228 tickets; align the period and category definitions without double-counting."
      ]
    },
    "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\ncategory  20px / 500\nlegend  20px / 500\ntakeaway  28px / 500\nnote  20px / 400\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- カテゴリに等しい45度の中心角を与える\n- 半径を件数の平方根に比例させ、扇形面積を件数に比例させる\n- 半径目盛りは面積変換に使った参照線であり、線形な件数目盛りとして読まない\n- 架空の月間228件。期間・カテゴリ定義を揃え、重複分類しない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/polar-area-chart-support-ticket-mix/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\ncategory  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\n\n## Constraints — dropping these breaks it\n- Give every category the same 45-degree central angle.\n- Make radius proportional to the square root of count so sector area is proportional to count.\n- Concentric rings are reference lines for the area mapping, not a linear count scale.\n- Fictional monthly total of 228 tickets; align the period and category definitions without double-counting.\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/polar-area-chart-support-ticket-mix/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>問い合わせの内訳 — 応答遅延が最多64件</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;500;700\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n:root{--ground:#FFFFFF;--surface:#F4F6F9;--ink:#131820;--muted:#667183;--accent:#1F5FA8;--rule:#DBE1E9;\n  --plot-color-1: #C16A24;\n}\n*{box-sizing:border-box;margin:0}html,body{width:1920px;height:1080px}body{font-family:\"Zen Kaku Gothic New\",\"Hiragino Sans\",sans-serif}\n.artboard{width:1920px;height:1080px;padding:100px 140px;background:var(--ground);color:var(--ink)}.content{width:100%;height:100%;position:relative}.figure{position:absolute;left:-140px;top:-100px;width:1920px;height:1080px}\n</style>\n<div class=\"artboard\" data-artboard><div class=\"content\" data-content>\n<svg class=\"figure\" width=\"1920\" height=\"1080\" viewBox=\"0 0 1920 1080\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"月間サポート問い合わせ228件のカテゴリ別件数を等角度の扇形面積で示すpolar area chart。応答遅延64件が最大、アクセス4件が最小。\">\n<style>\n.figure{font-family:\"Zen Kaku Gothic New\",\"Hiragino Sans\",sans-serif}.ground{fill:var(--ground)}.ink{fill:var(--ink)}.muted{fill:var(--muted)}.rule{stroke:var(--rule)}\n.title{font-size:46px;font-weight:700;letter-spacing:.01em}.subtitle{font-size:22px;font-weight:500}.axis-title{font-size:22px;font-weight:700}.legend{font-size:20px;font-weight:500}.category{font-size:20px;font-weight:500}.takeaway{font-size:28px;font-weight:500}.note{font-size:20px;font-weight:400}\n.sector{fill:var(--accent);stroke:var(--ground);stroke-width:3}.max{fill:var(--plot-color-1)}.grid{fill:none;stroke:var(--rule);stroke-width:2}.spoke{stroke:var(--ground);stroke-width:3}\n</style>\n<rect class=\"ground\" width=\"1920\" height=\"1080\"/>\n<text class=\"ink title\" data-type=\"title\" x=\"140\" y=\"153\">問い合わせの内訳 — 応答遅延が最多64件</text>\n<text class=\"muted subtitle\" data-type=\"subtitle\" x=\"140\" y=\"201\">月間サポート問い合わせ 228件 / 架空データ / 各カテゴリの中心角は同じ</text>\n<line class=\"rule\" x1=\"140\" y1=\"238\" x2=\"1780\" y2=\"238\" stroke-width=\"2\"/>\n<text class=\"ink axis-title\" data-type=\"axisTitle\" x=\"960\" y=\"294\" text-anchor=\"middle\">扇形の面積で、問い合わせ件数の大小を比べる</text>\n<g class=\"sector\">\n<path d=\"M960 570 L944.7 533.0 A40 40 0 0 1 975.3 533.0 Z\"/>\n<path d=\"M960 570 L983.0 514.6 A60 60 0 0 1 1015.4 547.0 Z\"/>\n<path d=\"M960 570 L1033.9 539.4 A80 80 0 0 1 1033.9 600.6 Z\"/>\n<path d=\"M960 570 L1052.4 608.3 A100 100 0 0 1 998.3 662.4 Z\"/>\n<path d=\"M960 570 L1005.9 680.9 A120 120 0 0 1 914.1 680.9 Z\"/>\n<path d=\"M960 570 L906.4 699.3 A140 140 0 0 1 830.7 623.6 Z\"/>\n<path class=\"max\" d=\"M960 570 L812.2 631.2 A160 160 0 0 1 812.2 508.8 Z\"/>\n<path d=\"M960 570 L867.6 531.7 A100 100 0 0 1 921.7 477.6 Z\"/>\n</g>\n<g class=\"grid\">\n<circle cx=\"960\" cy=\"570\" r=\"40\"/><circle cx=\"960\" cy=\"570\" r=\"80\"/><circle cx=\"960\" cy=\"570\" r=\"120\"/><circle cx=\"960\" cy=\"570\" r=\"160\"/>\n</g>\n<g class=\"spoke\"><path d=\"M960 570 L944.7 533.0 M960 570 L983.0 514.6 M960 570 L1033.9 539.4 M960 570 L1052.4 608.3 M960 570 L1005.9 680.9 M960 570 L906.4 699.3 M960 570 L812.2 631.2 M960 570 L867.6 531.7\" fill=\"none\"/></g>\n<g class=\"muted category\" text-anchor=\"middle\">\n<text data-type=\"category\" x=\"960\" y=\"342\">アクセス 4</text><text x=\"1115\" y=\"407\">請求 9</text><text x=\"1200\" y=\"578\">初期設定 16</text><text x=\"1115\" y=\"750\">同期 25</text>\n<text x=\"960\" y=\"818\">エクスポート 36</text><text x=\"805\" y=\"750\">検索 49</text><text class=\"ink\" x=\"720\" y=\"578\">応答遅延 64</text><text x=\"805\" y=\"407\">操作 25</text>\n</g>\n<circle cx=\"730\" cy=\"875\" r=\"10\" fill=\"var(--accent)\"/><text class=\"ink legend\" x=\"752\" y=\"882\">カテゴリ別件数に比例した扇形面積</text>\n<circle cx=\"1195\" cy=\"875\" r=\"10\" fill=\"var(--plot-color-1)\"/><text class=\"ink legend\" x=\"1217\" y=\"882\">最多カテゴリ</text>\n<text class=\"ink takeaway\" data-type=\"takeaway\" x=\"960\" y=\"940\" text-anchor=\"middle\">応答遅延はアクセス問い合わせの16倍 — 面積で差を見る</text>\n<line class=\"rule\" x1=\"140\" y1=\"974\" x2=\"1780\" y2=\"974\" stroke-width=\"1\"/><text class=\"muted note\" data-type=\"note\" x=\"140\" y=\"1013\">等角度のため面積が件数に比例する。半径目盛りを量として読まず、扇形の広さで比較する。</text>\n</svg></div></div>\n",
      "url": "https://design-vault.pages.dev/designs/polar-area-chart-support-ticket-mix/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/polar-area-chart-support-ticket-mix/font.css",
        "https://design-vault.pages.dev/designs/polar-area-chart-support-ticket-mix/font-0.woff2",
        "https://design-vault.pages.dev/designs/polar-area-chart-support-ticket-mix/font-1.woff2",
        "https://design-vault.pages.dev/designs/polar-area-chart-support-ticket-mix/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/polar-area-chart-support-ticket-mix",
    "en": "https://design-vault.pages.dev/en/designs/polar-area-chart-support-ticket-mix"
  },
  "notesMarkdown": "### 視覚的な問い\n\n月間の問い合わせはどのカテゴリに多く、最大のカテゴリは最小の何倍にあたるか。\n\n### 構造\n\n8カテゴリを同じ45度の扇形に割り当て、半径を件数の平方根に比例させる。これにより、各扇形の面積が元の件数に\n比例する。応答遅延は64件、アクセスは4件で、件数比は16倍。橙は最多カテゴリを強調している。\n\nレーダー図は複数指標の形状を比較するが、このpolar area chartは等角度のカテゴリごとに値の面積を比べる。\n見た目の半径をそのまま件数として読まず、面積で比較する。値・対象期間・カテゴリは架空の例。"
}