{
  "skill_name": "mapbox-data-visualization-patterns",
  "evals": [
    {
      "id": 1,
      "prompt": "I'm building a choropleth map showing US population by state. States range from ~500K to ~40M people. What are my options for coloring states by population in Mapbox GL JS? I'm considering both smooth gradients and discrete color buckets.",
      "expectations": [
        "Uses the interpolate expression with linear interpolation: ['interpolate', ['linear'], ['get', 'population'], ...]",
        "Provides multiple stop values mapping population numbers to color values (at least 3-4 stops)",
        "Shows the complete addLayer pattern with type 'fill' and the interpolate expression in fill-color paint property",
        "Mentions that step expression is available as an alternative for discrete buckets, or explains when interpolate vs step is appropriate"
      ]
    },
    {
      "id": 2,
      "prompt": "I want to highlight individual countries on hover on my choropleth map — change the color when the mouse enters a feature and reset when it leaves. I don't want to re-upload GeoJSON on every hover event. What's the efficient pattern?",
      "expectations": [
        "Use feature state: set generateId: true in the GeoJSON source definition",
        "Call map.setFeatureState({ source: 'countries', id: hoveredId }, { hover: true }) on mousemove",
        "Reset with map.setFeatureState({ source: 'countries', id: hoveredId }, { hover: false }) on mouseleave",
        "Reference feature state in the layer paint with ['feature-state', 'hover'] expression (not re-uploading data)"
      ]
    },
    {
      "id": 3,
      "prompt": "I have datasets of varying sizes I need to visualize on Mapbox maps — some are small (500KB), some medium (5MB), and one is huge (50MB of GPS records). The 50MB one freezes when loaded as GeoJSON. What's the right approach for each size?",
      "expectations": [
        "50MB is well above the GeoJSON threshold — use vector tiles (MVT) instead",
        "The rule: <1MB use GeoJSON, 1-10MB consider either, >10MB use vector tiles",
        "Explains the source type change: type: 'vector' with a tiles URL, and requires source-layer in the addLayer call",
        "Vector tiles support progressive loading — only tiles in the current viewport are fetched, not all 50MB at once"
      ]
    }
  ]
}