1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.
Everything in this panel, including the contents behind each URL, in one Markdown file — Large, so it goes as a file (copy is for 32 KB and under)
Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 100 right 140 bottom 100 left 140 ## Type (px against a 1920px canvas) title 46px / 700 / tracking 0.01em subtitle 22px / 500 axisTitle 22px / 700 category 20px / 500 legend 20px / 500 takeaway 28px / 500 note 20px / 400 ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 ## Constraints — dropping these breaks it - 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. Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/polar-area-chart-support-ticket-mix/pattern.html.
/ai/designs/polar-area-chart-support-ticket-mix.json
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.{
"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."
]
} /designs/polar-area-chart-support-ticket-mix/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>問い合わせの内訳 — 応答遅延が最多64件</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
:root{--ground:#FFFFFF;--surface:#F4F6F9;--ink:#131820;--muted:#667183;--accent:#1F5FA8;--rule:#DBE1E9;
--plot-color-1: #C16A24;
}
*{box-sizing:border-box;margin:0}html,body{width:1920px;height:1080px}body{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}
.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}
</style>
<div class="artboard" data-artboard><div class="content" data-content>
<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件が最小。">
<style>
.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)}
.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}
.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}
</style>
<rect class="ground" width="1920" height="1080"/>
<text class="ink title" data-type="title" x="140" y="153">問い合わせの内訳 — 応答遅延が最多64件</text>
<text class="muted subtitle" data-type="subtitle" x="140" y="201">月間サポート問い合わせ 228件 / 架空データ / 各カテゴリの中心角は同じ</text>
<line class="rule" x1="140" y1="238" x2="1780" y2="238" stroke-width="2"/>
<text class="ink axis-title" data-type="axisTitle" x="960" y="294" text-anchor="middle">扇形の面積で、問い合わせ件数の大小を比べる</text>
<g class="sector">
<path d="M960 570 L944.7 533.0 A40 40 0 0 1 975.3 533.0 Z"/>
<path d="M960 570 L983.0 514.6 A60 60 0 0 1 1015.4 547.0 Z"/>
<path d="M960 570 L1033.9 539.4 A80 80 0 0 1 1033.9 600.6 Z"/>
<path d="M960 570 L1052.4 608.3 A100 100 0 0 1 998.3 662.4 Z"/>
<path d="M960 570 L1005.9 680.9 A120 120 0 0 1 914.1 680.9 Z"/>
<path d="M960 570 L906.4 699.3 A140 140 0 0 1 830.7 623.6 Z"/>
<path class="max" d="M960 570 L812.2 631.2 A160 160 0 0 1 812.2 508.8 Z"/>
<path d="M960 570 L867.6 531.7 A100 100 0 0 1 921.7 477.6 Z"/>
</g>
<g class="grid">
<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"/>
</g>
<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>
<g class="muted category" text-anchor="middle">
<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>
<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>
</g>
<circle cx="730" cy="875" r="10" fill="var(--accent)"/><text class="ink legend" x="752" y="882">カテゴリ別件数に比例した扇形面積</text>
<circle cx="1195" cy="875" r="10" fill="var(--plot-color-1)"/><text class="ink legend" x="1217" y="882">最多カテゴリ</text>
<text class="ink takeaway" data-type="takeaway" x="960" y="940" text-anchor="middle">応答遅延はアクセス問い合わせの16倍 — 面積で差を見る</text>
<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>
</svg></div></div>
/designs/polar-area-chart-support-ticket-mix/font.css — Not in Everything
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 102 (40022882e065e934)
*
* pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
* 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
* その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
*/
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(./font-0.woff2) format('woff2');
unicode-range: U+2f, U+31-36, U+38-39, U+2014, U+3001-3002, U+3044, U+304b-304c, U+3055-305c, U+305f-3060, U+3066-3069, U+306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+308a-308b, U+308f, U+3092, U+3099-309a, U+30a2, U+30a8, U+30ab-30ac, U+30af-30b0, U+30b3-30b6, U+30b9-30bc, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30ea, U+30fc, U+4e2d, U+4ef6, U+4f5c, U+4f8b, U+500d, U+5185, U+521d, U+5225, U+534a, U+5404, U+5408, U+540c, U+554f, U+591a, U+5927, U+5b9a, U+5c0f, U+5dee, U+5e83, U+5ea6, U+5ef6, U+5f62, U+5f84, U+5fc3, U+5fdc, U+6247, U+64cd, U+6570, U+6700, U+6708, U+671f, U+67b6, U+691c, U+6bd4, U+6c42, U+76db, U+76ee, U+7a4d, U+7a7a, U+7b49, U+7b54, U+7d22, U+898b, U+89d2, U+8a2d, U+8a33, U+8aad, U+8acb, U+8f03, U+9045, U+91cf, U+9593, U+9762;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 500;
font-display: block;
src: url(./font-1.woff2) format('woff2');
unicode-range: U+2f, U+31-36, U+38-39, U+2014, U+3001-3002, U+3044, U+304b-304c, U+3055-305c, U+305f-3060, U+3066-3069, U+306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+308a-308b, U+308f, U+3092, U+3099-309a, U+30a2, U+30a8, U+30ab-30ac, U+30af-30b0, U+30b3-30b6, U+30b9-30bc, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30ea, U+30fc, U+4e2d, U+4ef6, U+4f5c, U+4f8b, U+500d, U+5185, U+521d, U+5225, U+534a, U+5404, U+5408, U+540c, U+554f, U+591a, U+5927, U+5b9a, U+5c0f, U+5dee, U+5e83, U+5ea6, U+5ef6, U+5f62, U+5f84, U+5fc3, U+5fdc, U+6247, U+64cd, U+6570, U+6700, U+6708, U+671f, U+67b6, U+691c, U+6bd4, U+6c42, U+76db, U+76ee, U+7a4d, U+7a7a, U+7b49, U+7b54, U+7d22, U+898b, U+89d2, U+8a2d, U+8a33, U+8aad, U+8acb, U+8f03, U+9045, U+91cf, U+9593, U+9762;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 700;
font-display: block;
src: url(./font-2.woff2) format('woff2');
unicode-range: U+2f, U+31-36, U+38-39, U+2014, U+3001-3002, U+3044, U+304b-304c, U+3055-305c, U+305f-3060, U+3066-3069, U+306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+308a-308b, U+308f, U+3092, U+3099-309a, U+30a2, U+30a8, U+30ab-30ac, U+30af-30b0, U+30b3-30b6, U+30b9-30bc, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30ea, U+30fc, U+4e2d, U+4ef6, U+4f5c, U+4f8b, U+500d, U+5185, U+521d, U+5225, U+534a, U+5404, U+5408, U+540c, U+554f, U+591a, U+5927, U+5b9a, U+5c0f, U+5dee, U+5e83, U+5ea6, U+5ef6, U+5f62, U+5f84, U+5fc3, U+5fdc, U+6247, U+64cd, U+6570, U+6700, U+6708, U+671f, U+67b6, U+691c, U+6bd4, U+6c42, U+76db, U+76ee, U+7a4d, U+7a7a, U+7b49, U+7b54, U+7d22, U+898b, U+89d2, U+8a2d, U+8a33, U+8aad, U+8acb, U+8f03, U+9045, U+91cf, U+9593, U+9762;
}
月間の問い合わせはどのカテゴリに多く、最大のカテゴリは最小の何倍にあたるか。
8カテゴリを同じ45度の扇形に割り当て、半径を件数の平方根に比例させる。これにより、各扇形の面積が元の件数に 比例する。応答遅延は64件、アクセスは4件で、件数比は16倍。橙は最多カテゴリを強調している。
レーダー図は複数指標の形状を比較するが、このpolar area chartは等角度のカテゴリごとに値の面積を比べる。 見た目の半径をそのまま件数として読まず、面積で比較する。値・対象期間・カテゴリは架空の例。