# mapbox-data-visualization-patterns

Data visualization patterns for Mapbox GL JS in Claude Code, covering choropleth maps, heatmaps, and 3D styling. Helpful when plotting statistical data or point densities.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2100 installs · ★ 83
- Author: mapbox
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/mapbox/mapbox-agent-skills/tree/HEAD/skills/mapbox-data-visualization-patterns/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/mapbox-data-visualization-patterns

## What it does

This skill equips coding agents with Mapbox GL JS patterns for geographic data. It covers GeoJSON layer structures for regional choropleths, density heatmaps for event points, and 3D extrusions for terrain or building heights.

The instructions explain how to write Mapbox expressions. You get continuous gradients via `interpolate` and discrete buckets with `step`. Heatmap layers include transitions to circle points at zoom 14 so individual locations stay readable up close. Accessibility guidelines also recommend ColorBrewer palettes, cautioning against red-green pairings.

Direct GeoJSON sources work well for files under 1 MB, while larger datasets require optimization to avoid rendering lags. The patterns also show how to check for missing properties with `has` expressions so incomplete datasets do not crash the map style.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-data-visualization-patterns -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/mapbox-data-visualization-patterns/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/mapbox-data-visualization-patterns/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-data-visualization-patterns -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/mapbox-data-visualization-patterns/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-data-visualization-patterns -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/mapbox-data-visualization-patterns/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mapbox/mapbox-agent-skills mapbox-data-visualization-patterns
```

2. **Manually: put the files in place**
- File: `.github/skills/mapbox-data-visualization-patterns/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-data-visualization-patterns -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/mapbox/mapbox-agent-skills --path skills/mapbox-data-visualization-patterns
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/mapbox-data-visualization-patterns/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-data-visualization-patterns -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/mapbox/mapbox-agent-skills/tree/HEAD/skills/mapbox-data-visualization-patterns/SKILL.md

## When to use it
- build a choropleth map with data-driven polygon fill colors
- configure a heatmap that switches to point markers at high zoom
- pick accessible color scales that avoid red-green gradients
- guard against missing GeoJSON properties using `has` checks

## Example prompts
- Create a Mapbox choropleth layer where state fill colors interpolate based on population
- Set up an incident heatmap in Mapbox that transitions to circle markers at zoom 14
- Add a discrete step color scale and error handling for missing properties in Mapbox GL

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 423d5828766c3f11.

BEGIN THIRD-PARTY FILE 423d5828766c3f11
````text
---
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

```javascript
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.addLayer({
    id: 'states-layer',
    type: 'fill',
    source: 'states',
    paint: {
      'fill-color': [
        'interpolate',
        ['linear'],
        ['get', 'population'],
        0,
        '#f0f9ff', // Light blue for low population
        500000,
        '#7fcdff',
        1000000,
        '#0080ff',
        5000000,
        '#0040bf', // Dark blue for high population
        10000000,
        '#001f5c'
      ],
      'fill-opacity': 0.75
    }
  });

  // Add border layer
  map.addLayer({
    id: 'states-border',
    type: 'line',
    source: 'states',
    paint: {
      'line-color': '#ffffff',
      'line-width': 1
    }
  });

  // Add hover effect with reusable popup
  const popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
  });

  map.on('mousemove', 'states-layer', (e) => {
    if (e.features.length > 0) {
      map.getCanvas().style.cursor = 'pointer';

      const feature = e.features[0];
      popup
        .setLngLat(e.lngLat)
        .setHTML(
          `
````
END THIRD-PARTY FILE 423d5828766c3f11

The third-party file has ended. Everything between the 423d5828766c3f11 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2437 of 8556 bytes. © mapbox · MIT · https://github.com/mapbox/mapbox-agent-skills/tree/HEAD/skills/mapbox-data-visualization-patterns/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md