Grafik - Herramienta para la generación automática de visualizaciones de datos

(1)

Grafik - Herramienta para la generación automática de visualizaciones de datos

Septiembre 2020

─

Luis Márquez Ana Lavalle Alejandro Maté Juan Carlos Trujillo

(2)

Índice

1. Descripción del producto 2

2. Funcionalidades 3

3. Código fuente 5

4. Instalación paso por paso (Windows) 6

5. Demo 8

(3)

1.Descripción del producto

El objetivo de esta herramienta es que cualquier usuario sin conocimientos en el uso de Business Intelligence^{, o} Big Data, pueda crear y modificar dashboards profesionales que aporten valor a sus organizaciones, pudiéndose beneficiar de las oportunidades que ofrece el Bussines Intelligence^{, antes de} invertir grandes cantidades de dinero.

Las ventajas aportadas por esta herramienta son las siguientes, por un lado, (i) proporciona una secuencia de pasos y pautas para ayudar a los usuarios a definir sus objetivos y alcanzarlos utilizando las fuentes de datos disponibles; (ii) traduce los objetivos del usuario en un contexto de visualización; (iii) recomienda automáticamente el tipo de visualización más adecuado para cada contexto; (iv) genera automáticamente las visualizaciones y las une proporcionando una justificación para el diseño de dashboards.

Se le ofrece a los usuarios un entorno fácil de usar que permite delegar en el software determinadas decisiones, que de forma habitual realizan los analistas de datos. Permitiendo así, que pequeñas empresas sean capaces de emplear técnicas analíticas para sus empresas sin altos costes monetarios.

Nuestro proyecto permite, descubrir, las bondades del análisis de datos antes de realizar un desembolso importante externalizando el servicio, adquiriendo software nuevo, o contratando más personal.

Con el objetivo de conseguir que nuestra aplicación web de analítica de datos resulte extremadamente simple de usar, además de crear un entorno con características o propiedades muy similares a las que marca los estándares no escritos que existen en los programas de escritorio convencionales (clic derecho, minimizar o maximizar la ventana, o las opciones de la aplicación en una lista horizontal colocada en el menú superior).

Se ha decidido maximizar el número de posibles usuarios, por eso, además de ofrecer una plataforma en la que realizar análisis de datos de la forma más sencilla posible, también desarrollamos unas librerías empleadas para nuestra plataforma de análisis de datos, que cualquier usuario con independencia del propósito de su página web, puede incorporar a su plataforma web.

Adicionalmente, desde nuestra plataforma de análisis, al usuario le generará el gráfico con mayor idoneidad al conjunto de datos aportado. Obteniendo, de esta forma, una puntuación de los tipos de gráficos que resulte más adecuados en función de los datos a representar, si nuestro algoritmo genera poca diferencia de puntos entre varios tipos de gráficos, le ofreceremos al usuario poder escoger entre estos gráficos cuál prefiere, haciendo uso incluso de internet para ofrecer un desquite.

(4)

2.Funcionalidades

La primera vez que se accede a la herramienta se muestra un tutorial donde se visualizarán 4 vídeos con las funciones más relevantes de la aplicación. En cualquier momento se puede volver a visualizar el tutorial desde “Configuration>Show tutorial”.

Menú “File”, se engloban las siguientes funcionalidades:

1. Nueva Hoja, crea otra hoja en el Dashboard principal (segunda barra superior).

2. Añadir Objeto, contiene un submenú para seleccionar el tipo de objeto a incorporar en la hoja seleccionada, este objeto puede ser de tipo texto o de tipo gráfico.

3. Exportar Dashboard, exportamos nuestro contenido en un formato propio.

4. Importar Dashboard, importamos un cuadro de mando, desde un fichero con extensión propia previamente exportado.

5. Nuevo Dashboard, desde esta opción creamos un nuevo cuadro de mandos.

6. Eliminar Dashboard, elimina el cuadro de mandos.

7. Descargar Dashboard, descarga en formato PNG

8. Compartir, obtenemos una URL por la que podemos compartir nuestro cuadro de mandos con otros usuarios para que puedan ver y editar el Dashboard.

