19
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

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

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

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

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

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

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

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

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

◉ 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

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

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

◉ 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

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

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

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

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

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

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

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

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

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

¡GRACIAS!¿Preguntas?

Mauro Attardi