SVGマスターへの道

完成デモ: インタラクティブ日本地方地図

下の地図の各地方にマウスカーソルを合わせると色が変わり、地方名がツールチップで表示されます。クリックすると右側の情報パネルに詳細が表示されます。

使用した主なテクニック

• <path> 要素: 各地方の形状を単純化して描画。各パスに id と、情報表示用の data-name, data-info 属性を付与。
• CSSスタイリング: 通常時、マウスオーバー時 (:hover またはJSでクラス付与)、選択時のスタイルを定義。transition で滑らかな色の変化。
• JavaScriptによるイベント処理:
  • mouseover / mouseout: 地方のハイライト、ツールチップの表示/非表示。
  • click: クリックされた地方の情報を情報パネルに表示、選択状態のスタイル適用。
• JavaScriptによるDOM操作: 情報パネルのテキスト内容の書き換え、SVG要素のクラスや属性の変更。
• ツールチップ: SVG内の <text> 要素をマウス位置に追従させ、動的に内容と表示/非表示を切り替え。

コードのポイント解説

1. SVG構造 (HTMLに埋め込み)

各地方は <path> 要素で定義され、それぞれにユニークな id、表示名のための data-name、詳細情報のための data-info 属性が設定されています。

<svg id="japanMap" viewBox="0 0 400 300" ...>
  <!-- 例: 北海道 -->
  <path class="region" id="hokkaido"
        data-name="北海道地方"
        data-info="日本の最北端に位置し..."
        d="M200,5 L280,5 ..." />
  <!-- 他の地方も同様 ... -->
  <text id="mapTooltip" class="tooltip-text" x="0" y="0">Tooltip</text>
</svg>

2. CSSスタイリング

.region クラスで基本スタイルを、.region:hover やJavaScriptで追加する .highlighted, .selected クラスで状態に応じたスタイルを定義します。

.region {
  stroke: #333; stroke-width: 0.5; fill: #b2dfdb;
  transition: fill 0.2s ease-in-out, opacity 0.2s ease-in-out;
  cursor: pointer;
}
.region:hover, .region.highlighted { fill: #ffc107; opacity: 0.8; }
.region.selected { fill: #f06292; stroke: #c2185b; stroke-width: 1.5; }
.tooltip-text { font-size: 10px; opacity: 0; /* ... */ }
.tooltip-text.visible { opacity: 1; }

3. JavaScriptによるインタラクション

主な処理の流れは以下の通りです。（実際のコードは下の <script> タグ内にあります）

• 全ての .region 要素を取得。
• 各要素に mouseenter, mouseleave, mousemove, click イベントリスナーを設定。
  • mouseenter: ツールチップに地方名を表示し、表示状態にする。要素にハイライトクラスを追加(CSS :hoverでも可)。
  • mouseleave: ツールチップを非表示状態にする。ハイライトクラスを削除。
  • mousemove: ツールチップをマウスカーソル位置に追従させる（SVG座標系への変換が必要）。
  • click:
    • 以前に選択された要素があれば、選択スタイルを解除。
    • クリックされた要素に選択スタイルを適用。
    • 情報パネルに、要素の data-name と data-info を表示。

まとめ

SVGとJavaScriptを組み合わせることで、視覚的に分かりやすく、ユーザーが操作できるインタラクティブな地図コンテンツを作成できます。このサンプルでは基本的なハイライト、ツールチップ、情報表示機能を実装しましたが、ここからさらに発展させて、データの可視化（コロプレス図など）やズーム・パン機能などを追加することも可能です。

地図データそのものの準備（パスデータの作成や取得）がプロジェクトの規模によっては大変な作業になりますが、SVGの柔軟性がそれをインタラクティブにする強力な手段を提供します。次は、「付録A3: 動的なデータビジュアライゼーション」で、データとSVGを連携させる別の例を見ていきましょう。