datanalytics / index.html
doctopanda's picture
Add 3 files
0dd0475 verified
Raw History Blame Contribute Delete
39.8 kB
<!DOCTYPE html>
<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>