Add mapbox-data-visualization-patterns skill

[mattpodwysocki]

Summary

Adds comprehensive data visualization skill covering choropleth maps, heat maps, 3D extrusions, bubble maps, line visualization, and animated data patterns.

What's Included

SKILL.md - Comprehensive data visualization guide covering:

• Visualization Types - Choropleth, heat maps, 3D extrusions, bubble maps, line visualization
• Data-Driven Styling - Mapbox expressions (interpolate, step, match, case)
• Color Scales - Accessible ColorBrewer scales with examples
• Animation - Time-series animation and real-time data updates
• Performance - Vector tiles, feature state, filtering, progressive loading
• Legends & UI - Interactive controls and data inspectors
• Best Practices - Color accessibility, data preprocessing, error handling
• Common Use Cases - Elections, COVID tracking, real estate, traffic

AGENTS.md - Compressed quick reference (2-4KB) with:

• Visualization type decision matrix
• Code patterns for all viz types
• Performance guidelines
• Color scale examples
• Quick decision guide

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 Magnitude	Bubble/Circle	circle	Earthquakes, sales, metrics
3D Data	Extrusions	fill-extrusion	Buildings, elevation, volume
Flow/Network	Lines	line	Traffic, routes, connections

Patterns Covered

Choropleth Maps

• Linear interpolation for continuous scales
• Step intervals for discrete buckets
• Case-based for categorical data
• Interactive hover effects
• Color accessibility considerations

Heat Maps

• Density visualization with intensity weighting
• Zoom-based radius and opacity
• Smooth transitions between zoom levels
• Individual points at high zoom

Bubble Maps

• Exponential scaling for magnitude
• Color coding by additional dimensions
• Stroke styling for clarity
• Interactive popups with data

3D Extrusions

• Height-based visualization
• Base height for terrain
• Color gradients by height or data
• Pitch and bearing controls

Line Visualization

• Width by traffic/flow volume
• Color by speed/congestion
• Opacity and styling options

Animated Data

• Time-series with playback controls
• Real-time updates via WebSocket/polling
• Smooth property transitions
• Performance-optimized updates

Performance Techniques

Data Size Guidelines:

• < 1 MB: GeoJSON direct load
• 1-10 MB: Consider vector tiles

• 10 MB: Vector tiles required

Optimization Patterns:

• Feature state for hover/selection (no geometry updates)
• Client-side filtering (no data reloading)
• Progressive loading (viewport-based)
• Debounced updates for smooth UX

Color Accessibility

Includes ColorBrewer scales:

• Sequential (single hue)
• Diverging (two hues)
• Qualitative (distinct categories)
• Color-blind friendly alternatives

Common Use Cases

Complete examples for:

• Election results maps
• COVID-19 case tracking
• Real estate price visualization
• Traffic flow analysis
• Weather data
• Sales territory analysis

Testing

• SKILL.md includes comprehensive patterns for all visualization types
• AGENTS.md is concise and actionable
• Code examples are complete and tested
• Covers choropleth, heat maps, 3D, bubbles, lines
• Includes animation and performance patterns
• Accessibility considerations included
• Updated README.md and skills/README.md
• Follows existing skill standards

---

Part of tutorial-based skills series (3 of 3). Completes the set with navigation patterns and store locator patterns.