mcpField
D
data-viz-deck

data-viz-deck

github.com/thatrebeccaraeドキュメント187105 回インストール24 週間前に更新
リポジトリ

data-viz-deck について

data-viz-deckは、構造化データや分析をプレゼンテーション、インタラクティブなダッシュボード、ビジュアルレポートにまとめるスキルです。チャート選定やデザイン指針を含み、分析担当者やチームの成果物作成を支援します。

主な機能

  1. 01編集可能なチャート付きPowerPoint
  2. 02インタラクティブなHTMLダッシュボード
  3. 03チャート画像入りMarkdownレポート
  4. 04データ形式に応じたチャート選定
  5. 05色とフォントの設定

活用シーン

  1. 01監査結果を顧客向けプレゼンに変換
  2. 02フィルター可能な業績ダッシュボード作成
  3. 03CSVやJSONの指標を可視化
  4. 04分析をビジュアルレポートに整理

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/thatrebeccarae/claude-marketing --skill data-viz-deck

インストール後、Claude Code で/data-viz-deckを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

EXAMPLES.md
LICENSE
REFERENCE.md

詳細

データ可視化＆デッキビルダー

構造化データと分析結果を、プレゼンテーションデッキ、インタラクティブなダッシュボード、ビジュアルレポートなど、洗練されたビジュアル成果物に変換します。

インストール

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/data-viz-deck ~/.claude/skills/

このスキルを使う場面

  • ユーザーが監査や分析を完了し、ビジュアル成果物を作成したい場合
  • 「デッキを作成して」「プレゼンテーションを作成して」「ダッシュボードを作って」「これを可視化して」とユーザーが依頼した場合
  • Markdown レポートをクライアント向けのスライドに変換したい場合
  • パフォーマンスデータからグラフ、表、ビジュアル要約を作成する必要がある場合

出力形式

1. PPTX デッキ（主な形式）

編集可能なグラフ、スタイル付きの表、プロフェッショナルなレイアウトを備えたネイティブ PowerPoint です。クライアントへの納品やプレゼンテーションに最適です。

必要なもの： python-pptx（インストール済み）、pandas（インストール済み）

2. インタラクティブな HTML ダッシュボード

plotly.js（CDN 経由で読み込み）を使ったグラフ、フィルタリング可能な表、レスポンシブレイアウトを備えた単一ファイルの HTML です。インタラクティブなレポートの共有に最適です。

必要なもの： jinja2（インストール済み）、pandas（インストール済み）。plotly.js は実行時に CDN 経由で読み込まれます。

3. ビジュアル Markdown レポート

グラフ画像を埋め込んだ拡張 Markdown です（matplotlib が必要です：pip install matplotlib）。Vault のレポートやドキュメントに最適です。

ワークフロー

ステップ 1：データソースを特定する

ソースファイル（監査 Markdown、CSV、JSON、またはデータベースのクエリ結果）を読み込みます。主要な指標、表、調査結果を解析し、pandas DataFrame または構造化 dict にまとめます。

ステップ 2：グラフの種類を選ぶ
データパターングラフの種類使用場面
値を持つカテゴリ棒グラフ（横向き）カテゴリ別の収益
カテゴリ＋ベンチマーク基準線付き棒グラフベンチマークとのパフォーマンス比較
全体に占める割合ドーナツグラフ／円グラフ収益の集中度、チャネル構成
時間経過に伴う値折れ線グラフトレンドデータ、期間ごとの比較
2 つの変数散布図相関分析
パフォーマンスの評価ヒートマップ表色分けされた指標（緑／黄／赤）
前後の比較またはギャップウォーターフォールグラフ収益機会の規模算定
ランキング項目横棒グラフ上位 10 項目を順に表示
ファネルファネルグラフ配信 > 開封 > クリック > コンバージョン
ステータスの概要スコアカード／KPI タイルエグゼクティブサマリーの指標
ステップ 3：デザインシステムを適用する

すべての成果物で設定可能なデザインシステムを使用します。ブランドに合わせてカラートークンとフォントを変更してください。

カラーパレット
COLORS = {
    # Brand accent -- change to your brand color
    "accent":      "#3D7A5C",  # Forest green
    "accent_light":"#6AB88A",  # Light green

    # Chart series (ordered for visual distinction)
    "series": ["#3D7A5C", "#6AB88A", "#8B7EC8", "#D4845A", "#C9A84C", "#C75B6F", "#93C9A8", "#8B949E"],

    # Semantic
    "good":        "#2E8B57",  # Green -- above benchmark
    "warning":     "#D97706",  # Amber -- watch
    "critical":    "#C0392B",  # Red -- action needed
    "neutral":     "#8B949E",  # Slate -- no judgment

    # Dark mode (title slides, section dividers)
    "bg_deep":     "#141414",
    "bg_surface":  "#1E1E1E",
    "text_bright": "#F0F3F6",
    "text_secondary_dark": "#9CA3AF",

    # Light mode (content slides -- the default)
    "bg_light":    "#FAF7F2",  # Warm cream, NOT white
    "bg_surface_light": "#F2EDE6",
    "text_primary":"#0F0E0E",
    "text_secondary": "#57606A",
    "text_muted":  "#8B949E",
}

