データ可視化パターンスキル

Mapboxマップ上のデータを可視化するための包括的なパターン。コロプレス地図、ヒートマップ、3D押し出し、データドリブンスタイリング、アニメーション可視化、およびデータの多い アプリケーション向けのパフォーマンス最適化をカバーします。

このスキルを使用する場面

以下の場合にこのスキルを使用します:

• マップ上の統計データを可視化する（人口、売上、人口統計）
• 色分けされた地域を使用したコロプレス地図を作成する
• ヒートマップまたは密度可視化のためのクラスタリングを構築する
• 3D可視化を追加する（建物の高さ、地形の標高）
• プロパティに基づくデータドリブンスタイリングを実装する
• 時系列データをアニメーション化する
• 最適化が必要な大規模データセットで作業する

可視化タイプ

コロプレス地図

**最適用途:**地域データ（州、郡、郵便番号）、統計比較

**パターン:**データ値に基づいてポリゴンを色分けします

map.on('load', () => {
  // Add data source (GeoJSON with properties)
  map.addSource('states', {
    type: 'geojson',
    data: 'https://example.com/states.geojson' // Features with population property
  });

  // Add fill layer with data-driven color
  map.addLayer({
    id: 'states-layer',
    type: 'fill',
    source: 'states',
    paint: {
      'fill-color': [
        'interpolate',
        ['linear'],
        ['get', 'population'],
        0,
        '#f0f9ff', // Light blue for low population
        500000,
        '#7fcdff',
        1000000,
        '#0080ff',
        5000000,
        '#0040bf', // Dark blue for high population
        10000000,
        '#001f5c'
      ],
      'fill-opacity': 0.75
    }
  });

  // Add border layer
  map.addLayer({
    id: 'states-border',
    type: 'line',
    source: 'states',
    paint: {
      'line-color': '#ffffff',
      'line-width': 1
    }
  });

  // Add hover effect with reusable popup
  const popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
  });

  map.on('mousemove', 'states-layer', (e) => {
    if (e.features.length > 0) {
      map.getCanvas().style.cursor = 'pointer';

      const feature = e.features[0];
      popup
        .setLngLat(e.lngLat)
        .setHTML(
          `
          <h3>${feature.properties.name}</h3>
          <p>Population: ${feature.properties.population.toLocaleString()}</p>
        `
        )
        .addTo(map);
    }
  });

  map.on('mouseleave', 'states-layer', () => {
    map.getCanvas().style.cursor = '';
    popup.remove();
  });
});

step vs interpolate: 上記の例ではinterpolateを使用して滑らかなカラーグラデーションを実現しています。離散的なカラーバケット（例：「低い / 中程度 / 高い」）の場合は、代わりに['step', ['get', 'population'], '#f0f0f0', 500000, '#fee0d2', 2000000, '#fc9272', 10000000, '#de2d26']を使用してください。データに自然なカテゴリがある場合や、厳密な境界値が重要な場合はstepを優先します。

カラースケール戦略:

// Linear interpolation (continuous scale)
'fill-color': [
  'interpolate',
  ['linear'],
  ['get', 'value'],
  0, '#ffffcc',
  25, '#78c679',
  50, '#31a354',
  100, '#006837'
]

// Step intervals (discrete buckets)
'fill-color': [
  'step',
  ['get', 'value'],
  '#ffffcc',  // Default color
  25, '#c7e9b4',
  50, '#7fcdbb',
  75, '#41b6c4',
  100, '#2c7fb8'
]

// Case-based (categorical data)
'fill-color': [
  'match',
  ['get', 'category'],
  'residential', '#ffd700',
  'commercial', '#ff6b6b',
  'industrial', '#4ecdc4',
  'park', '#45b7d1',
  '#cccccc'  // Default
]

ヒートマップ

**最適用途:**ポイント密度、イベント位置、インシデントクラスタリング

**パターン:**ポイントの密度を可視化します

