182 lines
6.6 KiB
JSON
182 lines
6.6 KiB
JSON
{
|
|
"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"
|
|
]
|
|
}
|