{
  "description": "Progressive learning strategy for vaccine time series visualizations",
  "total_iterations": 20,
  "url_progression": [
    {
      "iteration": 1,
      "difficulty": "foundation",
      "urls": [
        {
          "url": "https://docs.mapbox.com/mapbox-gl-js/example/timeline-animation/",
          "purpose": "Learn official Mapbox timeline slider pattern with filtering",
          "extract": "HTML structure, slider event handling, map.setFilter() usage"
        },
        {
          "url": "https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/",
          "purpose": "Learn popup on hover pattern",
          "extract": "mouseenter/mouseleave events, popup creation and removal"
        },
        {
          "url": "https://www.chartjs.org/docs/latest/getting-started/",
          "purpose": "Chart.js basic setup and installation",
          "extract": "CDN usage, basic chart creation, canvas element requirements"
        }
      ],
      "learning_objectives": [
        "Implement basic timeline slider with year selection",
        "Use map.setFilter() to show data for selected year",
        "Create simple hover popups with text data"
      ]
    },
    {
      "iteration": 2,
      "difficulty": "intermediate",
      "urls": [
        {
          "url": "https://stackoverflow.com/questions/58414363/dynamically-add-chart-js-object-using-mapbox-gl-js",
          "purpose": "Learn Chart.js integration in Mapbox popups",
          "extract": "Canvas element creation, unique ID generation, timing considerations"
        },
        {
          "url": "https://www.chartjs.org/docs/latest/charts/line.html",
          "purpose": "Line chart configuration for time series",
          "extract": "Dataset structure, tension for smooth curves, fill options"
        },
        {
          "url": "https://docs.mapbox.com/help/tutorials/show-changes-over-time/",
          "purpose": "Tutorial on showing temporal changes",
          "extract": "Data structure best practices, animation patterns"
        }
      ],
      "learning_objectives": [
        "Integrate Chart.js line charts in popups",
        "Handle DOM timing for chart initialization",
        "Create smooth time series visualizations"
      ]
    },
    {
      "iteration": 3,
      "difficulty": "advanced",
      "urls": [
        {
          "url": "https://www.chartjs.org/docs/latest/axes/cartesian/",
          "purpose": "Dual-axis chart configuration",
          "extract": "Multiple y-axes, positioning, scale configuration"
        },
        {
          "url": "https://www.chartjs.org/docs/latest/configuration/responsive.html",
          "purpose": "Responsive and maintainAspectRatio options",
          "extract": "Container sizing, responsive behavior, aspect ratio control"
        },
        {
          "url": "https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup",
          "purpose": "Advanced popup API features",
          "extract": "Popup events (open/close), offset options, anchor positioning"
        }
      ],
      "learning_objectives": [
        "Create dual-axis charts (coverage vs cases)",
        "Implement chart instance management and cleanup",
        "Optimize popup timing with delays"
      ]
    },
    {
      "iteration": 4,
      "difficulty": "advanced",
      "urls": [
        {
          "url": "https://www.chartjs.org/docs/latest/general/colors.html",
          "purpose": "Chart color schemes and theming",
          "extract": "Color utilities, transparency, gradients"
        },
        {
          "url": "https://www.chartjs.org/docs/latest/configuration/interactions.html",
          "purpose": "Chart interactions and tooltips",
          "extract": "Interaction modes, tooltip customization, hover behavior"
        },
        {
          "url": "https://immunizationdata.who.int/global",
          "purpose": "WHO immunization data portal reference",
          "extract": "Data availability, coverage definitions, time ranges"
        }
      ],
      "learning_objectives": [
        "Apply dark theme styling to charts",
        "Customize chart interactions and tooltips",
        "Use realistic WHO data patterns"
      ]
    },
    {
      "iteration": 5,
      "difficulty": "expert",
      "urls": [
        {
          "url": "https://www.chartjs.org/docs/latest/samples/advanced/linear-gradient.html",
          "purpose": "Advanced Chart.js styling with gradients",
          "extract": "Canvas gradient creation, dynamic color fills"
        },
        {
          "url": "https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-route/",
          "purpose": "Animation techniques in Mapbox",
          "extract": "requestAnimationFrame usage, smooth transitions"
        }
      ],
      "learning_objectives": [
        "Create visually stunning gradient charts",
        "Implement smooth auto-play animations",
        "Add pulse effects for outbreaks"
      ]
    },
    {
      "iteration": 6,
      "difficulty": "expert",
      "urls": [
        {
          "url": "https://www.chartjs.org/docs/latest/charts/mixed.html",
          "purpose": "Mixed chart types (line + bar)",
          "extract": "Multiple dataset types, stacking, opacity"
        },
        {
          "url": "https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/",
          "purpose": "Advanced Mapbox expressions",
          "extract": "Interpolate, case, match expressions for complex styling"
        }
      ],
      "learning_objectives": [
        "Combine line and bar charts in single visualization",
        "Use advanced expressions for data-driven styling",
        "Create multi-metric visualizations"
      ]
    }
  ],
  "fallback_searches": [
    "Chart.js time series health data visualization 2024",
    "Mapbox timeline animation performance optimization",
    "Interactive vaccine coverage data visualization",
    "Chart.js dual axis configuration examples",
    "Mapbox popup chart integration best practices",
    "WHO vaccination data visualization techniques",
    "Responsive Chart.js in map popups",
    "Time series animation with Mapbox GL JS"
  ],
  "key_techniques": [
    "Timeline slider with auto-play",
    "Chart.js in Mapbox popups",
    "Dual-axis charts (coverage vs cases)",
    "Time series data filtering",
    "Chart instance lifecycle management",
    "Popup timing and performance",
    "Dark theme chart styling",
    "Responsive chart sizing",
    "Animation loop management",
    "Data-driven color scales"
  ],
  "data_sources": [
    "WHO Immunization Data Portal (immunizationdata.who.int)",
    "UNICEF Coverage Estimates (data.unicef.org)",
    "CDC Global Vaccination Data",
    "World Bank Health Indicators",
    "GAVI Alliance Reports"
  ]
}