map.on('load', () => {
  // Add data source (points)
  map.addSource('incidents', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [-122.4194, 37.7749]
          },
          properties: {
            intensity: 1
          }
        }
        // ... more points
      ]
    }
  });

  // Add heatmap layer
  map.addLayer({
    id: 'incidents-heat',
    type: 'heatmap',
    source: 'incidents',
    maxzoom: 15,
    paint: {
      // Increase weight based on intensity property
      'heatmap-weight': ['interpolate', ['linear'], ['get', 'intensity'], 0, 0, 6, 1],
      // Increase intensity as zoom level increases
      'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 15, 3],
      // Color ramp for heatmap
      'heatmap-color': [
        'interpolate',
        ['linear'],
        ['heatmap-density'],
        0,
        'rgba(33,102,172,0)',
        0.2,
        'rgb(103,169,207)',
        0.4,
        'rgb(209,229,240)',
        0.6,
        'rgb(253,219,199)',
        0.8,
        'rgb(239,138,98)',
        1,
        'rgb(178,24,43)'
      ],
      // Adjust radius by zoom level
      'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 15, 20],
      // Decrease opacity at higher zoom levels
      'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 1, 15, 0]
    }
  });

  // Add circle layer for individual points at high zoom
  map.addLayer({
    id: 'incidents-point',
    type: 'circle',
    source: 'incidents',
    minzoom: 14,
    paint: {
      'circle-radius': ['interpolate', ['linear'], ['zoom'], 14, 4, 22, 30],
      'circle-color': '#ff4444',
      'circle-opacity': 0.8,
      'circle-stroke-color': '#fff',
      'circle-stroke-width': 1
    }
  });
});

ベストプラクティス

カラーアクセシビリティ

// Use ColorBrewer scales for accessibility
// https://colorbrewer2.org/

// Good: Sequential (single hue)
const sequentialScale = ['#f0f9ff', '#bae4ff', '#7fcdff', '#0080ff', '#001f5c'];

// Good: Diverging (two hues)
const divergingScale = ['#d73027', '#fc8d59', '#fee08b', '#d9ef8b', '#91cf60', '#1a9850'];

// Good: Qualitative (distinct categories)
const qualitativeScale = ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00'];

// Avoid: Red-green for color-blind accessibility
// Use: Blue-orange or purple-green instead

エラーハンドリング

// Handle missing or invalid data
map.on('load', () => {
  map.addSource('data', {
    type: 'geojson',
    data: dataUrl
  });

  map.addLayer({
    id: 'data-viz',
    type: 'fill',
    source: 'data',
    paint: {
      'fill-color': [
        'case',
        ['has', 'value'], // Check if property exists
        ['interpolate', ['linear'], ['get', 'value'], 0, '#f0f0f0', 100, '#0080ff'],
        '#cccccc' // Default color for missing data
      ]
    }
  });

  // Handle map errors
  map.on('error', (e) => {
    console.error('Map error:', e.error);
  });
});

データサイズルール

• < 1 MB: GeoJSONを直接使用
• 1–10 MB: 複雑さに応じてGeoJSONまたはベクトルタイルのいずれかを検討
• > 10 MB: ベクトルタイルを使用（Mapboxにタイルセットとしてアップロード）

実装の詳細についてはreferences/performance.mdを参照してください。

リファレンスファイル

追加の可視化パターンについては、関連するリファレンスファイルを読み込んでください:

• references/clustering.md — ポイントクラスタリング、カスタムクラスタプロパティ、クラスタリング vs ヒートマップの比較
• references/3d-extrusions.md — 3D建物押し出し、カスタムデータソース、データドリブンの高さ
• references/circles-lines.md — サークル/バブルマップ、ラインデータ可視化、トラフィックフロースタイリング
• references/animation.md — 時系列アニメーション、リアルタイムデータ更新、スムーズなトランジション
• references/performance.md — ベクトルタイル vs GeoJSON、フィーチャーステート、フィルタリング、プログレッシブロード
• references/legends-use-cases.md — レジェンドUI、データインスペクター、データ前処理、選挙/COVID/不動産の例

リソース

• Mapbox Expression Reference
• ColorBrewer - マップ用のカラースケール
• Turf.js - 空間解析
• Simple Statistics - データ分類
• Data Visualization Tutorials