Visualización por la paz. Cómo se hizo. Segunda parte

Este articulo es una continuación del proyecto Visualización por la paz. Cómo se hizo. Primera parte . La visualización resultante se puede encontrar en Visualización por la paz. Como los procesos de paz afectar a la esperanza de vida de sus habitantes

1. Diseño.

En este bloque se analizará el diseño de la visualización a través de un Mockup. La herramienta escogida para llevar a cabo esta tarea ha sido Balsamiq [11] , una herramienta que permite diseñar de forma rápida y sencilla maquetas de interfaz para webs y aplicaciones móviles. Mediante esta aplicación el diseñador puede organizar widgets preconstruidos utilizando un editor WYSIWYG de arrastrar y soltar. La aplicación se ofrece en una versión de escritorio, así como en un complemento para Google Drive, Confluence y JIRA.

La elección de la herramienta viene escogida por el formato de la visualización. El tipo de dato mostrado y su volumen exige que sea una representación digital. La representación web permite al usuario escoger que parte de los datos desea visualizar y, por lo tanto, permite interpretar correctamente la información.

El resultado obtenido de este proceso ha sido la siguiente figura:

1 Mockup visualización

En ella se puede comprobar como la visualización se divide en dos bloques. Como ya hemos comentado, en el primer bloque nos encontraremos las gráficas lineales que representarán la esperanza de vida de los países con tratados de paz alcanzados.

El usuario podrá seleccionar en la gráfica la información que desee, es decir, podrá modificar los años mostrados y la cantidad de países visualizados. Para ello dispondrá de un selector que le permitirá escoger el continente de los países mostrados y un textbox que le permitirá buscar un país determinado.

También se mostrarán con un punto de color negro el momento en que se alcanzo un tratado de paz en un país determinado. El usuario podrá hacer clic en este punto y en la parte derecha aparecerán los tratados firmados del punto seleccionado. Únicamente se podrá mostrar la información asociada al punto seleccionado.

Cada país se representará de un color diferente, para poder distinguirlos y diferenciarlos del resto. La tonalidad será escogida al azar.

El resultado del primer bloque será el siguiente:

2 Mockup Bloque1

En la parte inferior se representarán dos visualizaciones. En la parte izquierda se visualizará un gráfico apilado que representará la cantidad de tratados alcanzada distribuido por continentes. Cada barra tendrá un color diferente y se organizarán de mayor a menor medida dependiendo de cantidad de tratados firmados.

En la parte derecha de la visualización se dispondrá un mapa de calor del planeta en referencias a la esperanza de vida. En está gráfica se representará con tonalidades más cercanas al azul una esperanza de vida más alta y con una tonalidad más cercanas al negro las esperanzas de vida más cortas.

El resultado del segundo bloque será el siguiente:

3 Mockup Bloque2

Para terminar, la tipografía escogida para la visualización será Ubuntu de la familia tipográfica OpenType. La tipografía cumple completamente con Unicode y contiene los conjuntos de caracteres latinos extendidos A y B, politónico griego, y cirílico extendido. Además, fue la primera tipografía incluida de manera predeterminada en un sistema operativo en incluir el símbolo de rupia india (₹). La tipografía ha sido diseñada principalmente para ser usada en pantallas, y su espaciado se ha optimizado para tamaños de texto de cuerpo.

Por último, para llevar a cabo esta visualización he utilizado R (R Core Team, 2018) y Rmarkdown (Xie, 2019; Xie, 2015; Xie, 2014; Allaire, Xie, McPherson, Luraschi, Ushey, Atkins, Wickham, Cheng, Chang, and Iannone, 2019; Xie, Allaire, and Grolemund, 2018) para la generación de los gráficos, Latex para la elaboración del documento.

2. Implementación

En esta sección se explicará la implementación escogida para la visualización. Todas las tecnologías utilizadas en el proyecto poseen una licencia de software libre, es decir, todos los programas utilizados pueden ser estudiados, modificados y utilizados libremente con cualquier fin al igual que ser redistribuidos con cambios y/o mejoras o sin ellas.

Esta decisión, más arriesgada que otras opciones como Power BI de Microsoft o Tableau, esta motivada tanto por una razón económica como técnica, ya que las herramientas anteriormente citadas es necesario comprar o poseer una licencia para su utilización. Aparte de la necesidad económica, en estas herramientas no posees tantas libertades de edición, publicación o configuración como con las herramientas de software libre y únicamente puedes crear visualizaciones según los parámetros establecidos por el programa.

