blog-chart

ブログチャート：組み込み SVG データビジュアライゼーション

ブログ記事用に、ダークモードに対応したインライン SVG チャートを生成します。チャートに適したデータが見つかった場合、blog-write と blog-rewrite から内部的に呼び出されます。ユーザー向けの単独コマンドではありません。

スタイルの信頼できる情報源： references/visual-media.md

入力形式

ライターまたはリサーチャーがチャートのリクエストを渡します。

Chart Request:
- Type: horizontal bar
- Title: "AI Citation Sources by Platform"
- Data: ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, Reddit 7.15%
- Source: Ahrefs, December 2025
- Platform: mdx (or html)

チャートタイプの選択

データのパターンに基づいて選択します。多様性は必須です。1つの記事内で同じタイプを繰り返さないでください。

データパターン	最適なチャートタイプ
前後の比較	グループ化棒グラフ
要因の順位付け／相関関係	ロリポップチャート
全体に占める割合／市場シェア	ドーナツチャート
時系列の傾向	折れ線グラフ
改善率	横棒グラフ
分布／範囲	面グラフ
多次元のスコアリング	レーダーチャート

スタイル規則（必須）

すべてのチャートは、ダーク背景とライト背景の両方で動作する必要があります。

Text elements:     fill="currentColor"
Grid lines:        stroke="currentColor" opacity="0.08"
Axis lines:        stroke="currentColor" opacity="0.3"
Background:        transparent (no fill on root SVG)
Subtitle text:     fill="currentColor" opacity="0.45"
Source text:        fill="currentColor" opacity="0.35"
Label text:        fill="currentColor" opacity="0.8"

カラーパレット

色	Hex	用途
オレンジ	#f97316	プライマリ／最大値
スカイブルー	#38bdf8	セカンダリ／比較
パープル	#a78bfa	ターシャリ／特別なカテゴリ
グリーン	#22c55e	クォータナリ／肯定的な指標

色付きの要素内のテキストには、fill="white" と fontWeight="800" を指定します。

標準 SVG シェル（HTML）

<svg
  viewBox="0 0 560 380"
  style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif"
  role="img"
  aria-label="Chart description with key data point"
>
  <title>Chart Title</title>
  <desc>Description for screen readers with all key data points and source</desc>

  

  <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
    Source: Source Name (Year)
  </text>
</svg>

JSX/MDX シェル（キャメルケース属性）

<svg
  viewBox="0 0 560 380"
  style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}}
  role="img"
  aria-label="Chart description"
>
  <title>Chart Title</title>
  <desc>Description for screen readers</desc>

  {/* Chart content */}

  <text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
    Source: Source Name (Year)
  </text>
</svg>

JSX 属性への変換（MDX では必須）

HTML	JSX
stroke-width	strokeWidth
stroke-dasharray	strokeDasharray
stroke-linecap	strokeLinecap
text-anchor	textAnchor
font-size	fontSize
font-weight	fontWeight
font-family	fontFamily
class	className
style="..."	style={{...}}

チャートタイプの構築

横棒グラフ

最適な用途：改善率、単一指標の比較。

1. チャート領域を定義します：x=80、y=40、width=440、height=280
2. 棒の高さを計算します：chartHeight / dataCount - gap（gap=8）
3. 棒の幅を計算します：(value / maxValue) * chartWidth
4. 棒の位置を設定します：y = chartY + index * (barHeight + gap)
5. 左側（x=75 で右揃え）にカテゴリ名を配置します
6. 棒の端に値のラベルを配置します：パーセンテージまたは数値
7. 下部中央にソーステキストを配置します

グループ化棒グラフ

最適な用途：前後の比較、A 対 B の比較。

1. Y 軸に沿ってグループを定義し、各グループ内に棒を配置します
2. 2つの系列に2色（プライマリ＋セカンダリ）を使用します
3. 上部に凡例を追加します：各系列に色付きの四角形とラベルを付けます
4. グループ間の間隔をグループ内の間隔より大きくします

ドーナツチャート

最適な用途：全体に占める割合、市場シェア。

1. 中心：cx=280、cy=180、外半径=140、内半径=80
2. 累積角度を使って円弧の区間を計算します
3. 各区間：<path d="M... A... L... A... Z" fill="color" />
4. 中央のテキスト：合計または主要なラベル
5. チャートの下に、色付きの四角形、ラベル、値を含む凡例を配置します

折れ線グラフ

最適な用途：時系列の傾向。

1. X 軸：時間の区間を均等に配置します
2. Y 軸：4〜5本のグリッド線を使って値の範囲を示します
3. グリッド線を描画します：stroke="currentColor" opacity="0.08"
4. データポイントをプロットします：<circle cx=... cy=... r="4" fill="color" />
5. 次の要素でデータポイントをつなぎます：<polyline points="..." fill="none" stroke="color" strokeWidth="2" />
6. オプション：opacity="0.1" で折れ線の下を塗りつぶします

ロリポップチャート

最適な用途：要因の順位付け、相関関係。

1. 横向きにします（棒グラフと同様ですが、円を使用します）
2. 軸からデータポイントまで細い線を引きます：stroke="currentColor" opacity="0.15" strokeWidth="1"
3. データポイントに円を配置します：塗りつぶし色を指定して r="6" とします
4. 円の隣に値のラベルを配置します
5. Y 軸にカテゴリを配置します（左揃え）

面グラフ

最適な用途：分布、累積データ。

1. 折れ線グラフと同様ですが、下部の領域を塗りつぶします
2. 領域の塗りつぶし：<path d="M... L... L... Z" fill="color" opacity="0.15" />
3. 上部に線を描画します：stroke="color" strokeWidth="2" fill="none"
4. 領域の背後にグリッド線を配置します

レーダーチャート

最適な用途：多次元のスコアリング（5～7軸）。

1. 中心点：cx=280、cy=190
2. グリッド用に同心多角形を描画します（3～4段階）
3. 等しい角度で軸の終点を計算します
4. 値に比例させて、各軸上にデータポイントをプロットします
5. データポイントを塗りつぶした多角形でつなぎます：fill="color" opacity="0.2" stroke="color"
6. 各軸の外端にラベルを付けます

出力形式

すべてのチャートを<figure>要素で囲みます。

HTML：

<figure>
  <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-label="[description]">
    <title>[Chart Title]</title>
    <desc>[Full description with data points for screen readers]</desc>
    
    <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
      Source: [Source Name] ([Year])
    </text>
  </svg>
</figure>

MDX：

<figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}>
  <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-label="[description]">
    <title>[Chart Title]</title>
    <desc>[Full description]</desc>
    {/* chart content with camelCase attributes */}
    <text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
      Source: [Source Name] ([Year])
    </text>
  </svg>
</figure>

品質チェックリスト（返答前に確認）

• テキストの色をハードコードしていない（すべてcurrentColorを使用）
• 白色や明るい背景を使用していない（透明または背景なし）
• 出典の帰属表示が下部にある
• <svg>にrole="img"とaria-label"がある
• <svg>内に<title>と<desc>がある
• この投稿でまだ使われていないチャートの種類である
• MDXの場合：すべての属性がキャメルケースになっている（属性名にハイフンがない）
• データ値が元データと完全に一致している
• 承認済みの色のみをカラーパレットに使用している
• ViewBoxが0 0 560 380である（標準）、または妥当な代替値である