blog-chart

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"

カラーパレット

色	16進数	用途
オレンジ	#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>

  <!-- Chart content -->

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

JSX/MDXシェル（camelCase属性）

<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 vs 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>
    <!-- chart content -->
    <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の場合：すべての属性がcamelCase（属性名にハイフンなし）
• データ値がソースデータと正確に一致
• カラーパレットは承認された色のみ使用
• ViewBoxは0 0 560 380（標準）または正当な代替値