El código utilizado se puede consultar en las URL mostradas a continuación a través de la plataforma GitHub [6] : Esta subdivisión esta motivada por la estructura de la visualización, ya que su organización esta conformada por dos gráficas principales muy diferenciadas, una destinada a la georreferenciación de la información y otro a generar un entorno web consultable por los usuarios.

2.1 Extracción de la información.

Como ha sido analizado en la sección [2] , existen una serie de tareas previas a realizar con los datos. Estás tareas se realizarán con R [2]

Una vez terminados todos los pasos expuestos en el documento, existe en R una función llamada write_json(data,file) del paquete jsonlite. Esta función nos permite transformar el resultado obtenido en un fichero Json para ser exportado a una base de datos NoSQL, como por ejemplo Firebase Firebase. Esta plataforma sirve para el desarrollo de aplicaciones web y aplicaciones móviles y fue adquirida por Google el año 2014

Al utilizar el sistema de almacenamiento de Firebase se obtienen las siguientes ventajas en la visualización:
  • Sincronizar fácilmente los datos de sus proyectos sin tener que administrar conexiones o escribir lógica de sincronización compleja.
  • Usa un conjunto de herramientas multiplataforma: se integra fácilmente para plataformas web como en aplicaciones móviles. Es compatible con grandes plataformas, como IOS, Android, aplicaciones web, Unity y C++.
  • Usa la infraestructura de Google y escala automáticamente para cualquier tipo de aplicación, desde las más pequeñas hasta las más potentes.
  • Crea proyectos sin necesidad de un servidor: Las herramientas se incluyen en los SDK para los dispositivos móviles y web, por lo que no es necesario la creación de un servidor para el proyecto.
Con la elección realizada hemos conseguido crear un backend para nuestra visualización, donde conseguiremos almacenar gratuitamente la información extraída en R. El único pero es la limitación de tráfico mensual, ya que únicamente están permitido 10 gigas de tráfico.

Es decir, como se puede comprobar en el fichero firebase.json ( contiene el objeto Json migrado a Firebase), este documento almacena datos por valor de 10 megas. Si cada visualización se descarga el objeto completo, únicamente se podrá consultar la aplicación web un máximo de 10000 usuarios de forma gratuita (más que suficiente para nuestro proyecto). A partir de esa cantidad es necesario pagar por el tráfico realizado de más.

2.2 Python

El objetivo de esta subsección es representar la esperanza de vida en el mundo, donde se puede comprobar que, los países con menos o ningún tratado tienen una esperanza de vida más larga que los que no. Para ello se deberá utilizar un mapa de calor sobre el mundo donde las tonalidades más cercanas al azul tienen una esperanza de vida más alta que las tonalidades más cercanas al blanco.

Con este propósito se ha implementado en Python el código compartido en el enlace https://github.com/al118345/Georeferencia_EsperanzadeVida_Python/blob/master/Main.py. En él se puede comprobar como a través de un mapa vectorial del planeta obtenido de la web [Natural Earth] [3] se puede conseguir un mapa de calor de los datos descargados de la fuente [Esperanza de vida al nacer, total (años)] [8] .

La elección de este sistema no ha sido una cuestión de azar, sino a través de un proceso de estudio y consulta de la documentación existente se ha llegado a la conclusión de que Python es la mejor herramienta para la visualización de Mapas georreferenciados [9] . Además, aparte del mapa de calor, la visualización permite recorrer al usuario el planeta e ir seleccionando la información que desea conocer. Es decir, al hacer click en un país se muestra su esperanza de vida de sus ciudadanos.

Un detalle importante es que el resultado de la ejecución de este programa será mostrado en la visualización principal a través de una iframe, de esta forma podremos vincular la sección [2.3] con la sección [2.2] sin problemas.

El resultado de la visualización es el siguiente:

4 Visualización Mundo

2.3 Web

Este sección tendrá como finalidad crear un entorno web para la visualización final. Esta solución será consultable por cualquier usuario sin una identificación previa y se podrá acceder a través de una dirección web.

La herramienta escogida ha sido Angular 8, un framework para aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.

Tiene como principal característica que permite extender el vocabulario HTML de nuestra aplicación mediante directivas, para lograr de esta forma convertirse en un framework muy expresivo, legible y rápido de desarrollar.

Como casi todas sus alternativas soluciona con su base la gestión de vistas, controladores, modelos, enrutamiento, eventos, acceso y manipulación del DOM, validación avanzada de formularios, doble data-binding, inyección de dependencias, comunicación con servidor, etc.

