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)