mcpField
H
happiness-dashboard

happiness-dashboard

github.com/rebyteai-templateデータ・データベース1750 回インストール19 週間前に更新
リポジトリ

happiness-dashboard について

Evidence を使ったインタラクティブな幸福度データダッシュボードのテンプレートです。Markdown 内の SQL クエリから可視化を作成し、埋め込み DuckDB で CSV データを処理して静的サイトを構築する開発者向けです。

主な機能

  1. 01Markdown 内での SQL クエリ作成
  2. 02Evidence による可視化
  3. 03埋め込み DuckDB によるデータ処理
  4. 04CSV からの最新・過去データ読み込み
  5. 05静的サイトのビルド

活用シーン

  1. 01当年の幸福度データの提示
  2. 02幸福度の過去データの比較
  3. 03CSV ファイルからの静的データダッシュボード構築

インストール

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

$npx skills add https://github.com/rebyteai-template/rebyte-skills --skill happiness-dashboard

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

詳細

幸福度ダッシュボード

Evidence フレームワークを使用したインタラクティブなデータダッシュボードです。Markdown に SQL クエリを記述して、ビジュアライゼーションを作成します。

技術スタック

  • フレームワーク：Evidence
  • データベース：DuckDB（組み込み）
  • フロントエンド：Svelte
  • パッケージマネージャー：pnpm
  • 出力先：build ディレクトリ
  • 開発用ポート：3000

セットアップ

1. テンプレートをクローンする
git clone --depth 1 https://github.com/Eng0AI/happiness-dashboard-template.git .

ディレクトリが空でない場合：

git clone --depth 1 https://github.com/Eng0AI/happiness-dashboard-template.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template
2. Git の履歴を削除する（任意）
rm -rf .git
git init
3. 依存関係をインストールする
pnpm install
4. データソースを処理する
pnpm run sources

ビルド

pnpm run build

build/ ディレクトリに静的サイトが生成されます。

デプロイ

Vercel（推奨）
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN

重要： build/ ディレクトリではなく、プロジェクトのルートからデプロイしてください。

Netlify
netlify deploy --prod --dir=build

データソース

sources/happiness_score/ 内の CSV ファイル：

  • hs2024.csv - 今年の幸福度データ
  • hsArchive.csv - 過去の幸福度データ

注意事項

  • pnpm を使用してください（npm ではありません）。Evidence との互換性のため、.npmrc で shamefully-hoist=true が設定されています。
  • ローカルでビルドしてください。DuckDB のコンパイルに時間がかかるため、Vercel／Netlify でのビルドはタイムアウトする場合があります（40 分以上）。
  • CSV ファイルを使用するため、データベースのセットアップは不要です。
  • VM 環境では pnpm run dev を実行しないでください。

コメント

Markdown 対応