Esta herramienta la utilizaremos para el desarrollo del bloque principal, es decir, implementaremos el conjunto de gráficas lineales que representarán la evolución de la esperanza de vida de los países dónde se ha firmado algún tratado.

Para la maquetación y distribución de la información utilizaremos Bootstrap [15] , es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales.

En una primera sección, se realizará una explicación sobre el objetivo y la finalidad de la visualización. De esta forma se contextualizará la web y se expondrá su finalidad al usuario.

5 Explicación sobre el objetivo y la finalidad de la visualización

Posteriormente, y con una tonalidad de fondo diferenciado, se mostrará una pequeña explicación sobre el gráfico generado en esta primera sección.

6 Explicación sobre el objetivo y la finalidad de la visualización

Como podemos observar en la gráfica, los tratados de paz los he representado como triángulos (más expresivo que los puntos negros diseñados previamente). La esperanza de vida esta en el eje de las Y y los años en el eje de las X. Los gráficos de líneas se utilizan para mostrar valores cuantitativos en un lapso de tiempo o intervalo continuo. Los gráficos de línea también ayudan a dar una “visión global” sobre un intervalo, para ver cómo se ha desarrollado a lo largo de ese período.

7 Gráfico lineal sobre la evolución de la esperanza de vida en los países con tratados de paz alcanzado.

Como se ha comentado, el problema es la cantidad de datos que vamos a gestionar. Por ese motivo presionando sobre la leyenda se podrá seleccionar los países a mostrar o ocultar. Toda esta sección se ha utilizado ng2-charts, una libreria de Javascript para la generación de gráficas.

Otra mejora introducida son los dos botones superiores, que permiten seleccionar o ocultar todos los datos. De esta forma el usuario le es más fácil observar la visualización.

Si presiona el icono triangulo de la visualización, aparecerá en la parte de abajo información sobre el tratado alcanzado en el país ese año. Si presiona otro punto la información se actualizará o desaparecerá.

8 Información sobre un tratado mostrado al interactuar con el gráfico.

Otro objetivo secundario establecido en la fase de diseño fue dotar al usuario de un gráfico para analizar la esperanza de vida mundial y su evolución en el tiempo. Conseguimos generar las diferentes vistas con la implementación expuesta en la sección [ref] y, en este punto, hemos añadido esas gráficas con un iframe a la visualización principal.

El resultado obtenido se muestra en la siguiente gráfica:

9 Bloque secundario de la visualización

Como se puede observar en la parte superior de la imagen se ha creado una slider que permite modificar la información mostrada. De esta forma hemos dotado al usuario de la capacidad de escoger el año a mostrar en el mapa.

El siguiente punto a analizar es la gráfica situada en la parte izquierda. En esta localización se ha alojado una gráfica de burbujas, que permite al usuario conocer cuales son las zonas con más tratados en el mundo y en que zonas del planeta están distribuidos. Para ello se muestran en orden descendente la cantidad de tratados alcanzado en cada continente y los 3 países con más tratados firmados.

10 Gráfico de burbuja

Por último, en el footer se muestra información de las fuentes utilizadas.

11 Footer

3. Limitaciones

El proyecto tiene una limitación muy clara, no se puede visualizar en dispositivos móviles. Está carencia es debido al iframe y la utilización de dos lenguajes diferentes en un mismo proyecto.

Por falta de tiempo o conocimientos no he podido encontrar un sustituto de la sección [2.2] implementado en javascript con la capacidad de ser responsive para dispositivos móviles con licencia gratuita.

Otro punto importante para comentar es el tiempo de carga, he añadido una imagen de loading para que el usuario no tenga la sensación de abandono en el proceso de carga.

Por todo lo demás no he tenido muchos problemas, la asignatura me ha proporcionado conocimientos necesarios para entender mejor las visualizaciones y poder implementar correctamente la visualización.

Recuerdo que la url de consulta es Visualización por la paz. Como los procesos de paz afectar a la esperanza de vida de sus habitantes. Esta url pertenece a un servidor VPS personal en Scaleway que utilizo para este tipo de prueba.

Por si existe cualquier problema, he añadido un vídeo explicativo de la visualización que se puede encontrar en el siguiente enlace: https://youtu.be/z980iQ_EXHw

La visualización resultante se puede encontrar en Visualización por la paz. Como los procesos de paz afectar a la esperanza de vida de sus habitantes

Bibliografía