Spaces:
Running
Running
Download index.html from doctopanda/datanalytics: direct link, hf CLI and curl.
- Browser
- Download file 39.8 kB
-
https://huggingface.co/spaces/doctopanda/datanalytics/resolve/main/index.html
- Command line
-
hf download hf://spaces/doctopanda/datanalytics/index.html
-
curl -L -o index.html https://huggingface.co/spaces/doctopanda/datanalytics/resolve/main/index.html
39.8 kB
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>INEGI Analytics - Dashboard Estadístico</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| mono: ['IBM Plex Mono', 'monospace'], | |
| }, | |
| colors: { | |
| inegi: { | |
| dark: '#121212', | |
| panel: '#1e1e1e', | |
| border: '#333333', | |
| accent: '#00a3ff', | |
| highlight: '#0088ff', | |
| warning: '#ff6600', | |
| danger: '#ff0033', | |
| teal: '#00c8b3', | |
| purple: '#7b5de5', | |
| green: '#00b74f' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background-color: #121212; | |
| color: #e0e0e0; | |
| font-family: 'IBM Plex Mono', monospace; | |
| } | |
| .data-panel { | |
| border: 1px solid #333; | |
| background-color: #1e1e1e; | |
| } | |
| .data-header { | |
| border-bottom: 1px solid #333; | |
| background-color: #1a1a1a; | |
| } | |
| .data-table { | |
| font-size: 0.875rem; | |
| } | |
| .data-table th { | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| font-size: 0.75rem; | |
| letter-spacing: 0.05em; | |
| } | |
| .data-table td, .data-table th { | |
| padding: 0.5rem 1rem; | |
| border-bottom: 1px solid #333333; | |
| } | |
| .data-value { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-weight: 600; | |
| } | |
| .positive-trend { | |
| color: #00b74f; | |
| } | |
| .negative-trend { | |
| color: #ff0033; | |
| } | |
| .neutral-trend { | |
| color: #0088ff; | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .trend-icon { | |
| margin-right: 4px; | |
| } | |
| .section-divider { | |
| border: none; | |
| border-top: 1px solid #333; | |
| margin: 1.5rem 0; | |
| } | |
| .metric-card { | |
| background-color: #252525; | |
| border-left: 4px solid; | |
| padding: 0.75rem 1rem; | |
| } | |
| .metric-title { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| opacity: 0.7; | |
| } | |
| .metric-value { | |
| font-size: 1.5rem; | |
| line-height: 1; | |
| margin: 0.25rem 0 0.5rem; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 250px; | |
| width: 100%; | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background-color: #333; | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .progress-value { | |
| height: 100%; | |
| } | |
| .grid-point { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .kpi-badge { | |
| font-size: 0.7rem; | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| display: inline-flex; | |
| align-items: center; | |
| } | |
| .inegi-logo { | |
| filter: brightness(0) invert(1); | |
| height: 24px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-inegi-dark text-gray-300 font-mono"> | |
| <header class="border-b border-inegi-border bg-inegi-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-4"> | |
| <img src="https://www.inegi.org.mx/contenidos/estadisticas/logo_inegi.png" alt="INEGI" class="inegi-logo"> | |
| <span class="text-inegi-accent font-bold text-xl">ANALYTICS</span> | |
| <span class="text-xs px-2 py-1 bg-inegi-panel rounded">v2024</span> | |
| </div> | |
| <div class="text-xs text-gray-400"> | |
| <span class="mr-4">Última actualización: <span class="text-gray-100">2024-03-15 12:00:00 CST</span></span> | |
| <span>Fuente: <span class="text-gray-100">INEGI API</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Análisis Ejecutivo --> | |
| <section class="mb-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <!-- Crecimiento Económico --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold">CRECIMIENTO ECONÓMICO</h3> | |
| <span class="text-xs bg-inegi-panel px-2 py-1 rounded">PIB Trimestral</span> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="economicGrowthChart"></canvas> | |
| </div> | |
| <div class="mt-3 text-xs grid grid-cols-3 gap-2"> | |
| <div class="flex items-center"><span class="grid-point bg-inegi-green"></span> Primario: +2.1%</div> | |
| <div class="flex items-center"><span class="grid-point bg-inegi-accent"></span> Secundario: +1.8%</div> | |
| <div class="flex items-center"><span class="grid-point bg-inegi-purple"></span> Terciario: +3.4%</div> | |
| </div> | |
| </div> | |
| <!-- Demografía --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold">POBLACIÓN MEXICANA</h3> | |
| <span class="text-xs bg-inegi-panel px-2 py-1 rounded">Censo 2020</span> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="demographicChart"></canvas> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 mt-2 text-xs text-center"> | |
| <div> | |
| <div class="font-bold">Género</div> | |
| <div>Hombres: 48.8%</div> | |
| <div>Mujeres: 51.2%</div> | |
| </div> | |
| <div> | |
| <div class="font-bold">Grupos de Edad</div> | |
| <div>0-14: 25.3%</div> | |
| <div>15-64: 66.1%</div> | |
| <div>65+: 8.6%</div> | |
| </div> | |
| <div> | |
| <div class="font-bold">Localidad</div> | |
| <div>Urbana: 78.8%</div> | |
| <div>Rural: 21.2%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <!-- Indicadores Clave --> | |
| <div class="data-panel rounded-lg p-3"> | |
| <div class="text-xs mb-2">PIB ANUAL 2023</div> | |
| <div class="flex justify-between items-end mb-1"> | |
| <span class="text-xl data-value">3.1%</span> | |
| <span class="text-xs positive-trend">+0.8% vs 2022</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-value bg-inegi-green" style="width: 62%"></div> | |
| </div> | |
| <div class="text-xs mt-1 flex justify-between"> | |
| <span>2022: 2.3%</span> | |
| <span>Pronóstico: 2.5%</span> | |
| </div> | |
| </div> | |
| <div class="data-panel rounded-lg p-3"> | |
| <div class="text-xs mb-2">INFLACIÓN ANUAL</div> | |
| <div class="flex justify-between items-end mb-1"> | |
| <span class="text-xl data-value">4.45%</span> | |
| <span class="text-xs negative-trend">-2.1% vs 2022</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-value bg-inegi-warning" style="width: 44.5%"></div> | |
| </div> | |
| <div class="text-xs mt-1 flex justify-between"> | |
| <span>2022: 6.55%</span> | |
| <span>Meta: 3.0%</span> | |
| </div> | |
| </div> | |
| <div class="data-panel rounded-lg p-3"> | |
| <div class="text-xs mb-2">TASA DE DESEMPLEO</div> | |
| <div class="flex justify-between items-end mb-1"> | |
| <span class="text-xl data-value">2.8%</span> | |
| <span class="text-xs positive-trend">-0.3% vs 2022</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-value bg-inegi-accent" style="width: 28%"></div> | |
| </div> | |
| <div class="text-xs mt-1 flex justify-between"> | |
| <span>2022: 3.1%</span> | |
| <span>Pre-pandemia: 3.5%</span> | |
| </div> | |
| </div> | |
| <div class="data-panel rounded-lg p-3"> | |
| <div class="text-xs mb-2">POBLACIÓN ECONÓMICAMENTE ACTIVA</div> | |
| <div class="flex justify-between items-end mb-1"> | |
| <span class="text-xl data-value">60.1M</span> | |
| <span class="text-xs positive-trend">+1.2M vs 2022</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-value bg-inegi-purple" style="width: 75%"></div> | |
| </div> | |
| <div class="text-xs mt-1 flex justify-between"> | |
| <span>2022: 58.9M</span> | |
| <span>Población total: 126M</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <hr class="section-divider"> | |
| <!-- Análisis Sectorial --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4">DESEMPEÑO POR SECTOR ECONÓMICO</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <!-- Sector Primario --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="mb-4"> | |
| <h3 class="font-semibold">SECTOR PRIMARIO</h3> | |
| <div class="text-xs text-gray-400 mt-1">Agricultura, ganadería, pesca</div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="primarySectorChart"></canvas> | |
| </div> | |
| <div class="text-xs mt-3 grid grid-cols-1 gap-1"> | |
| <div><span class="text-inegi-green">Crecimiento:</span> +2.1% anual</div> | |
| <div><span class="text-inegi-accent">Participación PIB:</span> 3.4%</div> | |
| <div><span class="text-inegi-purple">Empleo generado:</span> 12.5% del total</div> | |
| </div> | |
| </div> | |
| <!-- Sector Secundario --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="mb-4"> | |
| <h3 class="font-semibold">SECTOR SECUNDARIO</h3> | |
| <div class="text-xs text-gray-400 mt-1">Industria, manufactura, construcción</div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="secondarySectorChart"></canvas> | |
| </div> | |
| <div class="text-xs mt-3"> | |
| <div> | |
| <span class="text-inegi-green">Crecimiento:</span> +1.8% anual | |
| </div> | |
| <div> | |
| <span class="text-inegi-accent">Participación PIB:</span> 32.5% | |
| </div> | |
| <div> | |
| <span class="text-inegi-purple">Manufactura:</span> +3.2% (destaca automotriz) | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sector Terciario --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="mb-4"> | |
| <h3 class="font-semibold">SECTOR TERCIARIO</h3> | |
| <div class="text-xs text-gray-400 mt-1">Servicios, comercio, turismo</div> | |
| </div> | |
| <table class="w-full text-xs"> | |
| <thead> | |
| <tr> | |
| <th class="text-left">Subsector</th> | |
| <th class="text-right">Crecimiento</th> | |
| <th class="text-right">Participación</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="text-left">Comercio</td> | |
| <td class="text-right data-value">+3.1%</td> | |
| <td class="text-right positive-trend">18.7%</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">Servicios financieros</td> | |
| <td class="text-right data-value">+4.2%</td> | |
| <td class="text-right positive-trend">12.3%</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">Turismo</td> | |
| <td class="text-right data-value">+5.8%</td> | |
| <td class="text-right positive-trend">8.5%</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">Transporte</td> | |
| <td class="text-right data-value">+2.4%</td> | |
| <td class="text-right neutral-trend">6.2%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="text-xs mt-2 text-amber-300"> | |
| Total participación en PIB: 64.1% | Genera 62% del empleo | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Comercio Exterior --> | |
| <div class="data-panel rounded-lg mb-6 p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold">COMERCIO EXTERIOR 2023</h3> | |
| <div class="text-xs bg-inegi-panel px-2 py-1 rounded">en miles de millones USD</div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-3"> | |
| <div class="p-3 bg-[#003153] rounded"> | |
| <div class="text-xs mb-1 font-bold">Exportaciones Totales</div> | |
| <div class="text-xl mb-1">$593.4</div> | |
| <div class="text-xs positive-trend">+2.9% vs 2022</div> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="kpi-badge bg-blue-900">Manufacturas: 89%</span> | |
| <span class="kpi-badge bg-green-900">Petróleo: 5.8%</span> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-[#1a1a2e] rounded"> | |
| <div class="text-xs mb-1 font-bold">Importaciones Totales</div> | |
| <div class="text-xl mb-1">$606.7</div> | |
| <div class="text-xs negative-trend">+4.1% vs 2022</div> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="kpi-badge bg-blue-900">Bienes intermedios: 76%</span> | |
| <span class="kpi-badge bg-green-900">Bienes de capital: 15%</span> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-[#3a0a2e] rounded"> | |
| <div class="text-xs mb-1 font-bold">Balanza Comercial</div> | |
| <div class="text-xl mb-1">-$13.3</div> | |
| <div class="text-xs negative-trend">Déficit</div> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="kpi-badge bg-blue-900">Superávit con EE.UU.: +$152.4</span> | |
| <span class="kpi-badge bg-red-900">Déficit con China: -$110.2</span> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-[#4a0100] rounded"> | |
| <div class="text-xs mb-1 font-bold">TLCAN/USMCA</div> | |
| <div class="text-xl mb-1">83.5%</div> | |
| <div class="text-xs">del comercio total</div> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="kpi-badge bg-blue-900">EE.UU.: 78.8%</span> | |
| <span class="kpi-badge bg-green-900">Canadá: 4.7%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <hr class="section-divider"> | |
| <!-- Indicadores Sociales --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <span class="status-indicator bg-inegi-purple"></span> | |
| <span>INDICADORES SOCIALES</span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <!-- Pobreza --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="mb-3"> | |
| <h3 class="font-semibold">POBREZA Y DESIGUALDAD</h3> | |
| <div class="text-xs text-gray-400">Datos 2022 (CONEVAL)</div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="povertyChart"></canvas> | |
| </div> | |
| <div class="text-xs mt-3 grid grid-cols-2 gap-1"> | |
| <div><span class="text-inegi-accent">Pobreza:</span> 36.3% (46.8M personas)</div> | |
| <div><span class="text-inegi-warning">Pobreza extrema:</span> 8.1% (10.4M)</div> | |
| <div><span class="text-inegi-green">Clase media:</span> 42.2% de la población</div> | |
| <div><span class="text-inegi-purple">Coef. Gini:</span> 0.415 (0=igualdad)</div> | |
| </div> | |
| </div> | |
| <!-- Educación --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="mb-3"> | |
| <h3 class="font-semibold">EDUCACIÓN Y SALUD</h3> | |
| <div class="text-xs text-gray-400">Indicadores clave</div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="educationChart"></canvas> | |
| </div> | |
| <div class="text-xs mt-3"> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <div> | |
| <div>Escolaridad promedio</div> | |
| <div class="data-value">9.7 años</div> | |
| </div> | |
| <div> | |
| <div>Analfabetismo</div> | |
| <div class="data-value">4.4%</div> | |
| </div> | |
| <div> | |
| <div>Esperanza de vida</div> | |
| <div class="data-value">75.2 años</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Seguridad --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold">SEGURIDAD Y JUSTICIA</h3> | |
| <span class="text-xs bg-inegi-panel px-2 py-1 rounded">ENVIPE 2023</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-3"> | |
| <div class="p-3"> | |
| <div class="text-xs mb-1">Tasa de homicidios</div> | |
| <div class="text-2xl data-value">25.0</div> | |
| <div class="text-xs">por 100k habitantes</div> | |
| </div> | |
| <div class="p-3"> | |
| <div class="text-xs mb-1">Victimización</div> | |
| <div class="text-2xl data-value">22.4%</div> | |
| <div class="text-xs">hogares afectados</div> | |
| </div> | |
| <div class="p-3"> | |
| <div class="text-xs mb-1">Percepción inseguridad</div> | |
| <div class="text-2xl data-value">73.9%</div> | |
| <div class="text-xs">en su ciudad</div> | |
| </div> | |
| <div class="p-3"> | |
| <div class="text-xs mb-1">Confianza en policías</div> | |
| <div class="text-2xl data-value">32.1%</div> | |
| <div class="text-xs">mucha/algo de confianza</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <hr class="section-divider"> | |
| <!-- Datos por Entidad Federativa --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4">DESEMPEÑO POR ENTIDAD FEDERATIVA</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full data-table"> | |
| <thead> | |
| <tr> | |
| <th class="text-left">Entidad</th> | |
| <th class="text-right">PIB per cápita</th> | |
| <th class="text-right">Crecimiento PIB</th> | |
| <th class="text-right">Tasa desempleo</th> | |
| <th class="text-right">Pobreza</th> | |
| <th class="text-right">Escolaridad</th> | |
| <th class="text-right">Homicidios</th> | |
| <th class="text-right">Competitividad</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="text-left font-semibold">CDMX</td> | |
| <td class="text-right data-value">$289,456</td> | |
| <td class="text-right positive-trend">+3.8%</td> | |
| <td class="text-right">4.1%</td> | |
| <td class="text-right">27.6%</td> | |
| <td class="text-right">11.3</td> | |
| <td class="text-right">15.2</td> | |
| <td class="text-right positive-trend">1/32</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left font-semibold">Nuevo León</td> | |
| <td class="text-right data-value">$254,789</td> | |
| <td class="text-right positive-trend">+4.2%</td> | |
| <td class="text-right">3.5%</td> | |
| <td class="text-right">20.4%</td> | |
| <td class="text-right">10.7</td> | |
| <td class="text-right">8.5</td> | |
| <td class="text-right positive-trend">2/32</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left font-semibold">Querétaro</td> | |
| <td class="text-right data-value">$198,456</td> | |
| <td class="text-right positive-trend">+5.1%</td> | |
| <td class="text-right">2.9%</td> | |
| <td class="text-right">32.1%</td> | |
| <td class="text-right">9.8</td> | |
| <td class="text-right">12.4</td> | |
| <td class="text-right positive-trend">3/32</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left font-semibold">Chiapas</td> | |
| <td class="text-right data-value">$78,123</td> | |
| <td class="text-right neutral-trend">+1.2%</td> | |
| <td class="text-right">2.1%</td> | |
| <td class="text-right">67.4%</td> | |
| <td class="text-right">6.5</td> | |
| <td class="text-right">18.7</td> | |
| <td class="text-right negative-trend">32/32</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left font-semibold">Promedio Nacional</td> | |
| <td class="text-right data-value">$152,987</td> | |
| <td class="text-right positive-trend">+3.1%</td> | |
| <td class="text-right">2.8%</td> | |
| <td class="text-right">36.3%</td> | |
| <td class="text-right">9.7</td> | |
| <td class="text-right">25.0</td> | |
| <td class="text-right">-</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="border-t border-inegi-border py-4 mt-8 bg-inegi-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">INEGI ANALYTICS v2024</span> | |
| <span>DATOS OFICIALES</span> | |
| </div> | |
| <div> | |
| <span class="mr-4">Última actualización: 2024-03-15T12:00:00 CST</span> | |
| <span>Próxima actualización: 2024-04-25T00:00:00 CST</span> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xxs text-gray-500 text-center"> | |
| Los datos presentados son oficiales del INEGI | Margen de error ≤1.5% para indicadores principales | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Gráfico de Crecimiento Económico | |
| const economicGrowthCtx = document.getElementById('economicGrowthChart').getContext('2d'); | |
| const economicGrowthChart = new Chart(economicGrowthCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['2019', '2020', '2021', '2022', '2023'], | |
| datasets: [ | |
| { | |
| label: 'PIB Total', | |
| data: [100, 91.5, 96.8, 101.2, 104.3], | |
| borderColor: '#00a3ff', | |
| backgroundColor: 'rgba(0, 163, 255, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2, | |
| pointRadius: 4 | |
| }, | |
| { | |
| label: 'Sector Primario', | |
| data: [100, 99.2, 102.1, 104.5, 106.6], | |
| borderColor: '#00b74f', | |
| backgroundColor: 'rgba(0, 183, 79, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2, | |
| pointRadius: 4 | |
| }, | |
| { | |
| label: 'Sector Secundario', | |
| data: [100, 89.4, 94.2, 96.8, 98.6], | |
| borderColor: '#7b5de5', | |
| backgroundColor: 'rgba(123, 93, 229, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2, | |
| pointRadius: 4 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.dataset.label || ''; | |
| if (label) { | |
| label += ': '; | |
| } | |
| if (context.parsed.y !== null) { | |
| const value = context.parsed.y - 100; | |
| label += value > 0 ? '+' + value.toFixed(1) + '%' : value.toFixed(1) + '%'; | |
| } | |
| return label; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| min: 85, | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return (value - 100) + '%'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Gráfico Demográfico | |
| const demographicCtx = document.getElementById('demographicChart').getContext('2d'); | |
| const demographicChart = new Chart(demographicCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['0-14 años', '15-29 años', '30-44 años', '45-59 años', '60+ años'], | |
| datasets: [{ | |
| data: [25.3, 26.1, 20.8, 15.2, 12.6], | |
| backgroundColor: [ | |
| '#00a3ff', | |
| '#00b74f', | |
| '#7b5de5', | |
| '#ff6600', | |
| '#00c8b3' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| cutout: '70%', | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| } | |
| } | |
| }); | |
| // Gráfico Sector Primario | |
| const primarySectorCtx = document.getElementById('primarySectorChart').getContext('2d'); | |
| const primarySectorChart = new Chart(primarySectorCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Agricultura', 'Ganadería', 'Pesca', 'Silvicultura'], | |
| datasets: [{ | |
| label: 'Crecimiento anual', | |
| data: [2.8, 1.5, 3.2, 0.7], | |
| backgroundColor: [ | |
| 'rgba(0, 183, 79, 0.7)', | |
| 'rgba(0, 183, 79, 0.7)', | |
| 'rgba(0, 183, 79, 0.7)', | |
| 'rgba(0, 183, 79, 0.7)' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Gráfico Sector Secundario | |
| const secondarySectorCtx = document.getElementById('secondarySectorChart').getContext('2d'); | |
| const secondarySectorChart = new Chart(secondarySectorCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Manufactura', 'Construcción', 'Minería', 'Electricidad'], | |
| datasets: [{ | |
| label: 'Crecimiento anual', | |
| data: [3.2, -0.5, 0.8, 1.2], | |
| backgroundColor: [ | |
| 'rgba(123, 93, 229, 0.7)', | |
| 'rgba(123, 93, 229, 0.7)', | |
| 'rgba(123, 93, 229, 0.7)', | |
| 'rgba(123, 93, 229, 0.7)' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| min: -1, | |
| max: 4, | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Gráfico de Pobreza | |
| const povertyCtx = document.getElementById('povertyChart').getContext('2d'); | |
| const povertyChart = new Chart(povertyCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['2018', '2020', '2022'], | |
| datasets: [ | |
| { | |
| label: 'Pobreza', | |
| data: [41.9, 43.9, 36.3], | |
| borderColor: '#00a3ff', | |
| backgroundColor: 'rgba(0, 163, 255, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'Pobreza extrema', | |
| data: [7.4, 8.5, 8.1], | |
| borderColor: '#ff6600', | |
| backgroundColor: 'rgba(255, 102, 0, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Gráfico de Educación | |
| const educationCtx = document.getElementById('educationChart').getContext('2d'); | |
| const educationChart = new Chart(educationCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Analfabetismo', 'Primaria', 'Secundaria', 'Media superior', 'Superior'], | |
| datasets: [ | |
| { | |
| label: '2000', | |
| data: [9.5, 33.5, 23.4, 15.6, 12.3], | |
| backgroundColor: 'rgba(123, 93, 229, 0.2)', | |
| borderColor: '#7b5de5', | |
| borderWidth: 1, | |
| pointRadius: 0 | |
| }, | |
| { | |
| label: '2020', | |
| data: [4.4, 22.1, 19.5, 22.8, 21.2], | |
| backgroundColor: 'rgba(0, 183, 79, 0.2)', | |
| borderColor: '#00b74f', | |
| borderWidth: 1, | |
| pointRadius: 0 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| r: { | |
| angleLines: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| suggestedMin: 0, | |
| suggestedMax: 40, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| </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/datanalytics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |