mapbox-data-visualization-patterns
Patterns for visualizing data on maps including choropleth maps, heat maps, 3D visualizations, data-driven styling, and animated data. Covers layer types, color scales, and performance optimization.
By mapbox · 1,733 installs
npx skills add mapbox/mapbox-agent-skills --skill mapbox-data-visualization-patterns
Source repository · Upstream listing
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
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](references/performance.md) for implementation details.
Reference Files
For additional visualization patterns, load the relevant reference file:
[references/clustering.md](references/clustering.md) — Point clustering, custom cluster properties, clustering vs heatmap comparison
[references/3d extrusions.md](references/3d extrusions.md) — 3D building extrusions, custom data sources, data driven heights
[references/circles lines.md](references/circles lines.md) — Circle/bubble maps, line data visualization, traffic flow styling
[references/animation.md](references/animation.md) — Time series animation, real time data updates, smooth transitions
[references/performance.md](references/performance.md) — Vector tiles vs GeoJSON, feature state, filtering, progressive loading
[references/legends use cases.md](references/legends use cases.md) — Legend UI, data inspector, data preprocessing, election/COVID/real estate examples
Resources
[Mapbox Expression Reference](https://docs.mapbox.com/style spec/reference/expressions/)
[ColorBrewer](https://colorbrewer2.org/) Color scales for maps
[Turf.js](https://turfjs.org/) Spatial analysis
[Simple Statistics](https://simple statistics.github.io/) Data classification
[Data Visualization Tutorials](https://docs.mapbox.com/help/tutorials/ data visualization)