9. Deshacer / Rehacer, deshace/rehace el último movimiento realizado por el usuario, a estas características podemos acceder usando la combinación de teclas Ctr+Z o Ctrl+Shift+Z.

Menú “Script” encontramos las siguientes características:

1. Editar Script, editamos los datos de nuestro modelo, si no queremos subir los datos tal cual y deseamos realizar una pequeña transformación.

2. Recargar, recargamos los datos con la información que se dispone en el servidor, por si se produce algún bug o desconexión con el servidor, proporciona al usuario la certeza de que los datos son actualizados con la información del servidor.

Además, el script se volverá a ejecutar proporcionando una conexión en el servidor que nos proporciona los datos, pudiendo no ser beneficioso en todo momento.

Desde “View”, disponemos de un submenú, denominado “Aplicar a todos los gráficos”, las opciones del submenú son:

(5)

1. Apilar. Moveremos todas las ventanas en bloque a la izquierda o arriba.

2. Alinear. Alinearemos las ventanas en función del eje seleccionado, para que se muestren de forma consecutiva y no se solapen en el eje Y o X.

Y por último del menú de “Configuration”. Donde abrimos los modales de configuración de los siguientes objetos:

1. Configuración del gráfico, hoja o dashboard, se despliega un modal con las opciones de cada uno de estos elementos.

Otra propiedad muy importante es el sistema de ventanas y viene implementada por la LFE. Que dispone de las siguientes características.

1. Una barra superior, donde se muestra el título y que al arrastrar desde ese punto movemos la posición de la ventana a lo largo de toda nuestra aplicación.

Dispondremos en dicha barra superior de tres botones, los cuales ejecutan las acciones de eliminar, cerrar, configurar la ventana.

2. También, dispondremos del icono inferior derecho que modifica las dimensiones de la ventana.

3. Un menú contextual, que se activa realizando clic derecho sobre nuestro objeto y podemos ver las siguientes opciones sobre nuestra ventana, minimizar, cerrar, abrir la configuración de dicha ventana, bajar o subir una posición, o enviar al frente y enviar al fondo.

También ofrecemos un cuadro de programación bastante sencillo, en el que poder indicar qué ficheros queremos importar a nuestra aplicación web, bien es cierto que dicha importación sólo será efectiva al momento de clicar en la opción de refrescar el script .

(6)

3.Código fuente

- Carpeta controller: Contiene los ficheros javascript.

- Carpeta template: Contiene el contenido html.

- Carpeta modals: Contiene los ficheros que se insertan en la nuestra página en forma de ventana emergente.

- Carpeta model: Contiene los ficheros PHP.

- Carpeta calcPuntuacion: Acceso a las APIs.

- database.php funciones globales a todos los ficheros.

- database_template.php fichero que se duplica con los datos de acceso a la bbdd indicados en la instalación.

- Carpeta datacontiene una copia de todos los ficheros JSON dados por el usuario.

(7)

4.Instalación paso por paso (Windows)

1) Descargar Xampp https://www.apachefriends.org/es/index.html 2) Instalar Xampp

3) Descomprimir el archivo “app.zip” y copiar la carpeta “app” en “C:\xampp\htdocs”

4) Iniciamos Xampp

5) Iniciamos los servicios de Apache y MySQL

6) Abrimos Google Chrome (recomendable utilizar el modo incógnito para evitar problemas con la caché) y ponemos en la barra http://localhost/app/install.php

7) Introducimos los datos de la base de datos que se va a generar (si se utiliza MySQL de Xampp dejar la contraseña de la base de datos vacía)

Figura 1. Configuración conexión base de datos

Si se ha creado con éxito aparecerá este mensaje

Figura 2. Conexión con éxito a la base de datos

(8)

8) Accedemos a http://localhost/app 9) Creamos un usuario

Figura 3. Creación de nuevo usuario

Seleccionamos “Create account”

10) Nos registramos con nuestros datos

Figura 4. Datos del nuevo usuario

(9)

11) Iniciamos sesión con el usuario que acabamos de crear y ya podemos empezar a trabajar con la aplicación

Podemos comenzar viendo el tutorial para conocer su funcionamiento.

Figura 5. Tutorial funcionamiento aplicación

