mapbox-data-visualization-patterns

name	mapbox-data-visualization-patterns
description	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.

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('states', {
    type: 'geojson',
    data: 'https://example.com/states.geojson' // Features with population property
  });

  // Add fill layer with data-driven color
  map.({
    : ,
    : ,
    : ,
    : {
      : [
        ,
        [],
        [, ],
        ,
        , 
        ,
        ,
        ,
        ,
        ,
        , 
        ,
        
      ],
      : 
    }
  });

  
  map.({
    : ,
    : ,
    : ,
    : {
      : ,
      : 
    }
  });

  
   popup =  mapboxgl.({
    : ,
    : 
  });

  map.(, ,  {
     (e.. > ) {
      map.().. = ;

       feature = e.[];
      popup
        .(e.)
        .(
          
        )
        .(map);
    }
  });

  map.(, ,  {
    map.().. = ;
    popup.();
  });
});