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

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] :

• https://github.com/al118345/Georeferencia_EsperanzadeVida_Python/blob/master/Main.py : Proyecto en Python [5] expuesto en la sección [2.2]
• https://github.com/al118345/Visualizacion_Peaceagreements_Angular/: Proyecto en Angular [4] analizado en la sección [2.3]

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:

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.

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.

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.

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á.

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:

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.

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