データ分析の結果を効果的に伝えるには、インタラクティブな要素を持つダッシュボードが非常に有効です。この記事では、SVGとJavaScriptを組み合わせた簡単なダッシュボードの作成方法を紹介します。
以下は、シンプルなインタラクティブダッシュボードの例です：
<!-- ダッシュボード背景 -->
<rect width="600" height="400" class="dashboard-bg" />
<!-- タイトルセクション -->
<text x="20" y="30" font-size="18" font-weight="bold" fill="#0f172a">月間パフォーマンスダッシュボード</text>
<text x="20" y="50" font-size="12" fill="#64748b">2025年3月のデータに基づく分析</text>
<!-- KPIカード1 -->
<rect x="20" y="70" width="180" height="100" class="card" />
<text x="35" y="95" class="card-title">総アクセス数</text>
<text x="35" y="130" class="metric-value">15,245</text>
<text x="35" y="150" class="metric-label">先月比 +12.3%</text>
<!-- KPIカード2 -->
<rect x="210" y="70" width="180" height="100" class="card" />
<text x="225" y="95" class="card-title">コンバージョン率</text>
<text x="225" y="130" class="metric-value">4.8%</text>
<text x="225" y="150" class="metric-label">先月比 +0.5pt</text>
<!-- KPIカード3 -->
<rect x="400" y="70" width="180" height="100" class="card" />
<text x="415" y="95" class="card-title">平均滞在時間</text>
<text x="415" y="130" class="metric-value">3:45</text>
<text x="415" y="150" class="metric-label">先月比 +0:22</text>
<!-- 棒グラフ -->
<rect x="20" y="190" width="560" height="200" class="card" />
<text x="35" y="215" class="card-title">週別アクセス推移</text>
<!-- X軸 -->
<line x1="50" y1="350" x2="550" y2="350" class="axis" />
<!-- Y軸 -->
<line x1="50" y1="220" x2="50" y2="350" class="axis" />
<!-- グラフバー -->
<rect x="80" y="250" width="30" height="100" class="chart-bar" />
<rect x="130" y="270" width="30" height="80" class="chart-bar" />
<rect x="180" y="240" width="30" height="110" class="chart-bar" />
<rect x="230" y="260" width="30" height="90" class="chart-bar" />
<rect x="280" y="230" width="30" height="120" class="chart-bar" />
<rect x="330" y="290" width="30" height="60" class="chart-bar" />
<rect x="380" y="280" width="30" height="70" class="chart-bar" />
<rect x="430" y="220" width="30" height="130" class="chart-bar" />
<rect x="480" y="250" width="30" height="100" class="chart-bar" />
<!-- X軸ラベル -->
<text x="95" y="365" text-anchor="middle" class="axis-label">第1週</text>
<text x="145" y="365" text-anchor="middle" class="axis-label">第2週</text>
<text x="195" y="365" text-anchor="middle" class="axis-label">第3週</text>
<text x="245" y="365" text-anchor="middle" class="axis-label">第4週</text>
<text x="295" y="365" text-anchor="middle" class="axis-label">第5週</text>
<text x="345" y="365" text-anchor="middle" class="axis-label">第6週</text>
<text x="395" y="365" text-anchor="middle" class="axis-label">第7週</text>
<text x="445" y="365" text-anchor="middle" class="axis-label">第8週</text>
<text x="495" y="365" text-anchor="middle" class="axis-label">第9週</text>
<!-- Y軸ラベル -->
<text x="45" y="225" text-anchor="end" class="axis-label">5,000</text>
<text x="45" y="255" text-anchor="end" class="axis-label">4,000</text>
<text x="45" y="285" text-anchor="end" class="axis-label">3,000</text>
<text x="45" y="315" text-anchor="end" class="axis-label">2,000</text>
<text x="45" y="345" text-anchor="end" class="axis-label">1,000</text>
効果的なダッシュボードを作成するためのポイントをいくつか紹介します：
ダッシュボードは特定の質問に答えられるよう設計します。「このダッシュボードで何を伝えたいのか」を常に意識しましょう。
情報過多は避け、本当に必要な指標だけに絞ります。一画面に収まる情報量を心がけましょう。
最も重要な情報は目立つ場所に配置し、サイズや色で重要度を表現します。
色使い、フォント、間隔などに一貫性を持たせることで、情報の理解しやすさが向上します。
以下は、JavaScriptでSVG要素を操作する簡単な例です：
// バーをクリックしたときのイベントハンドラー
document.querySelectorAll('.chart-bar').forEach(bar => {
bar.addEventListener('click', function() {
// クリックされたバーのデータを表示
const barHeight = this.getAttribute('height');
const value = Math.round(barHeight * 5000 / 130);
alert(`このバーの値: ${value}`);
});
});
// データを動的に更新する関数
function updateData(newData) {
// 各バーの高さを更新
const bars = document.querySelectorAll('.chart-bar');
newData.forEach((value, index) => {
if (bars[index]) {
const newHeight = value * 130 / 5000;
bars[index].setAttribute('height', newHeight);
bars[index].setAttribute('y', 350 - newHeight);
}
});
// メトリクス値も更新
document.querySelector('.metric-value').textContent =
newData.reduce((sum, val) => sum + val, 0).toLocaleString();
}
SVGとJavaScriptを組み合わせることで、シンプルながらも効果的なインタラクティブダッシュボードを作成できます。今回の例はシンプルですが、D3.jsなどのライブラリを使用すれば、より複雑で洗練されたダッシュボードを構築することも可能です。
次回は、リアルタイムデータを取り込むダッシュボードの作成方法について解説する予定です。お楽しみに！
