data-viz-renderer

データ可視化レンダラー

JSON データから、自己完結型の HTML／SVG インフォグラフィックを生成します。次の 4 種類に対応しています。

1. 統計カード — KPI の大きな数値＋トレンド矢印＋アイコン
2. 比較チャート — 複数系列のグループ化棒グラフ
3. フロー図 — 番号、アイコン、接続矢印を使ったステップ形式のプロセス
4. ダッシュボード — 統計カード＋棒グラフ＋ドーナツグラフ＋フローの複合レイアウト

出力は完全に自己完結した HTML ファイルです（CSS／SVG はすべてインラインで、外部依存関係はありません）。そのままブラウザーで開けます。

使い方

基本的な使い方

python3 scripts/build_infographic.py config.json

標準入力からの読み込みにも対応しています。

cat config.json | python3 scripts/build_infographic.py

スクリプトは JSON ステータスを標準出力に出力し、output フィールドで指定されたパスに生成した HTML を書き込みます。

JSON 設定形式

共通フィールド：

フィールド	型	必須	説明
title	string	いいえ	インフォグラフィックのタイトル
subtitle	string	いいえ	サブタイトル
type	string	はい	stats / comparison / flow / dashboard
palette	string	いいえ	カラーパレット（デフォルト：auto）
data	object/array	はい	データの内容（形式はタイプによって異なります）
output	string	いいえ	出力ファイルのパス（デフォルト：infographic.html）
footer	string	いいえ	フッターのテキスト

カラーパレット

指定可能な値：auto（データに基づいて自動選択）、ocean、sunset、forest、berry、vibrant、corporate、pastel、earth

タイプ別のデータ形式

1. stats — 統計カード

{
  "type": "stats",
  "data": [
    {
      "label": "Total Revenue",
      "value": "$1.2M",
      "icon": "money",
      "trend": "+12.5%",
      "trend_dir": "up"
    },
    {
      "label": "Users",
      "value": "45,230",
      "icon": "users",
      "trend": "+8.2%",
      "trend_dir": "up"
    }
  ]
}

icon の選択肢：users、user、money、percent、globe、clock、check、star、target、zap、chart-bar、chart-pie、database、rocket、shield、heart、light、search、mail、settings、flag、trending-up、trending-down

trend_dir：up（緑色の上向き矢印）または down（赤色の下向き矢印）

2. comparison — 棒グラフ比較

{
  "type": "comparison",
  "data": {
    "chart_title": "Quarterly Revenue Comparison",
    "categories": ["Q1", "Q2", "Q3", "Q4"],
    "series": [
      {"name": "2024", "values": [320, 410, 380, 520]},
      {"name": "2025", "values": [380, 490, 450, 610]}
    ]
  }
}

3. flow — フロー図

{
  "type": "flow",
  "data": [
    {"step": 1, "title": "Requirements", "description": "Gather user needs", "icon": "search"},
    {"step": 2, "title": "Design", "description": "Create technical plan", "icon": "light"},
    {"step": 3, "title": "Development", "description": "Code and test", "icon": "settings"},
    {"step": 4, "title": "Launch", "description": "Deploy to production", "icon": "rocket"}
  ]
}

4. dashboard — 複合ダッシュボード

{
  "type": "dashboard",
  "data": {
    "stats": [
      {"label": "DAU", "value": "12.3K", "icon": "users", "trend": "+5%", "trend_dir": "up"},
      {"label": "Conversion Rate", "value": "3.8%", "icon": "target", "trend": "-0.2%", "trend_dir": "down"}
    ],
    "chart": {
      "chart_title": "Monthly Trend",
      "categories": ["Jan", "Feb", "Mar", "Apr"],
      "series": [{"name": "DAU", "values": [10200, 11500, 11800, 12300]}]
    },
    "breakdown": [
      {"label": "iOS", "value": 45},
      {"label": "Android", "value": 38},
      {"label": "Web", "value": 17}
    ],
    "flow": [
      {"step": 1, "title": "Sign Up", "description": ""},
      {"step": 2, "title": "Activate", "description": ""},
      {"step": 3, "title": "Retain", "description": ""}
    ]
  }
}

出力形式

スクリプトは JSON の結果を標準出力に出力します。

{
  "status": "success",
  "output": "/absolute/path/to/infographic.html",
  "type": "stats",
  "title": "My Infographic",
  "palette": "auto",
  "size_bytes": 8432
}

エラーの場合：

{
  "status": "error",
  "errors": ["Missing required field: data"]
}

デザインの特長

• 外部依存関係ゼロ：Python 標準ライブラリのみを使用するため、pip のインストールは不要です
• 自己完結型の出力：CSS と SVG がすべてインラインの HTML で、ネットワーク接続は不要です
• レスポンシブレイアウト：デスクトップとモバイルの両方のブラウザーで動作します
• プロフェッショナルなパレット：8 種類のプリセットカラースキームと自動選択に対応しています
• 24 種類以上の組み込みアイコン：一般的な SVG アイコンを用意しており、フォントファイルは不要です
• CJK に対応：フォントスタックに Noto Sans SC、PingFang SC、Microsoft YaHei を含みます

使用例

• データレポートの可視化モジュール
• 製品データのダッシュボード
• ビジネスプロセスの図解
• 四半期／月次データの比較
• チーム KPI の表示

依存関係

• Python 3.7 以降（標準ライブラリのみ）