flowdata / index.html
doctopanda's picture
Add 3 files
b5250db verified
Raw History Blame Contribute Delete
46.8 kB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Epidemiológico - México</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
salud: {
dark: '#0f172a',
panel: '#1e293b',
border: '#334155',
primary: '#3b82f6',
danger: '#ef4444',
warning: '#f59e0b',
success: '#10b981',
info: '#06b6d4'
}
}
}
}
}
</script>
<style>
body {
background-color: #0f172a;
color: #e2e8f0;
font-family: 'Inter', sans-serif;
}
.data-card {
background-color: #1e293b;
border-radius: 0.5rem;
border-left: 4px solid;
transition: all 0.3s ease;
}
.data-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.map-container {
position: relative;
height: 400px;
background-color: #1e293b;
border-radius: 0.5rem;
overflow: hidden;
}
.map-tooltip {
position: absolute;
background: rgba(30, 41, 59, 0.9);
border: 1px solid #334155;
border-radius: 4px;
padding: 8px;
pointer-events: none;
z-index: 10;
display: none;
}
.disease-tag {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
}
.table-row:hover {
background-color: #334155;
}
.search-input {
background-color: #1e293b;
border: 1px solid #334155;
color: #e2e8f0;
}
.search-input:focus {
outline: none;
border-color: #3b82f6;
}
</style>
</head>
<body class="bg-salud-dark">
<header class="border-b border-salud-border bg-salud-dark sticky top-0 z-10">
<div class="container mx-auto px-4 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="bg-salud-primary p-2 rounded-lg">
<i class="fas fa-shield-virus text-white text-xl"></i>
</div>
<div>
<h1 class="text-xl font-bold">SALUD<span class="text-salud-primary">MÉXICO</span></h1>
<p class="text-xs text-gray-400">Sistema de Vigilancia Epidemiológica</p>
</div>
</div>
<div class="text-xs text-gray-400 flex items-center space-x-4">
<div class="hidden md:block">
<span>Última actualización: <span class="text-gray-100">16/11/2023 09:00</span></span>
</div>
<div class="bg-salud-panel px-3 py-1 rounded-full flex items-center">
<i class="fas fa-circle text-salud-success mr-1 text-xs"></i>
<span>Sistema operativo</span>
</div>
</div>
</div>
</div>
</header>
<main class="container mx-auto px-4 py-6">
<!-- Alertas y Resumen -->
<section class="mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold flex items-center">
<i class="fas fa-exclamation-triangle text-salud-warning mr-2"></i>
Panorama Epidemiológico Nacional
</h2>
<div class="text-xs bg-salud-panel px-3 py-1 rounded-full">
Semana epidemiológica 45
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<!-- Casos activos -->
<div class="data-card border-salud-primary p-4">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-400 mb-1">Casos activos</p>
<h3 class="text-2xl font-bold">24,518</h3>
</div>
<div class="bg-salud-primary bg-opacity-20 p-2 rounded-lg">
<i class="fas fa-procedures text-salud-primary"></i>
</div>
</div>
<div class="mt-2 flex items-center text-sm">
<span class="text-salud-danger mr-1"><i class="fas fa-arrow-up"></i> 12%</span>
<span class="text-gray-400">vs semana anterior</span>
</div>
</div>
<!-- Defunciones -->
<div class="data-card border-salud-danger p-4">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-400 mb-1">Defunciones</p>
<h3 class="text-2xl font-bold">1,203</h3>
</div>
<div class="bg-salud-danger bg-opacity-20 p-2 rounded-lg">
<i class="fas fa-cross text-salud-danger"></i>
</div>
</div>
<div class="mt-2 flex items-center text-sm">
<span class="text-salud-success mr-1"><i class="fas fa-arrow-down"></i> 5%</span>
<span class="text-gray-400">vs semana anterior</span>
</div>
</div>
<!-- Tasa de positividad -->
<div class="data-card border-salud-warning p-4">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-400 mb-1">Tasa de positividad</p>
<h3 class="text-2xl font-bold">18.7%</h3>
</div>
<div class="bg-salud-warning bg-opacity-20 p-2 rounded-lg">
<i class="fas fa-vial text-salud-warning"></i>
</div>
</div>
<div class="mt-2 flex items-center text-sm">
<span class="text-salud-danger mr-1"><i class="fas fa-arrow-up"></i> 2.3%</span>
<span class="text-gray-400">vs semana anterior</span>
</div>
</div>
<!-- Vacunación -->
<div class="data-card border-salud-success p-4">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-400 mb-1">Vacunación completa</p>
<h3 class="text-2xl font-bold">84.2M</h3>
</div>
<div class="bg-salud-success bg-opacity-20 p-2 rounded-lg">
<i class="fas fa-syringe text-salud-success"></i>
</div>
</div>
<div class="mt-2 flex items-center text-sm">
<span class="text-salud-success mr-1"><i class="fas fa-arrow-up"></i> 0.8%</span>
<span class="text-gray-400">última semana</span>
</div>
</div>
</div>
<!-- Alertas por enfermedad -->
<div class="bg-salud-panel rounded-lg p-4 mb-6">
<div class="flex justify-between items-center mb-3">
<h3 class="font-semibold flex items-center">
<i class="fas fa-bell text-salud-warning mr-2"></i>
Alertas epidemiológicas activas
</h3>
<span class="text-xs bg-salud-panel px-2 py-1 rounded-full">5 enfermedades</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-5 gap-3">
<div class="p-3 rounded-lg bg-red-900 bg-opacity-30 border border-red-700">
<div class="flex items-center justify-between">
<span class="font-medium">Dengue</span>
<span class="text-xs bg-red-700 px-2 py-1 rounded-full">Alerta</span>
</div>
<div class="text-sm mt-1">12 estados afectados</div>
</div>
<div class="p-3 rounded-lg bg-yellow-900 bg-opacity-30 border border-yellow-700">
<div class="flex items-center justify-between">
<span class="font-medium">Influenza</span>
<span class="text-xs bg-yellow-700 px-2 py-1 rounded-full">Vigilancia</span>
</div>
<div class="text-sm mt-1">Aumento estacional</div>
</div>
<div class="p-3 rounded-lg bg-orange-900 bg-opacity-30 border border-orange-700">
<div class="flex items-center justify-between">
<span class="font-medium">COVID-19</span>
<span class="text-xs bg-orange-700 px-2 py-1 rounded-full">Vigilancia</span>
</div>
<div class="text-sm mt-1">Variante XBB predominante</div>
</div>
<div class="p-3 rounded-lg bg-purple-900 bg-opacity-30 border border-purple-700">
<div class="flex items-center justify-between">
<span class="font-medium">Viruela símica</span>
<span class="text-xs bg-purple-700 px-2 py-1 rounded-full">Controlada</span>
</div>
<div class="text-sm mt-1">Casos esporádicos</div>
</div>
<div class="p-3 rounded-lg bg-green-900 bg-opacity-30 border border-green-700">
<div class="flex items-center justify-between">
<span class="font-medium">Cólera</span>
<span class="text-xs bg-green-700 px-2 py-1 rounded-full">Sin transmisión</span>
</div>
<div class="text-sm mt-1">Sin casos en 2023</div>
</div>
</div>
</div>
</section>
<!-- Mapa y Distribución -->
<section class="mb-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Mapa de calor -->
<div class="lg:col-span-2">
<div class="flex justify-between items-center mb-3">
<h3 class="font-semibold">Distribución geográfica de casos</h3>
<div class="flex space-x-2">
<select class="bg-salud-panel border border-salud-border text-sm rounded px-3 py-1">
<option>Dengue</option>
<option>COVID-19</option>
<option>Influenza</option>
<option selected>Todas las enfermedades</option>
</select>
<select class="bg-salud-panel border border-salud-border text-sm rounded px-3 py-1">
<option>Casos totales</option>
<option>Tasa por 100k hab.</option>
<option selected>Incidencia acumulada</option>
</select>
</div>
</div>
<div class="map-container">
<div id="map" style="height: 100%; width: 100%;"></div>
<div class="map-tooltip" id="map-tooltip"></div>
</div>
</div>
<!-- Top estados -->
<div>
<div class="flex justify-between items-center mb-3">
<h3 class="font-semibold">Estados con mayor incidencia</h3>
<span class="text-xs bg-salud-panel px-2 py-1 rounded-full">por 100k habitantes</span>
</div>
<div class="bg-salud-panel rounded-lg p-4 h-full">
<div class="space-y-4">
<div>
<div class="flex justify-between text-sm mb-1">
<span>Veracruz</span>
<span class="font-bold">124.5</span>
</div>
<div class="w-full bg-salud-panel rounded-full h-2">
<div class="bg-salud-danger h-2 rounded-full" style="width: 90%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>Tabasco</span>
<span class="font-bold">98.7</span>
</div>
<div class="w-full bg-salud-panel rounded-full h-2">
<div class="bg-salud-danger h-2 rounded-full" style="width: 75%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>Chiapas</span>
<span class="font-bold">87.3</span>
</div>
<div class="w-full bg-salud-panel rounded-full h-2">
<div class="bg-salud-warning h-2 rounded-full" style="width: 65%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>Oaxaca</span>
<span class="font-bold">76.5</span>
</div>
<div class="w-full bg-salud-panel rounded-full h-2">
<div class="bg-salud-warning h-2 rounded-full" style="width: 55%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>Yucatán</span>
<span class="font-bold">68.2</span>
</div>
<div class="w-full bg-salud-panel rounded-full h-2">
<div class="bg-salud-warning h-2 rounded-full" style="width: 50%"></div>
</div>
</div>
</div>
<div class="mt-6 pt-4 border-t border-salud-border">
<h4 class="text-sm font-medium mb-2">Tendencia por grupo de edad</h4>
<div class="chart-container" style="height: 150px;">
<canvas id="ageTrendChart"></canvas>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Enfermedades y Datos -->
<section class="mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold">
<i class="fas fa-virus mr-2 text-salud-danger"></i>
Enfermedades bajo vigilancia
</h2>
<div class="relative">
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
<input type="text" placeholder="Buscar enfermedad..." class="search-input pl-10 pr-4 py-2 rounded-full text-sm w-64">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<!-- Tendencia de enfermedades -->
<div class="bg-salud-panel rounded-lg p-4">
<div class="flex justify-between items-center mb-3">
<h3 class="font-semibold">Tendencia semanal de casos</h3>
<div class="flex space-x-2">
<button class="text-xs bg-salud-primary px-3 py-1 rounded-full">4 semanas</button>
<button class="text-xs bg-salud-panel px-3 py-1 rounded-full">12 semanas</button>
</div>
</div>
<div class="chart-container" style="height: 250px;">
<canvas id="diseaseTrendChart"></canvas>
</div>
</div>
<!-- Distribución por sexo -->
<div class="bg-salud-panel rounded-lg p-4">
<div class="flex justify-between items-center mb-3">
<h3 class="font-semibold">Distribución por sexo y edad</h3>
<select class="bg-salud-panel border border-salud-border text-sm rounded px-3 py-1">
<option>Todas las enfermedades</option>
<option>Dengue</option>
<option>COVID-19</option>
<option>Influenza</option>
</select>
</div>
<div class="grid grid-cols-2 gap-4 h-[250px]">
<div>
<h4 class="text-sm font-medium mb-2 text-center">Distribución por sexo</h4>
<div class="chart-container" style="height: 200px;">
<canvas id="genderDistributionChart"></canvas>
</div>
</div>
<div>
<h4 class="text-sm font-medium mb-2 text-center">Distribución por edad</h4>
<div class="chart-container" style="height: 200px;">
<canvas id="ageDistributionChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- Tabla de enfermedades -->
<div class="bg-salud-panel rounded-lg overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="border-b border-salud-border text-left text-sm">
<th class="py-3 px-4">Enfermedad</th>
<th class="py-3 px-4 text-right">Casos</th>
<th class="py-3 px-4 text-right">Defunciones</th>
<th class="py-3 px-4 text-right">Letalidad</th>
<th class="py-3 px-4 text-right">Tendencia</th>
<th class="py-3 px-4">Estados afectados</th>
</tr>
</thead>
<tbody class="divide-y divide-salud-border">
<tr class="table-row">
<td class="py-3 px-4">
<div class="flex items-center">
<span class="disease-tag bg-red-900 text-red-300 mr-2">Alerta</span>
Dengue
</div>
</td>
<td class="py-3 px-4 text-right font-mono">12,487</td>
<td class="py-3 px-4 text-right font-mono">38</td>
<td class="py-3 px-4 text-right font-mono">0.30%</td>
<td class="py-3 px-4 text-right">
<span class="text-salud-danger"><i class="fas fa-arrow-up"></i> 18%</span>
</td>
<td class="py-3 px-4">
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-salud-panel px-2 py-1 rounded">VER</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">TAB</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">CHP</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">OAX</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">+8</span>
</div>
</td>
</tr>
<tr class="table-row">
<td class="py-3 px-4">
<div class="flex items-center">
<span class="disease-tag bg-orange-900 text-orange-300 mr-2">Vigilancia</span>
COVID-19
</div>
</td>
<td class="py-3 px-4 text-right font-mono">8,432</td>
<td class="py-3 px-4 text-right font-mono">127</td>
<td class="py-3 px-4 text-right font-mono">1.51%</td>
<td class="py-3 px-4 text-right">
<span class="text-salud-danger"><i class="fas fa-arrow-up"></i> 7%</span>
</td>
<td class="py-3 px-4">
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-salud-panel px-2 py-1 rounded">CDMX</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">MEX</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">NL</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">JAL</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">+28</span>
</div>
</td>
</tr>
<tr class="table-row">
<td class="py-3 px-4">
<div class="flex items-center">
<span class="disease-tag bg-yellow-900 text-yellow-300 mr-2">Vigilancia</span>
Influenza
</div>
</td>
<td class="py-3 px-4 text-right font-mono">3,215</td>
<td class="py-3 px-4 text-right font-mono">42</td>
<td class="py-3 px-4 text-right font-mono">1.31%</td>
<td class="py-3 px-4 text-right">
<span class="text-salud-danger"><i class="fas fa-arrow-up"></i> 32%</span>
</td>
<td class="py-3 px-4">
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-salud-panel px-2 py-1 rounded">SON</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">BC</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">CHH</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">+12</span>
</div>
</td>
</tr>
<tr class="table-row">
<td class="py-3 px-4">
<div class="flex items-center">
<span class="disease-tag bg-purple-900 text-purple-300 mr-2">Controlada</span>
Viruela símica
</div>
</td>
<td class="py-3 px-4 text-right font-mono">287</td>
<td class="py-3 px-4 text-right font-mono">0</td>
<td class="py-3 px-4 text-right font-mono">0.00%</td>
<td class="py-3 px-4 text-right">
<span class="text-salud-success"><i class="fas fa-arrow-down"></i> 62%</span>
</td>
<td class="py-3 px-4">
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-salud-panel px-2 py-1 rounded">CDMX</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">JAL</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">BCN</span>
</div>
</td>
</tr>
<tr class="table-row">
<td class="py-3 px-4">
<div class="flex items-center">
<span class="disease-tag bg-blue-900 text-blue-300 mr-2">Rutina</span>
Sarampión
</div>
</td>
<td class="py-3 px-4 text-right font-mono">12</td>
<td class="py-3 px-4 text-right font-mono">0</td>
<td class="py-3 px-4 text-right font-mono">0.00%</td>
<td class="py-3 px-4 text-right">
<span class="text-gray-400"><i class="fas fa-minus"></i> 0%</span>
</td>
<td class="py-3 px-4">
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-salud-panel px-2 py-1 rounded">MOR</span>
<span class="text-xs bg-salud-panel px-2 py-1 rounded">GRO</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Boletines y Recursos -->
<section>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-salud-panel rounded-lg p-4">
<h3 class="font-semibold mb-3 flex items-center">
<i class="fas fa-file-alt text-salud-primary mr-2"></i>
Últimos boletines
</h3>
<div class="space-y-3">
<div class="border-b border-salud-border pb-3">
<div class="text-sm font-medium mb-1">Boletín Epidemiológico Semana 45</div>
<div class="text-xs text-gray-400 mb-1">Publicado: 13/11/2023</div>
<button class="text-xs bg-salud-primary px-3 py-1 rounded-full">Descargar PDF</button>
</div>
<div class="border-b border-salud-border pb-3">
<div class="text-sm font-medium mb-1">Alerta por aumento de dengue</div>
<div class="text-xs text-gray-400 mb-1">Publicado: 08/11/2023</div>
<button class="text-xs bg-salud-primary px-3 py-1 rounded-full">Descargar PDF</button>
</div>
<div>
<div class="text-sm font-medium mb-1">Situación de influenza estacional</div>
<div class="text-xs text-gray-400 mb-1">Publicado: 01/11/2023</div>
<button class="text-xs bg-salud-primary px-3 py-1 rounded-full">Descargar PDF</button>
</div>
</div>
</div>
<div class="bg-salud-panel rounded-lg p-4">
<h3 class="font-semibold mb-3 flex items-center">
<i class="fas fa-chart-line text-salud-info mr-2"></i>
Indicadores clave
</h3>
<div class="space-y-4">
<div>
<div class="text-sm mb-1">Tasa de incidencia nacional</div>
<div class="text-xl font-bold">87.3</div>
<div class="text-xs text-gray-400">casos por 100k habitantes</div>
</div>
<div>
<div class="text-sm mb-1">Tasa de mortalidad</div>
<div class="text-xl font-bold">0.92</div>
<div class="text-xs text-gray-400">defunciones por 100k habitantes</div>
</div>
<div>
<div class="text-sm mb-1">Días promedio de atención</div>
<div class="text-xl font-bold">3.8</div>
<div class="text-xs text-gray-400">desde síntomas hasta diagnóstico</div>
</div>
</div>
</div>
<div class="bg-salud-panel rounded-lg p-4">
<h3 class="font-semibold mb-3 flex items-center">
<i class="fas fa-link text-salud-success mr-2"></i>
Recursos y enlaces
</h3>
<div class="space-y-2">
<a href="#" class="flex items-center text-sm text-salud-primary hover:underline">
<i class="fas fa-external-link-alt mr-2"></i>
Lineamientos técnicos
</a>
<a href="#" class="flex items-center text-sm text-salud-primary hover:underline">
<i class="fas fa-external-link-alt mr-2"></i>
Protocolos de vigilancia
</a>
<a href="#" class="flex items-center text-sm text-salud-primary hover:underline">
<i class="fas fa-external-link-alt mr-2"></i>
Guías para personal médico
</a>
<a href="#" class="flex items-center text-sm text-salud-primary hover:underline">
<i class="fas fa-external-link-alt mr-2"></i>
Materiales para prevención
</a>
<a href="#" class="flex items-center text-sm text-salud-primary hover:underline">
<i class="fas fa-external-link-alt mr-2"></i>
Datos abiertos epidemiológicos
</a>
</div>
</div>
</div>
</section>
</main>
<footer class="border-t border-salud-border py-4 mt-8 bg-salud-panel">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center text-xs text-gray-400">
<div class="mb-2 md:mb-0">
<span class="mr-4">Secretaría de Salud - Dirección General de Epidemiología</span>
<span>Datos actualizados al 16/11/2023</span>
</div>
<div>
<span class="mr-4">Sistema Nacional de Vigilancia Epidemiológica</span>
<span>Versión 4.2.1</span>
</div>
</div>
<div class="mt-2 text-xxs text-gray-500 text-center">
Los datos presentados son preliminares y sujetos a validación. Para uso oficial consulte los boletines epidemiológicos.
</div>
</div>
</footer>
<script>
// Mapa de México (simulado)
document.addEventListener('DOMContentLoaded', function() {
const mapContainer = document.getElementById('map');
const tooltip = document.getElementById('map-tooltip');
// Simulación de datos por estado
const stateData = {
'AGS': { cases: 1245, incidence: 87.3, name: 'Aguascalientes' },
'BC': { cases: 2876, incidence: 102.4, name: 'Baja California' },
'BCS': { cases: 543, incidence: 65.2, name: 'Baja California Sur' },
'CAMP': { cases: 876, incidence: 78.9, name: 'Campeche' },
'CHIS': { cases: 4321, incidence: 143.2, name: 'Chiapas' },
'CHIH': { cases: 1987, incidence: 92.1, name: 'Chihuahua' },
'CDMX': { cases: 8765, incidence: 98.7, name: 'Ciudad de México' },
'COAH': { cases: 1234, incidence: 76.5, name: 'Coahuila' },
'COL': { cases: 987, incidence: 65.4, name: 'Colima' },
'DGO': { cases: 765, incidence: 54.3, name: 'Durango' },
'GTO': { cases: 2345, incidence: 87.6, name: 'Guanajuato' },
'GRO': { cases: 3210, incidence: 109.8, name: 'Guerrero' },
'HGO': { cases: 1234, incidence: 76.5, name: 'Hidalgo' },
'JAL': { cases: 5432, incidence: 121.3, name: 'Jalisco' },
'MEX': { cases: 6789, incidence: 132.4, name: 'Estado de México' },
'MICH': { cases: 2345, incidence: 87.6, name: 'Michoacán' },
'MOR': { cases: 987, incidence: 65.4, name: 'Morelos' },
'NAY': { cases: 765, incidence: 54.3, name: 'Nayarit' },
'NL': { cases: 3456, incidence: 98.7, name: 'Nuevo León' },
'OAX': { cases: 3210, incidence: 109.8, name: 'Oaxaca' },
'PUE': { cases: 2345, incidence: 87.6, name: 'Puebla' },
'QRO': { cases: 1234, incidence: 76.5, name: 'Querétaro' },
'QROO': { cases: 987, incidence: 65.4, name: 'Quintana Roo' },
'SLP': { cases: 765, incidence: 54.3, name: 'San Luis Potosí' },
'SIN': { cases: 2345, incidence: 87.6, name: 'Sinaloa' },
'SON': { cases: 3210, incidence: 109.8, name: 'Sonora' },
'TAB': { cases: 4321, incidence: 143.2, name: 'Tabasco' },
'TAMPS': { cases: 1987, incidence: 92.1, name: 'Tamaulipas' },
'TLAX': { cases: 876, incidence: 78.9, name: 'Tlaxcala' },
'VER': { cases: 5432, incidence: 156.7, name: 'Veracruz' },
'YUC': { cases: 2345, incidence: 87.6, name: 'Yucatán' },
'ZAC': { cases: 987, incidence: 65.4, name: 'Zacatecas' }
};
// Simulación de mapa (en realidad sería un SVG o imagen con áreas clickeables)
mapContainer.innerHTML = `
<div style="position: relative; width: 100%; height: 100%; background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Mexico_blank_map.svg/1200px-Mexico_blank_map.svg.png'); background-size: contain; background-repeat: no-repeat; background-position: center;">
${Object.keys(stateData).map(code => `
<div class="state-area"
data-code="${code}"
data-cases="${stateData[code].cases}"
data-incidence="${stateData[code].incidence}"
data-name="${stateData[code].name}"
style="position: absolute;
width: ${Math.random() * 5 + 2}%;
height: ${Math.random() * 5 + 2}%;
top: ${Math.random() * 80 + 10}%;
left: ${Math.random() * 80 + 10}%;
background-color: rgba(59, 130, 246, ${stateData[code].incidence / 200});
border: 1px solid #3b82f6;
border-radius: 50%;
cursor: pointer;">
</div>
`).join('')}
</div>
`;
// Manejar eventos del mapa
document.querySelectorAll('.state-area').forEach(area => {
area.addEventListener('mouseenter', function() {
const code = this.getAttribute('data-code');
const name = this.getAttribute('data-name');
const cases = this.getAttribute('data-cases');
const incidence = this.getAttribute('data-incidence');
tooltip.innerHTML = `
<div class="font-bold">${name} (${code})</div>
<div>Casos: ${cases}</div>
<div>Incidencia: ${incidence} por 100k</div>
`;
tooltip.style.display = 'block';
tooltip.style.left = (this.getBoundingClientRect().left + window.scrollX) + 'px';
tooltip.style.top = (this.getBoundingClientRect().top + window.scrollY - 50) + 'px';
});
area.addEventListener('mouseleave', function() {
tooltip.style.display = 'none';
});
});
});
// Gráfico de tendencia por edad
const ageTrendCtx = document.getElementById('ageTrendChart').getContext('2d');
const ageTrendChart = new Chart(ageTrendCtx, {
type: 'line',
data: {
labels: ['0-4', '5-9', '10-14', '15-19', '20-24', '25-29', '30-39', '40-49', '50-59', '60+'],
datasets: [
{
label: '2023',
data: [12, 18, 24, 32, 45, 38, 42, 36, 28, 22],
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.3,
borderWidth: 2
},
{
label: '2022',
data: [8, 14, 20, 28, 38, 32, 36, 32, 24, 18],
borderColor: '#64748b',
backgroundColor: 'rgba(100, 116, 139, 0.1)',
tension: 0.3,
borderWidth: 2,
borderDash: [5, 5]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(51, 65, 85, 0.5)'
},
ticks: {
callback: function(value) {
return value + '%';
}
}
},
x: {
grid: {
display: false
}
}
}
}
});
// Gráfico de tendencia de enfermedades
const diseaseTrendCtx = document.getElementById('diseaseTrendChart').getContext('2d');
const diseaseTrendChart = new Chart(diseaseTrendCtx, {
type: 'bar',
data: {
labels: ['Sem 41', 'Sem 42', 'Sem 43', 'Sem 44', 'Sem 45'],
datasets: [
{
label: 'Dengue',
data: [2100, 2350, 2670, 2980, 3240],
backgroundColor: '#ef4444'
},
{
label: 'COVID-19',
data: [1850, 1720, 1650, 1820, 1930],
backgroundColor: '#f97316'
},
{
label: 'Influenza',
data: [450, 620, 780, 950, 1210],
backgroundColor: '#f59e0b'
},
{
label: 'Otras',
data: [870, 920, 950, 980, 1020],
backgroundColor: '#64748b'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: '#e2e8f0'
}
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(51, 65, 85, 0.5)'
}
},
x: {
grid: {
display: false
}
}
}
}
});
// Gráfico de distribución por sexo
const genderDistributionCtx = document.getElementById('genderDistributionChart').getContext('2d');
const genderDistributionChart = new Chart(genderDistributionCtx, {
type: 'doughnut',
data: {
labels: ['Hombre', 'Mujer', 'Otro/No especificado'],
datasets: [{
data: [48, 49, 3],
backgroundColor: [
'#3b82f6',
'#ec4899',
'#64748b'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '70%',
plugins: {
legend: {
position: 'right',
labels: {
color: '#e2e8f0'
}
}
}
}
});
// Gráfico de distribución por edad
const ageDistributionCtx = document.getElementById('ageDistributionChart').getContext('2d');
const ageDistributionChart = new Chart(ageDistributionCtx, {
type: 'bar',
data: {
labels: ['0-9', '10-19', '20-29', '30-39', '40-49', '50-59', '60+'],
datasets: [{
label: 'Casos',
data: [8, 22, 35, 28, 18, 12, 8],
backgroundColor: '#10b981'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(51, 65, 85, 0.5)'
}
},
x: {
grid: {
display: false
}
}
}
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=doctopanda/flowdata" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>