mapbox-data-visualization-patterns は何をしますか？
地図上でのデータ可視化パターン（コロプレスマップ、ヒートマップ、3D可視化、データ駆動型スタイリング、アニメーションデータ）を提供します。レイヤータイプ、色スケール、パフォーマンス最適化を網羅。
はじめに
このスキルでは、Mapbox GL JS を使用した一般的なデータ可視化テクニックを説明します。各パターンには、コード例とベストプラクティスが含まれています。
主な可視化パターン
- コロプレスマップ: 地理的領域を色で区分けしてデータを表示します。
fillレイヤーとfill-colorプロパティを使用します。 - ヒートマップ: 密度ベースの可視化により、点データの集中度を滑らかな色のグラデーションで表現します。
heatmapレイヤーを使用します。 - 3D可視化: 押し出し（
fill-extrusion）や 3D モデル（model）を使用して、高さや奥行きのあるデータを表現します。 - データ駆動型スタイリング: データの属性に基づいて色、不透明度、半径、高さなどを動的に変更します。
- アニメーションデータ: 時間経過に伴う変化をアニメーションで表示します（例: フィルター式の切り替え、フィーチャーの遷移）。
レイヤータイプ
| レイヤータイプ | 用途 | 主なプロパティ |
|---|---|---|
fill | エリアデータ（コロプレスマップ） | fill-color, fill-opacity |
line | 線データ（道路、境界線） | line-color, line-width |
circle | 点データ | circle-color, circle-radius |
heatmap | 密度可視化 | heatmap-color, heatmap-radius |
fill-extrusion | 3Dエクストルージョン | fill-extrusion-color, fill-extrusion-height |
symbol | アイコン/ラベル | icon-image, text-field |
色スケール
連続データまたはカテゴリデータに適した色スケールを選択します。Mapbox GL JS では、step、interpolate、match 式を使用して色をマッピングできます。
- 連続スケール:
interpolate式を使用して、数値範囲を滑らかな色のグラデーションにマッピングします。 - 段階スケール:
step式を使用して、データを離散的な色のビンに分割します。 - カテゴリスケール:
match式を使用して、カテゴリ値を特定の色に割り当てます。
パフォーマンス最適化
大規模データセットを扱う際のパフォーマンスを向上させるためのヒント:
- 必要なタイルのみをレンダリングするために、
minzoomとmaxzoomを使用してレイヤーの可視範囲を制限します。 - 高密度の点データには、
clusterオプションを使用してクラスタリングを有効にします。 - 複雑なスタイルの計算は、
filterやpaintプロパティ内でzoom式を使用して、ズームレベルに応じて詳細度を調整します。 - 不必要な再描画を避けるために、画像スプライトを使い、ベクトルタイルソースを活用します。
使用例
コロプレスマップの例
map.addLayer({
'id': 'choropleth',
'type': 'fill',
'source': 'states',
'paint': {
'fill-color': [
'interpolate',
['linear'],
['get', 'population_density'],
0, '#F2F2F2',
100, '#E3F2FD',
1000, '#90CAF9',
10000, '#1565C0'
],
'fill-opacity': 0.8
}
});
ヒートマップの例
map.addLayer({
'id': 'heatmap',
'type': 'heatmap',
'source': 'points',
'paint': {
'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)'
],
'heatmap-radius': 30,
'heatmap-opacity': 0.8
}
});
3Dエクストルージョンの例
map.addLayer({
'id': '3d-buildings',
'type': 'fill-extrusion',
'source': 'buildings',
'paint': {
'fill-extrusion-color': [
'interpolate',
['linear'],
['get', 'height'],
0, '#F2F2F2',
50, '#90CAF9',
200, '#1565C0'
],
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-opacity': 0.6
}
});