análisis del diseño de visualización interactiva de...
TRANSCRIPT
![Page 1: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/1.jpg)
Análisis del diseño de visualización interactiva
de información
Autor: Mauro Attardi
Tutor: José Antonio Ontalba Ruipérez
Cotutor: Jorge Ignacio Serrano Cobos
Septiembre de 2016
Trabajo Fin de Máster
![Page 2: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/2.jpg)
Tabla de contenidos
◉ Objetivos
◉ Metodología
◉ Resultados
◉ Conclusiones
![Page 3: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/3.jpg)
Objetivo del trabajo
◉ Aprender a elegir la correcta visualización de información para cada tipo de problema.
◉ Identificar la tipología de visualización de datos más adecuada al análisis de redes sociales multinivel.
![Page 4: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/4.jpg)
Politica y economia
You can also split your content
Deporte
El fenómeno del Big DataOportunidades
Finanzas Urban Planning
![Page 5: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/5.jpg)
In two or three columns
VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN DINÁMICA
La visualización de información
La Visualización de información es la representación y presentación de datos queexplota nuestra capacidad de percepción visual con el fin de ampliar elconocimiento
![Page 6: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/6.jpg)
◉ Los elementos de los grafos son los nodos, que representan los actores, y las artistas, que representan las relaciones entre ellos. Para determinar si un actor pertenece a la red, se utiliza el límite.
◉ En las redes sociales multinivel, existe una relación padre-hijo entre los actores.
You can also split your contentLas redes sociales multinivel
![Page 7: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/7.jpg)
Una vez que tenemos a disposición un grafo (con sus actores y relaciones) podemos explotar la información contenida en el mismo con el fin de sacar conclusiones.
You can also split your contentEl análisis de redes sociales
Pajek iGraph
![Page 8: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/8.jpg)
Se han desarrollado tres ejemplos de gráficos utilizando la librería D3plus, una extensión de la conocida librería D3.js.
You can also split your contentDe la teoría a la practica
![Page 9: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/9.jpg)
◉ El Tree map (o gráfico de bloques) es una representación cuantitativas de datos jerárquicos en un espacio.
◉ Los datos se representan a través de rectángulos de diferentes tamaños y colores.
You can also split your contentEjemplo I. Tree mapEl gráfico
![Page 10: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/10.jpg)
You can also split your contentEjemplo I. Tree mapFormato de datos
GráficoArray asociativo
Javascript “clave-valor”
MAPPINGFichero CSV
![Page 11: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/11.jpg)
You can also split your contentEjemplo I. Tree mapResultado
![Page 12: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/12.jpg)
You can also split your contentEjemplo I. Tree mapResultado
![Page 13: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/13.jpg)
You can also split your contentEjemplo II y III. Red Social MultinivelEl gráfico
En este ejemplo y el siguiente se ha utilizado el gráfico “Network” de la librería D3plus.
Mat.Ub.Edu
Ub.Edu
◉ Nivel 1: Enlaces entre las webs de las universidades españolas
◉ Nivel 2: Enlaces entre las webs de sus departamentos de matemáticas
![Page 14: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/14.jpg)
El tamaño de los nodos se hacalculado con el comando“site:” de Google
You can also split your content
Los enlaces se han calculado utilizando laherramienta MajesticSEO para calcular los backlinksde cada página
Ejemplo II y III. Red Social MultinivelLos datos
![Page 15: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/15.jpg)
You can also split your contentEjemplo II y III. Red Social MultinivelLos datos
GráficoArray asociativo
Javascript “clave-valor”
MAPPINGFichero CSV
![Page 16: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/16.jpg)
You can also split your contentEjemplo II y III. Red Social MultinivelResultado
![Page 17: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/17.jpg)
You can also split your contentEjemplo II y III. Red Social MultinivelResultado
![Page 18: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/18.jpg)
You can also split your contentConclusiones
Se ha identificado un tipo de visualización para una red social multinivel
Futuro
o Evolución y tipología de la visualización de la información
o Se ha analizado y aprendido a utilizar una librería gráfica
o Se ha desarrollado un ejemplo real
o Seguir analizando e investigando la visualización de redes sociales multinivel
o Aprender a utilizar otras librerías
o Estudio de usabilidad
![Page 19: Análisis del diseño de visualización interactiva de informaciónmugi.webs.upv.es/wp-content/uploads/2016/11/Presentacion_Mauro… · VISUALIZACIÓN ESTÁTICA INFOGRAFÍA VISUALIZACIÓN](https://reader033.vdocuments.pub/reader033/viewer/2022060208/5f03ffe27e708231d40bd1c2/html5/thumbnails/19.jpg)
¡GRACIAS!¿Preguntas?
Mauro Attardi