enflujo / imagina-ninezya

🪺 Tablero de control SIYA, indicadores de salud, educación y bienestar para niñas, niños y adolescentes en Colombia.

Aplicaciones para tablero de Niñez YA

El SIYA (Sistema de Indicadores de los YA) tiene como objetivo central entregar indicadores relevantes, actualizados y de alta calidad a quienes tienen el poder y la responsabilidad de lograr el desarrollo pleno de niñas, niños y adolescentes: sociedad civil, funcionarios públicos, candidatos, mandatarios, legisladores, entre otros.

Aplicaciones

Este repositorio contiene dos aplicaciones que componen el proyecto:

• Procesador: Transforma y procesa las fuentes de datos .xlsx y exporta archivos .json para ser utilizados en el tablero.
• www: El sitio del tablero.

Apropiación o desarrollo

Instalación

En su computador debe tener instalado:

• NodeJS
• Yarn

Primero instalar las dependencias con:

yarn

Iniciar tablero en servidor local

yarn dev

imagina-ninezya's Issues

🧏🏼 Estilo menú superior

Estilo de hover, color, letra del menú superior.

🗺️ Agregar nivel 'región' y pintar mapa correspondiente.

Agregar a menú de niveles la opción 'región' y pintar mapa correspondiente.

 Región Insular: San Andrés y Providencia.
 Región Caribe: Atlántico, Bolívar, Cesar, Córdoba, La Guajira. Magdalena, Sucre.
 Región Central: Boyacá, Cundinamarca, Huila, Norte de Santander, Tolima, Santander.
 Región Eje Cafetero y Antioquia: Antioquia, Caldas, Quindío, Risaralda.
 Región Pacífica: Cauca, Chocó, Nariño, Valle del Cauca.
 Región Llanos y Orinoquía: Arauca, Casanare, Meta, Vichada.
 Región Amazonía: Amazonas, Caquetá, Guainía, Guaviare, Putumayo, Vaupés.
 Bogotá D.C.

🖌️ Agregar borde a municipios y departamentos

Agregar borde a municipios y departamentos para que no se confundan.

Colores para indicadores que no deben tener umbral

El caso de los que son conteo (los YA 10), debería empezar desde rojo cuando está por encima de 0.
Idea: empezar desde un rojo medio para 0 y de ahí para arriba los rojos más intensos.

🐛 🗺️ Arreglar escala del mapa

🐛 Cada vez que cambiamos de nivel en el mapa se está cambiando la proporción. ¡Arreglar!

👋🏼 Diseño imagen bienvenida al mapa

Pantalla dividida en tres.
En la derecha hay un mapa en SVG. Aquí está: https://uniandes-my.sharepoint.com/:u:/g/personal/j_gonzalezj_uniandes_edu_co/EQvKcv1cHEVEgSwhaHfQ6B8BiVRMpgjKyJ-C2av2W50V4g?e=8F0gKI

Color: --moradoProfundo de fondo.

Un botón abajo para entrar.
Esta misma página podría ser la de 'Sobre el tablero' #58

Títulos:
Monospace 0
Casual 0
Grosor 1000
Inclinación 0
Cursiva 0

Texto:
Monospace 1
Casual 0
Grosor 433
Inclinación 0
Cursiva 0

Botón:
Monospace 0
Casual 0
Grosor 700
Inclinación 0
Cursiva 0

📌 No se puede escoger por municipio

🍁 Hacer rutas (urls) para estados del tablero

Hacer rutas (urls) con parámetros para poder compartir estados del tablero.

🐛 Cambiar eje Y de línea de tiempo según el tipo de datos (%, tasa, etc.)

Cambiar la escala y el nombre del eje Y de línea de tiempo según el tipo de datos (%, tasa, etc.)

Ficha técnica indicadores sugeridos 🖼️

Discussed in #38

^{Originally posted by Juliansintilde October 23, 2023}
Letra
Nombre grupo:
font-variation-settings:
'MONO' 0,
'CASL' 0,
'wght' 700,
'slnt' 0,
'CRSV' 0;

Parámetros (Definición, metodología, ...)
Lo mismo de antes pero en UPPERCASE.

Texto de corrido en ficha
font-variation-settings:
'MONO' 0,
'CASL' 0,
'wght' 500,
'slnt' 0,
'CRSV' 0;

Textos en cuadros de la derecha
font-variation-settings:
'MONO' 1,
'CASL' 0,
'wght' 700,
'slnt' 0,
'CRSV' 0;

---

Color:
--azulViejo
--blancoMarfil

--uvaProfunda
--verdeLimon
nuevo color : #faf2fc --rosaBebe

---

Crear componente cajón municipio

Crear un componente cajón para pintar el detalle del municipio o el departamento.

🔗 En ficha técnica convertir los enlaces en enlaces

