Lic. Ernesto Mislej, Director de 7PLabs. GarageLab. Fundación Telefónica. Arte y Tecnología. Jornadas de Analísis en Redes Sociales complejas. Minería de Grafos, Visualización, Análisis Predictivo. Exposición sobre Visualización de Redes Sociales. Técnicas y Ejemplos.

1. Visualización de !
Información § !
Redes Sociales!
7puentes.com!
Fundación Telefónica - GarageLab!
Lic. Ernesto Mislej!
ernesto@7puentes.com!
Noviembre 2010!

2. ¿Qué es la Visualización de
Información?!
“...los sistemas informáticos de Visualización de
Información, se enfocan en brindar ayudas para la
exploración o la explicación de datos a través de sistemas
que incluyan representaciones visuales, contemplando
intervenciones interactivas del observador. El principal
desafío en el diseño de visualizaciones, es el de
representar el conjunto de datos abstractos, no
necesariamente espaciales, reforzando los aspectos
cognitivos. Existe una gran variedad de posibles
codificaciones visuales, pero sólo unas pocas resultan ser
efectivas.”
(INFOVIS – IEEE)
7puentes.com! Visualización de Información § Redes Sociales!

3. ¿Qué es la Visualización de
Información?!
“...El fin de los sistemas de visualización es la exploración
de datos y de información para adquirir conocimiento
novedoso y el insight de los datos. El objetivo de la
visualización es promover un nivel más profundo de
entendimiento de los datos bajo investigación y brindar
conocimiento nuevo sobre las relaciones subyacentes,
aprovechando la poderosa habilidad de las personas de
visualizar.”
(Earnshaw)
7puentes.com! Visualización de Información § Redes Sociales!

4. Pipeline de Visualización!
Dato Crudo
Abstracción de Datos
Abstracción Visual
Vista
7puentes.com! Visualización de Información § Redes Sociales!

5. London Tube map 1931!
Harry Beck !
7puentes.com! Visualización de Información § Redes Sociales!

6. Representación Realista Foco en las distancias!

7. Representación Distorsionada Foco en las conexiones!

8. Semiología de los gráficos!
Variables visuales
• Posición
• Tamaño
• Color (Hue)
• Intensidad
• Forma
• Orientación
• Textura
Niveles de percepción
• Asociativo
• Selectivo
• Ordinal
• Cuantitativo
7puentes.com! Visualización de Información § Redes Sociales!

9. Puntos y líneas!
Ejemplo
G = (V,E)
V = {a, b, c, d, e, f}
E = {ab, ac, bc, bd, cd, de}
7puentes.com! Visualización de Información § Redes Sociales!

10. Dibujo de Grafos!
7puentes.com! Visualización de Información § Redes Sociales!
Demo Flare: http://flare.prefuse.org/demo

11. Dibujos en Jerarquía!
Árboles
Se dibujan los padres sobre
los hijos.
Árboles genealógicos,
jerarquía en organizaciones.
Simetría, minimizar áreas,
alinear niveles.
Hyperbolic trees
7puentes.com! Visualización de Información § Redes Sociales!

12. Dibujo de Jerarquía!
7puentes.com! Visualización de Información § Redes Sociales!
Niveles por radio

13. Circle Limit IV (Heaven and Hell), 1960, (c) 1994 M.C. Escher

15. The Jit: http://thejit.org/static/v20/Jit/Examples/Hypertree/example1.html

16. Dibujos Circulares!
Disponer los nodos de
manera uniforme sobre una
circunferencia.
Tr a z a r l o s e j e s c o m o
segmentos rectos o como
arcos
Grafos densos, todos contra
todos.
Igualdad de niveles
7puentes.com! Visualización de Información § Redes Sociales!

18. EuroVision 2009: http://blob.creanode.com/blob/eu2009/

19. Student List

20. Facebook Friend Wheel: http://thomas-fletcher.com/friendwheel/

21. Enron Communication Graph

22. Circo: http://mkweb.bcgsc.ca/circos/

23. Dibujos Basados en Fuerzas!
7puentes.com! Visualización de Información § Redes Sociales!
Reemplazar los ejes por
resortes de longitud
semejante a la expresada en
el grafo.
Comenzar con una
disposición aleatoria. Y dejar
que el sistema de fuerzas se
estabilice.
Grupos de afinidad, clusters,
foco en las distancias.

25. En la prepa: http://www-personal.umich.edu/~mejn/networks/school.gif

26. Adolescent romantic"
and sexual networks

27. Mapping the New Testament

28. Friendster Network

29. Twitter Graph by Weeks: http://burak-arikan.com/growth-of-a-twitter-graph

30. Mentionmap: http://apps.asterisq.com/mentionmap/

31. Facebook Network

32. Otras metáforas!
Dibujos Planares
Ortogonales (necesidad que
los ejes no se crucen)
Treemap
Sobre mapas
Matrix Vis
Arc Layout
7puentes.com! Visualización de Información § Redes Sociales!

33. One Million Data Treemap

34. Twitter Conversations Map

35. Les Miserables: http://www-personal.umich.edu/~mejn/networks/lesmis.gif

36. Les Miserables II: http://vis.stanford.edu/protovis/ex/matrix-full.html

37. IRC Arcs: http://mardoen.textdriven.com/irc_arcs/

38. Social Collider: http://socialcollider.net/

39. Visualizando el mensaje!
Pulse of the Nation: U.S.
Mood Throughout the Day
inferred from Twitter
Facebook Status Updates
Tell the Story of Romance
Gone Awry
7puentes.com! Visualización de Información § Redes Sociales!

40. Facebook Status Updates Tell the Story of Romance Gone Awry

41. Visualización de !
Información §
Redes Sociales!
7puentes.com!
Fundación Telefónica - GarageLab!
Lic. Ernesto Mislej!
ernesto@7puentes.com!
Noviembre 2010!