mapbox-data-visualization-patterns

Data Visualization Patterns Skill

Comprehensive patterns for visualizing data on Mapbox maps. Covers choropleth maps, heat maps, 3D extrusions, data-driven styling, animated visualizations, and performance optimization for data-heavy applications.

When to Use This Skill

Use this skill when:

Visualizing statistical data on maps (population, sales, demographics)
Creating choropleth maps with color-coded regions
Building heat maps or clustering for density visualization
Adding 3D visualizations (building heights, terrain elevation)
Implementing data-driven styling based on properties
Animating time-series data
Working with large datasets that require optimization

Visualization Types

Choropleth Maps

Best for: Regional data (states, counties, zip codes), statistical comparisons

Pattern: Color-code polygons based on data values

map.on('load', () => {
  // Add data source (GeoJSON with properties)
  map.addSource(

step vs interpolate: The example above uses interpolate for smooth color gradients. For discrete color buckets (e.g., "low / medium / high"), use ['step', ['get', 'population'], '#f0f0f0', 500000, '#fee0d2', 2000000, '#fc9272', 10000000, '#de2d26'] instead. Prefer step when data has natural categories or when exact boundary values matter.

Color Scale Strategies:

Heat Maps

Best for: Point density, event locations, incident clustering

Pattern: Visualize density of points

Best Practices

Color Accessibility

Error Handling

Data Size Rule

< 1 MB: Use GeoJSON directly
1–10 MB: Consider either GeoJSON or vector tiles depending on complexity
> 10 MB: Use vector tiles (upload to Mapbox as tileset)

See references/performance.md for implementation details.

Reference Files

For additional visualization patterns, load the relevant reference file:

references/clustering.md — Point clustering, custom cluster properties, clustering vs heatmap comparison
references/3d-extrusions.md — 3D building extrusions, custom data sources, data-driven heights
references/circles-lines.md — Circle/bubble maps, line data visualization, traffic flow styling
references/animation.md — Time-series animation, real-time data updates, smooth transitions
references/performance.md — Vector tiles vs GeoJSON, feature state, filtering, progressive loading
references/legends-use-cases.md — Legend UI, data inspector, data preprocessing, election/COVID/real-estate examples

Resources

Mapbox Expression Reference
ColorBrewer - Color scales for maps
Turf.js - Spatial analysis
Simple Statistics - Data classification
Data Visualization Tutorials

Data Visualization Patterns Skill

When to Use This Skill

Use this skill when:

Visualizing statistical data on maps (population, sales, demographics)
Creating choropleth maps with color-coded regions
Building heat maps or clustering for density visualization
Adding 3D visualizations (building heights, terrain elevation)
Implementing data-driven styling based on properties
Animating time-series data
Working with large datasets that require optimization

Visualization Types

Choropleth Maps

Best for: Regional data (states, counties, zip codes), statistical comparisons

Pattern: Color-code polygons based on data values

map.on('load', () => {
  // Add data source (GeoJSON with properties)
  map.addSource(

step vs interpolate: The example above uses interpolate for smooth color gradients. For discrete color buckets (e.g., "low / medium / high"), use ['step', ['get', 'population'], '#f0f0f0', 500000, '#fee0d2', 2000000, '#fc9272', 10000000, '#de2d26'] instead. Prefer step when data has natural categories or when exact boundary values matter.

Color Scale Strategies:

Heat Maps

Best for: Point density, event locations, incident clustering

Pattern: Visualize density of points

Best Practices

Color Accessibility

Error Handling

Data Size Rule

< 1 MB: Use GeoJSON directly
1–10 MB: Consider either GeoJSON or vector tiles depending on complexity
> 10 MB: Use vector tiles (upload to Mapbox as tileset)

See references/performance.md for implementation details.

Reference Files

For additional visualization patterns, load the relevant reference file:

references/clustering.md — Point clustering, custom cluster properties, clustering vs heatmap comparison
references/3d-extrusions.md — 3D building extrusions, custom data sources, data-driven heights
references/circles-lines.md — Circle/bubble maps, line data visualization, traffic flow styling
references/animation.md — Time-series animation, real-time data updates, smooth transitions
references/performance.md — Vector tiles vs GeoJSON, feature state, filtering, progressive loading
references/legends-use-cases.md — Legend UI, data inspector, data preprocessing, election/COVID/real-estate examples

Resources

Mapbox Expression Reference
ColorBrewer - Color scales for maps
Turf.js - Spatial analysis
Simple Statistics - Data classification
Data Visualization Tutorials