データ可視化の基本：インラインSVGの活用法¶
データ可視化はデータ分析の重要な部分です。今回は、マークダウン内でインラインSVGを使用した簡単なデータ可視化の方法についてご紹介します。
SVGとは¶
SVG（Scalable Vector Graphics）は、XMLベースのベクターイメージフォーマットです。拡大しても画質が劣化せず、テキストとして編集可能という特徴があります。
インラインSVGの利点¶
ウェブページやマークダウン文書内で直接SVGコードを記述することで、以下のようなメリットがあります：
- 外部ファイルへの依存がない：すべてのコードが文書内に含まれる
- スタイル変更が容易：CSSでスタイリング可能
- インタラクティブな要素の追加：JavaScriptと組み合わせて動的表現が可能
- SEO対策：テキストベースなのでインデックスされやすい
簡単な棒グラフの例¶
以下は、インラインSVGを使った簡単な棒グラフの例です：
<!-- グリッド線 -->
<line x1="50" y1="20" x2="50" y2="150" stroke="#ccc" stroke-width="1" />
<line x1="50" y1="150" x2="350" y2="150" stroke="#ccc" stroke-width="1" />
<!-- Y軸ラベル -->
<text x="45" y="30" text-anchor="end" font-size="12" fill="#666">100</text>
<text x="45" y="70" text-anchor="end" font-size="12" fill="#666">75</text>
<text x="45" y="110" text-anchor="end" font-size="12" fill="#666">25</text>
<text x="45" y="150" text-anchor="end" font-size="12" fill="#666">0</text>
<!-- 棒グラフ -->
<rect x="70" y="50" width="40" height="100" fill="#2563eb" />
<rect x="130" y="30" width="40" height="120" fill="#2563eb" />
<rect x="190" y="70" width="40" height="80" fill="#2563eb" />
<rect x="250" y="90" width="40" height="60" fill="#2563eb" />
<rect x="310" y="110" width="40" height="40" fill="#2563eb" />
<!-- X軸ラベル -->
<text x="90" y="170" text-anchor="middle" font-size="12" fill="#666">1月</text>
<text x="150" y="170" text-anchor="middle" font-size="12" fill="#666">2月</text>
<text x="210" y="170" text-anchor="middle" font-size="12" fill="#666">3月</text>
<text x="270" y="170" text-anchor="middle" font-size="12" fill="#666">4月</text>
<text x="330" y="170" text-anchor="middle" font-size="12" fill="#666">5月</text>
<!-- タイトル -->
<text x="200" y="190" text-anchor="middle" font-size="14" font-weight="bold" fill="#333">月間データ推移</text>
円グラフの例¶
次に、円グラフの例を見てみましょう：
<!-- 円グラフ -->
<!-- 円グラフの各セクション -->
<path d="M200,150 L200,50 A100,100 0 0,1 284.1,80.9 z" fill="#2563eb" />
<path d="M200,150 L284.1,80.9 A100,100 0 0,1 284.1,219.1 z" fill="#3b82f6" />
<path d="M200,150 L284.1,219.1 A100,100 0 0,1 200,250 z" fill="#60a5fa" />
<path d="M200,150 L200,250 A100,100 0 0,1 115.9,219.1 z" fill="#93c5fd" />
<path d="M200,150 L115.9,219.1 A100,100 0 0,1 115.9,80.9 z" fill="#bfdbfe" />
<path d="M200,150 L115.9,80.9 A100,100 0 0,1 200,50 z" fill="#dbeafe" />
<!-- 凡例 -->
<rect x="300" y="100" width="15" height="15" fill="#2563eb" />
<text x="320" y="112" font-size="12" fill="#333">A項目 (30%)</text>
<rect x="300" y="125" width="15" height="15" fill="#3b82f6" />
<text x="320" y="137" font-size="12" fill="#333">B項目 (25%)</text>
<rect x="300" y="150" width="15" height="15" fill="#60a5fa" />
<text x="320" y="162" font-size="12" fill="#333">C項目 (15%)</text>
<rect x="300" y="175" width="15" height="15" fill="#93c5fd" />
<text x="320" y="187" font-size="12" fill="#333">D項目 (12%)</text>
<rect x="300" y="200" width="15" height="15" fill="#bfdbfe" />
<text x="320" y="212" font-size="12" fill="#333">E項目 (10%)</text>
<rect x="300" y="225" width="15" height="15" fill="#dbeafe" />
<text x="320" y="237" font-size="12" fill="#333">F項目 (8%)</text>
<!-- タイトル -->
<text x="150" y="40" text-anchor="middle" font-size="16" font-weight="bold" fill="#333">カテゴリー別割合</text>
インタラクティブなSVG¶
SVGはJavaScriptと組み合わせることで、インタラクティブな要素を追加することも可能です。 以下は、マウスホバーで色が変わる簡単な例です：
<rect width="400" height="100" fill="#f8fafc" />
<rect x="50" y="25" width="100" height="50" fill="#2563eb" class="hover-rect" />
<rect x="175" y="25" width="100" height="50" fill="#3b82f6" class="hover-rect" />
<rect x="300" y="25" width="50" height="50" fill="#60a5fa" class="hover-rect" />
<text x="200" y="90" text-anchor="middle" font-size="12" fill="#333">※要素にマウスを重ねてみてください</text>
まとめ¶
インラインSVGは、外部ツールに頼らずにシンプルなデータ可視化を実現する強力な方法です。基本的なHTML/CSSの知識があれば、カスタマイズも容易です。
より複雑なグラフやチャートが必要な場合は、D3.jsなどのライブラリを検討することをお勧めします。しかし、基本的なデータ可視化ならインラインSVGで十分対応できます。
次回は、SVGアニメーションについて深掘りする予定です。お楽しみに！