En ficha técnica convertir los enlaces en enlaces, ahora se ven como texto simple.

✍🏼 Programación de textos de información en el modo comparativo

Los textos que aparecen en el bloque inferior derecho y calculen:

• La diferencia entre el nacional y el departamento escogido
• La diferencia entre los varios departamentos escogidos.
• Campo sobre si es ascendente o descendente la tendencia.

🎨 Agregar leyendas de color de línea a Línea de tiempo

Agregar leyendas y cambiar colores de líneas a Línea de tiempo para saber cuál es cuál.

🤳🏼 versión para celucos

📗 Hacer líneas de referencia en línea de tiempo

Siempre dividido en 5 partes, para poder comparar mejor la ubicación de los puntos.

Valores en YA1_1.8 no siempre son numéricos

@dfmendivelso10 los valores de este excel no son consistentes en la columna bajo_peso. De la fila 2 a 77 son números, de la 79 en adelante son texto (números pero con coma). Se puede arreglar en el excel pero ¿será que toca revisar? ¿alguna razón por la que cambia el formato de repente?

🖋️ Tipografía

🖌️ Marcar borde de lugar(es) elegido(s) en el mapa

Agregar línea de tiempo depto y municipio

@1cgonza Lo intenté pero en los cambios que hiciste no entiendo en qué punto los datos se están formateando con el tipo DatosPorAñoOrdenado. ¿Documentamos? 😞

📤 Cerrar menú de años al hacer clic por fuera del menú

Ahora toca cerrarlo haciendo clic en el botón de despliegue.

🤷‍♂️ Línea de tiempo no empieza con dimensiones que son

Toca escalar la pantalla para que de verdad se ajusten las cosas al espacio, en la primera carga no mide bien el espacio que tiene disponible.

screen-capture.webm

👾 Favicon

🎓 Corregir nombres de estucturas (tipos) de datos

Corregir nombres de estucturas (tipos) de datos para que en la línea de tiempo correspondan.
Lo puedo hacer yo pero no sé dónde se hace :) @1cgonza

🖌️ Colores selección mapa

Colores para la selección de los mapas . lista
color que compartirán los bordes de los departamentos escogidos y las líneas en la línea de tiempo

🚗 Agregar query a la url

Agregar query a la url cada vez que se hace click en un depto o año.

⌚ Agregar datos a línea de tiempo

Agregar datos a línea de tiempo y pintarla.

👀 Vista descripción YA

Arriba está la imagen del YA.
El título de cada uno y un párrafo que lo describe.

Las líneas de tiempo corresponden al nivel nacional. Marcan un umbral con la línea punteada. Si está por encima la última medición, la línea de tiempo está en verde y si está por debajo la línea de tiempo está en rojo.

Títulos:
Monospace 0
Casual 0
Grosor 573
Inclinación 0
Cursiva 1

Texto:
Monospace 0
Casual 0
Grosor 335
Inclinación 0
Cursiva 0

🗺️ Mostrar San Andrés y Providencia

Mostrar San Andrés y Providencia. ¿Modificar el geo json?

Ajustar estructura de datos y representación para indicadores 2.3 y 2.4

Para los datos 2.3 y 2.4 necesitamos otro tipo de representación y otro procesamiento de datos porque son numéricos por categoría:
Niños y niñas menores de 5 años por sitio o persona con quien permanecen la mayor parte del tiempo entre semana y
Niños y niñas menores de 5 años por tipo de establecimiento al que asisten.

📄 Agregar textos y logos a la página de créditos

diseñar y agregar página de créditos.

🗂️ Crear componente ficha técnica

Crear componente para mostrar la ficha técnica de cada indicador.

🐿️ Manifiesto web y SEO

Para SEO necesitamos:

• Imagen 1200x630: General del proyecto.
• Imágenes 1200x630 Para cada página. Hacer una plantilla a la que se le cambia el ícono del YA y nombre del indicador. Darle identidad a cada página para que cuando se comparta tenga información visual del indicador. Igual a la de Datos, Créditos, etc.
• Texto alt que describe cada imagen.
• Descripciones para cada página
• Logos EnFlujo, Imagina y NiñezYA en formato 200x200 sobre fondo blanco (ver referencia de Google para JSON-LD)

Todas las imágenes se deben subir a la carpeta estáticos/imagenes.
Los archivos de astro en /pages deben ir con la información para SEO, por ejemplo:

<Plantilla
  titulo="..."
  descripcion="..."
  conMenu={true}
  imagen={{ruta: 'imagen_algo.webp', alt: 'Texto que describe la imagen'}}
>

🖼️ Revisión estilo tablas y botones

Afinar espacios, estilos de letra y colores

📄 Diseñar y agregar página de datos

Diseñar y agregar página de datos

ℹ️ Agregar texto de bienvenida

Agregar texto de bienvenida cuando esté listo