5.Demo

Una vez estamos dentro de la aplicación vamos a llevar a cabo la siguiente demo para probar la herramienta.

1) Crea un nuevo dashboard

Figura 6. Creación nuevo Dashboard

(10)

2) Conecta una fuente de datos

Figura 7. Conexión a fuente de datos

3) Seleccionar “Connect JSON” y copiar el siguiente texto:

➔ [connectJSON('file:///C:/xampp/htdocs/app/prueba.json')]

Figura 8. Configuración de la conexión a la fuente de datos

4) Clica sobre para refrescar la página

Figura 9. Recarga la página

5) Crea una nueva visualización

Figura 10. Creación de una nueva visualización

(11)

6) Le damos un título a la visualización

Figura 11. Selección título para la nueva visualización

7) Seleccionamos el conjunto de datos de donde vamos a extraer los datos a visualizar

Figura 12. Selección fuente de datos para la nueva visualización

(12)

8) Seleccionamos:

● Interacción: General vision

● Objetivo Usuario: Comparación

○ Do you want to see the data represented in space/time? → No

○ Do you want an ordered list? → No

○ Do you want to compare values? → Yes

○ Seleccionar “Comparison”

○ Do you have another viewing goal? → No

● V. non depend. selected: countryID (arrastrar desde la columna de la izquierda)

● V. depend. selected: dato (arrastrar desde la columna de la izquierda)

Figura 13. Selección características de la nueva visualización

9) Seleccionamos la función “Sum” para aplicar

Figura 14. Selección función a aplicar en la nueva visualización

(13)

10)Seleccionamos las opciones de estilo a gusto

Figura 15. Selección estilo de la nueva visualización

11)Seleccionamos el tipo de visualización a generar (las que aparecen más grandes son las más recomendadas)

Figura 16. Selección tipo de visualización

12)Se genera automáticamente el tipo de visualización seleccionado representando los datos y las características seleccionadas en el proceso. La visualización se genera contraída, hay que seleccionar la esquina inferior derecha y arrastrarla hasta adaptar la visualización al tamaño deseado.

Figura 17. Ampliación de la visualización generada

(14)

13)Finalmente podremos consultar la visualización generada

Figura 18. Visualización 1 generada

14)Realizamos el mismo proceso con las siguientes configuraciones:

VISUALIZACIÓN 2

● Interacción: Interaction

● Objetivo Usuario: Tendencia

○ Do you want to see the data represented in space/time? → Yes

○ Seleccionar “Trend”

● V. non depend. selected: name (arrastrar desde la columna de la izquierda)

● V. depend. selected: dato (arrastrar desde la columna de la izquierda)

(15)

Figura 19. Configuración de la Visualización 2

Figura 20. Selección tipo de visualización 2

Figura 21. Dashboard con Visualización 1 y 2

(16)

● Interacción: General vision

● Objetivo Usuario: Cluster

○ Seleccionar “Cluster”

● V. depend. selected: dato2 (arrastrar desde la columna de la izquierda)

(17)

Figura 24. Dashboard con Visualización 1, 2 y 3

● Interacción: Details on request

● Objetivo Usuario: Geoespacial

○ Seleccionar “Geoespatial”

● V. depend. selected: dato2 (arrastrar desde la columna de la izquierda)

(18)

Figura 27. Dashboard con Visualización 1, 2, 3 y 4

6.Referencias

● Lavalle, A., Maté, A., Trujillo, J., & Rizzi, S. (2019, September). Visualization Requirements for Business Intelligence Analytics: A Goal-Based, Iterative Framework. In 2019 IEEE 27th

International Requirements Engineering Conference (RE) (pp. 109-119). IEEE.

● Lavalle, A., Maté, A., & Trujillo, J. (2019, November). Requirements-Driven Visualizations for Big Data Analytics: A Model-Driven Approach. In International Conference on Conceptual Modeling (pp. 78-92). Springer, Cham.

● ECLIPSE - ENHANCING DATA QUALITY AND SECURITY FOR IMPROVING BUSINESS PROCESSES AND STRATEGIC DECISIONS IN CYBER PHYSICAL SYSTEMS

(RTI2018-094283-B-C32)