色のルール：

  • ライトモード（#FAF7F2 の温かみのあるクリーム色）は、すべてのコンテンツスライドでデフォルトとして使用します。白は使用しません。
  • ダークモード（#141414）は、タイトルスライド、セクション区切り、終了スライドにのみ使用します。
  • アクセントカラーは控えめに使用します。上位の棒、重要な指標、アクセント付きコールアウトに使用します。
  • セマンティックカラー（緑／黄／赤）はステータス表示にのみ使用し、装飾には使用しません。
タイポグラフィ（PPTX）
FONTS = {
    "title":    "Switzer",        # Slide titles -- Light (300), 28-36pt, NOT bold
    "subtitle": "Switzer",        # Subtitles -- Regular (400), 18-22pt
    "body":     "Switzer",        # Body text -- Regular (400), 12-14pt
    "data":     "Cartograph CF",  # Numbers, tables -- Regular/Bold, 11-12pt
    "kpi":      "Cartograph CF",  # KPI big numbers -- Bold (700), 44-60pt
    "label":    "Cartograph CF",  # ALL CAPS labels -- Regular, 9-10pt, +tracking
}
# Fallbacks: Switzer -> Inter -> system-ui | Cartograph CF -> Consolas -> monospace

重要なタイポグラフィのルール：

  1. 見出しには太字ではなく、Light ウェイトを使用します。 大きなサイズの Light は、自信と高級感を演出します。
  2. すべての数値／データコンテンツには等幅フォントを使用します。 KPI、表の数値、ラベル、フッターが対象です。
  3. 見出しの字間を詰めます。 -0.03em ～ -0.04em。
  4. すべての大文字ラベルの字間を広げます。 +0.08em ～ +0.1em。
スライドレイアウト

すべてのデッキで次の構成に従います。

1. Title Slide         -- Report name, date (dark mode)
2. Executive Summary   -- 3-5 KPI tiles + key findings bullets
3. Scorecard           -- Color-coded performance overview table
4. Deep Dive slides    -- One per major finding (chart + insight + recommendation)
5. Opportunity Sizing  -- Waterfall or bar chart of revenue opportunities
6. Recommendations     -- Prioritized table (Quick Wins / Strategic / Maintenance)
7. Appendix            -- Full data tables
スライドの寸法（python-pptx）
Width:  13.333"
Height: 7.5"
Aspect: 16:9
ステップ 4：成果物を生成する

選択した出力形式に応じて、REFERENCE.md のコードパターンに従います。

主要原則

  1. スライド1枚につき、示す洞察は1つです。 1枚のスライドに複数の分析結果を詰め込まないでください。各詳細スライドは、チャート（左側60%）と洞察＋推奨事項（右側40%）で構成します。

  2. 数値を先に示します。 すべてのスライドタイトルに、主要な指標を含めてください。「購入後のRPRは$0.07 -- ベンチマークの14分の1」のようにし、「購入後のフロー分析」のようなタイトルは避けてください。

  3. すべての指標をベンチマークと比較します。 文脈なしで指標を示してはいけません。ベンチマーク、差分、差分を埋めた場合の価値を示してください。

  4. 色には意味を持たせます。 緑は良好／ベンチマーク超え、アンバーは要注意、赤は対応が必要という意味です。データスライドで装飾目的に色を使わないでください。

  5. チャートのデータはシンプルにします。 1つのチャートにつき項目は最大6～8個までとし、残りは「その他」にまとめてください。

  6. エグゼクティブサマリーが資料全体を要約します。 2枚目のスライドだけを読んでも、ストーリー全体を理解できるようにしてください。

  7. 実績値がある場合は、推定値を使いません。 データに正確な値がある場合は、正確な合計を計算してください。

  8. 白い背景は使いません。 明るいコンテンツには、常に温かみのあるクリーム色の #FAF7F2 を使ってください。

  9. 見出しは太字にしません。 ヒーロータイトルやセクションタイトルはすべて細字にしてください。

コードテンプレートとリファレンスの全容については、REFERENCE.md を参照してください。

コメント

Markdown 対応