Mapbox Data Visualization Patterns
Pick the right Mapbox layer types and style expressions for choropleths, heatmaps, clusters, and 3D extrusions from GeoJSON property data.
Overview
mapbox-data-visualization-patterns is an agent skill for the Build phase that guides Mapbox layer and expression choices for common geospatial visualization patterns.
Install
npx skills add https://github.com/mapbox/mapbox-agent-skills --skill mapbox-data-visualization-patternsWhat is this skill?
- Decision matrix maps data types (polygons, point density, magnitude, flow) to fill, heatmap, circle, fill-extrusion, and
- Documents GeoJSON property access via style expressions like ['get', 'value']
- Covers choropleth regional stats, heat maps for incident density, and clustering for grouped markers
- Includes bubble circles for magnitude metrics and fill-extrusion for 3D volume-style data
- Line layers for traffic, routes, and network-style flow visualization
- 6-row visualization type decision matrix covering regional polygons through flow/network lines
Adoption & trust: 992 installs on skills.sh; 64 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have GeoJSON or point/polygon data on a Mapbox map but are unsure whether to use heatmap, cluster, choropleth, or extrusion layers and how to bind property fields.
Who is it for?
Solo builders adding analytics or operational maps to web or mobile apps with Mapbox GL and property-driven styling.
Skip if: Projects without Mapbox, pure backend geoprocessing with no map UI, or one-off static map images with no interactive layers.
When should I use this skill?
Choosing Mapbox visualization types or writing style expressions that read GeoJSON feature properties.
What do I get? / Deliverables
You select an appropriate layer type and expression pattern so map features reflect magnitude, density, regions, or flows correctly.
- Layer type choice aligned to data shape
- Style expression snippets bound to feature properties
- Implementation notes for choropleth, heatmap, cluster, or line patterns
Recommended Skills
Journey fit
How it compares
Pattern cheat sheet for Mapbox styling—not a replacement for Mapbox account setup, tile sources, or full geocoding pipelines.
Common Questions / FAQ
Who is mapbox-data-visualization-patterns for?
Developers shipping Mapbox-powered products who need fast layer-type guidance and expression examples for GeoJSON-driven maps.
When should I use mapbox-data-visualization-patterns?
During Build frontend work when designing choropleths, heatmaps, clusters, bubbles, 3D extrusions, or line networks on Mapbox maps.
Is mapbox-data-visualization-patterns safe to install?
Check the Security Audits panel on this Prism page; the skill is documentation-heavy and does not inherently require cloud credentials.
SKILL.md
READMESKILL.md - Mapbox Data Visualization Patterns
# Data Visualization Patterns Quick reference for visualizing data on Mapbox maps. ## Visualization Type Decision Matrix | Data Type | Visualization | Layer Type | Use For | | --------------------- | ------------- | ---------------- | ----------------------------------- | | **Regional/Polygons** | Choropleth | `fill` | Statistics, demographics, elections | | **Point Density** | Heat Map | `heatmap` | Crime, events, incident clustering | | **Point Density** | Clustering | `circle` | Grouped markers, aggregated counts | | **Point Magnitude** | Bubble/Circle | `circle` | Earthquakes, sales, metrics | | **3D Data** | Extrusions | `fill-extrusion` | Buildings, elevation, volume | | **Flow/Network** | Lines | `line` | Traffic, routes, connections | ## Data Structure All code snippets below use **Style expressions** to style features based on their property data. Expressions like `['get', 'value']` access properties from your GeoJSON features: ```javascript // Example GeoJSON feature { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-77.0323, 38.9131] // [longitude, latitude] }, "properties": { "magnitude": 7.8, // Custom data property "value": 42, // Another property "category": "coffee" // Can be any data type } } ``` **Accessing properties:** ```javascript ['get', 'magnitude']; // Returns 7.8 ['get', 'value']; // Returns 42 ['get', 'category']; // Returns "coffee" ``` ## Choropleth Maps **Pattern:** Color-code regions by data values ```javascript map.addLayer({ id: 'choropleth', type: 'fill', source: 'regions', paint: { 'fill-color': [ 'interpolate', ['linear'], ['get', 'value'], 0, '#f0f9ff', // Low 50, '#7fcdff', 100, '#0080ff' // High ], 'fill-opacity': 0.75 } }); ``` **Color Scale Types:** <!-- prettier-ignore --> ```javascript // Linear (continuous) ['interpolate', ['linear'], ['get', 'value'], 0, '#fff', 100, '#000'] // Steps (discrete buckets) ['step', ['get', 'value'], '#fff', 25, '#ccc', 50, '#888', 75, '#000'] // Categories (qualitative) ['match', ['get', 'category'], 'A', '#ff0000', 'B', '#0000ff', '#cccccc'] ``` ## Heat Maps **Pattern:** Show point density ```javascript map.addLayer({ id: 'heatmap', type: 'heatmap', source: 'points', paint: { 'heatmap-weight': ['get', 'intensity'], 'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 15, 3], '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': ['interpolate', ['linear'], ['zoom'], 0, 2, 15, 20] } }); // Show individual points at high zoom map.addLayer({ id: 'points', type: 'circle', source: 'points', minzoom: 14, paint: { 'circle-radius': 6, 'circle-color': '#ff4444' } }); ``` ## Clustering (Point Density) **Pattern:** Group nearby points with aggregated counts ```javascript // Add source with clustering enabled map.addSource('points', { type: 'geojson', data: data, cluster: true, clusterMaxZoom: 14, // Max zoom to cluster points on clusterRadius: 50 // Radius of each cluster when clustering points (default 50) }); // Clusters - sized by point count map.addLayer({ id: 'clusters', type: 'circle', source: 'points', filter: ['has', 'point_count'], paint: { 'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 10, '#f1f075', 30, '#f28cb1'], 'circle-radius': ['step', ['get', 'point_count'], 20, 10, 30, 30, 40] } }); // Cluster count labels map.addLayer({ id: 'cluster-count', type: 'symbol',