📄 Diseñar y agregar componente Sobre el tablero

Diseñar y agregar componente Sobre el tablero

🐌 El movimiento del ratón encima del mapa parece lento, revisar evento para optimizar

🐳 Cambiar íconos a los oficiales

Cambiar íconos de los que habíamos hecho a los nuevos

🏯 Permitir que se seleccione más de un departamento

Permitir que se seleccione más de un departamento para compararlos en el módulo derecho.

🐞 Falta info de indicador 4_4

@dfmendivelso10
Falta en el excel de fichas técnicas la info del indicador 4_4. ¿Va o lo quitamos?

🐛 Cuando se cambia de indicador o de nivel con depto seleccionado, se borra el borde

Cuando se cambia el indicador con algún departamento seleccionado, se borra el borde rojo del mapa y se invierte el comportamiento de seleccionar o deseleccionar. Lo mismo pasa cuando se cambia de nivel (depto / municipio).
¡Arreglar!

📈 Datos que faltan

@dfmendivelso10, acá voy a ir registrando los datos que faltan. Si tienen chulo es porque ya los entregaste y funcionan, otros salen como "Listo" en la matriz inicial pero no tenemos el .xlsx en la carpeta. Paso esto acá para tener un seguimiento puntual a esto.

Ya 1

• 1.7 - Desnutrición Aguda y Crónica la fuente actual está incompleta

Ya 2

• 2.1 - Tasa de violencia en menores de 5 años falta excel
• 2.3 - Niños y niñas menores de 5 años por sitio o persona con quien permanecen la mayor parte del tiempo entre semana falta excel
• 2.4 - Niños y niñas menores de 5 años por tipo de establecimiento al que asisten falta excel

Ya 3

• 3.1 - Tasa de Cobertura Bruta Media ¿Estructura matemática porcentaje?.
• 3.2 - Resultados Pruebas Saber 11 matemáticas la variable se llama "lectura" pero 3.2 es la de matemáticas, ¿si son los datos?
• 3.5 - Tasa de Repitencia la variable se llama "cobertura_bruta_primaria" pero esa sería la del 3.6, ¿están cruzados?
• 3.6 - Tasa de Cobertura Bruta Primaria falta excel

Ya 4

• 4.1 - Tasa de mortalidad por Enfermedad Diarreica Aguda (EDA) en menores de 5 años La estructura matemática no me cuadra. Es tasa pero pareciera que la estructura que defines es porcentaje. ¿no sería así? (numerador / denominador) * 100000 (así lo teníamos en materno infantil para este indicador)
• 4.2 -Tasa de mortalidad por Infección Respiratoria Aguda (IRA) en menores de 5 años Igual que el anterior, estructura matemática no coincide
• 4.3 - Porcentaje Real de Acceso a Agua Potable ¿Este no es idéntico al YA 1.1? ambos son la misma fuente con variable "tacued"

Ya 8

• 8.1 - Proporción de jóvenes que declaran haber experimentado violencia física en los últimos 12 meses La matriz dice "falta procesarlos", dinos que significa el valor que actualmente está en la columna "violencia_fisica" para poder hacerlo
• 8.2 - Número de Procesos Administrativos de Reestablecimientos de Derechos por el Consumo de Sustancias Psicoactivas La variable se llama "violencia_fisica" y no "consumo_sustancias" como aparece en la matriz ¿si son estos los datos?

Ya 9

Faltan todos.

Ya 10

• 10.2 - Ataque a escuelas por grupos al margen de la ley falta excel
• 10.4 - Bajo Logro Educativo (Porcentaje de niños que se encuentran cursando en extra edad) falta excel
• 10.5 - Maltrato Físico (# de ataques a menores de edad por parte de un cuidador, familiar o padre) falta excel

🌡️ Definir sentido de los datos (positivo <> negativo)

Los datos tienen un sentido que se debe definir para asignar el color. Por ejemplo, cobertura de alcantarillado es positivo (verde) si es alto, pero en mortalidad es positivo si es bajo. Este sentido lo tenemos que definir de alguna manera para pintar el mapa.

🎨 Colores escala divergente para el mapa

Diseñar e cambiar en el código la escala de color divergente
Como explican acá: https://spectrum.adobe.com/page/color-for-data-visualization/

❓ Decidir si se pueden comparar municipios o no

Decidir si se pueden comparar municipios y si sí, si se pueden comparar con departamentos o cuál es el límite.

✅ Corregir lista de indicadores

Corregir lista de indicadores para el menú.

💄 Ajustar parámetros de tipografía

En Plantilla ajustar parámetros de tipografía.

🔍 Crear buscador

Crear componente buscador.

✍🏼 Caja para texto descriptivo del indicador

Una caja de texto junto al nombre del indicador.

Texto:
Monospace 0
Casual 0
Grosor 433
Inclinación 0
Cursiva 0