1 1 grafiSok Lucía Otero Luis Díaz Huertes Adriana María Suárez Jiménez María Mercedes Paniagua Gómez Marco Antonio Sánchez González Director: Diego Blanco MASTER EN INGENIERÍA DEL SOFTWARE MADRID 29 de Junio de 2010

2 2 Overview  Presentación general del framework © grafiSOK  Presentación de la Arquitectura  Presentación de la BBDD utilizada  Librería © grafiSOK  Microcosmos ∮ Macrocosmos  Presentación de Visualizaciones Lucía y Luis  Area QuesoRelación QuesoCaracter  Waterfall XYLineChart PolarChar  PolarChart 3DPieCaracter Barras3D  QuesoRelacion  Waterfall  Análisis de pruebas  Generación real de videos con © grafiSOK

3 3 Que es ©grafiSOK? Framework que nos permite mostrar la evolución en el tiempo de una Red Social mediante diversidad de visualizaciones representadas en vídeos. Framework que permite integrar fácilmente visualizaciones de redes sociales hechas por usuarios de este framework.

4 ©grafiSOK Usos ©grafiSOK Representación de redes sociales Análisis de redes sociales en el tiempo Generación de videos a partir de visualizaciones de usuarios del framework

5 5 Descripción de © grafiSOK Entrada ◦ Red social representada en ficheros XML que cumplan con el esquema grafiSOK.xsd Proceso ◦ Validación XML y de las visualizaciones ◦ Ejecución de las visualizaciones para crear imágenes ◦ Creación imágenes base para el vídeo persistidas en una base de datos Salida ◦ Video en formato mov

6 © grafiSOK Más de © grafiSOK Hecho en java 6 Independencia de frameworks de terceros Repositorio del proyecto http://code.google.com/p/grafisok/ http://code.google.com/p/grafisok/ Librería propia para desarrollar nuevas visualizaciones.

7 7 Generador XML © grafiSOK

8 8 Generador XML grafiSOK Herramienta desarrollada en Java para la generación de XMLs para alimentar el framework © grafiSOK

9 9 Características del Generador XML Permite la generación de elementos y atributos de diferentes formas: ◦ Obligatorio ◦ Aleatorio ◦ Vacío Valores aleatorios Relaciones entre nodos aleatorias Máximo de 99.999 XMLs Máximo de 5.000 nodos Elección de la ruta donde generar los XMLs Todos los XMLs generados son válidos contra el esquema grafiSOK.xsd

10 10 Arquitectura © grafiSOK

11 Multi-tier architecture

12 Boundary (Usuarios © grafiSOK)

13 Core: © grafiSOK

14 Creando una visualización con © grafiSOK Agregar en su classpath mediasok.jar y common.jar Crear una clase java e implementar la interface IVisualization En el método executeVisualization implementar la lógica Retornar el componente donde pinta la red social Generar un.jar de su visualización

15 A donde va el JAR de mi visualización? Al descargarse grafisok se obtiene la siguiente estructura:

16 Como uso mi visualización? Visualizations.xml configurations.xml

17 Por qué no agrego mi JAR al classpath?? Porque todo el framework lo hace dinámicamente por reflection 17

18 Limitaciones Limitaciones © grafiSOK Java 6 ORM: Implementación JPA de hibernate JMF 1.2 SAX en Java 6.0 (posible solución temporal, agregando -Xmx1g funciona hasta 1000 nodos) ◦ http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=6536111 http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=6536111 ◦ http://forums.sun.com/thread.jspa?messageID=9977989 http://forums.sun.com/thread.jspa?messageID=9977989 18

19 19 Persistencia © grafiSOK

20 20 Tecnologías usadas MySQL (motor de base de datos open source) XAMPP (servicio de MySQL) Implementación JPA de Hibernate (funciona como el patrón DAO, cualquier BD se podría adaptar) ◦ JPA es el API de persistencia desarrollada para la plataforma Java EE e incluida en el estándar EJB3

21 21 Base de datos de grafiSOK

22 22 Tabla Imagen Guarda la imagen usada para el video Atributo idImagen PK Atributo frame Atributo imagen (LONGBLOB) Atributo idVisualizacion FK

23 23 Tabla Visualizacion Guarda la visualizacion usada y la red social a la que pertenece Atributo idVisualizacion PK Atributo visualizacion Atributo redSocial

24 24 Tabla Atributo Guarda Atributos de la imagen usada Atributo idAtributo PK Atributo lastFrame Atributo currentFrame

25 25 Tabla DetalleAtributo Guarda un atributo del detalle que tiene la imagen Atributo idDetalleAtributo PK Atributo idAtributo FK Atributo nombre Atributo valor

26 26 Librerías © grafiSOK

27 Librería ©grafiSOK Características Ejemplos Macrocosmos ◦ UserCharacter Hacia el microcosmos ◦ SexOrbit // CharacterOrbit Visualización atómica 27

28 Características Código abierto Fácil de implementar ∞ formas de representación 28

29 Ejemplos Filosofía ◦ Visualizador VisualizationViewer ◦ Grafo jung.graph ◦ Capas layouts (static, circle) ◦ Usuarios UsersFrame ◦ Relaciones RelationsUsersFrame ◦ Filtro FiltraUsersFrame // FiltraRelationsUsersFrame ◦ Imágenes / geometría (transparencia, iconos) 29

30 Microcosmos 30

31 Macrocosmos 31

32 32 Visualizaciones © grafiSOK

33 33JFreeChart Es una biblioteca libre de Java que facilita a los desarrolladores para mostrar gráficos de calidad en sus aplicaciones. Incluye: Una coherente y bien documentada API. Un diseño flexible que es fácil de ampliar, y se dirige tanto del lado del servidor y las aplicaciones como del lado del cliente. Apoyo a los tipos de salida, incluyendo los componentes Swing, archivos de imagen (incluyendo PNG y JPEG) y gráficos vectoriales formatos de archivo (incluyendo PDF, EPS y SVG); JFreeChart es "fuente abierta" o, más específicamente, es un software libre.

34 34 La visualización muestra una comparación entre chicos y chicas de los distintos tipos de caracteres. El azul hace referencia a los chicos y el color morado a las chicas. Area

35 35 Muestra las porciones de correspondientes a las diferentes intensidades que posee una relación. El color azul muestra la porción correspondiente a la intensidad media. El color verde muestra la porción correspondiente a la intensidad baja. El color rojo muestra la porción correspondiente a la intensidad alta QuesoRelacion

36 36 QuesoCaracter Muestra las porciones de correspondientes a las diferentes caracteres que poseen las personas. El color rojo corresponde al carácter calmado El color azul corresponde al carácter nervioso El color verde corresponde al carácter agresivo El color amarillo corresponde al carácter ambicioso El color fucsia corresponde al carácter introvertido El color celeste corresponde al carácter extrovertido El color rosa corresponde al carácter seguro El color gris corresponde al carácter inseguro

37 37 Muestra el número de personas que poseen las diferentes aficiones. La barra amarilla del final corresponde al total de todas las aficiones de las personas Waterfall

38 38 XYLine Chart En esta visualización se muestran los datos en una línea que se formará por la unión de sucesivos puntos que serán los datos almacenados para dicha visualización.

39 39 Cada vértice de la figura es un TipoCarácter. Cada sexo se identifica con el color rojo a los chicos y con el azul a las chicas. Polar Chart

40 40 3D PieChart

41 41 Muestra los distintos tipos de carácter que hay en cada nodo del grafo. Realiza una comparación entre los caracteres de chicos y chicas. Las barras de color rojo corresponde al sexo masculino y las de color azul al sexo femenino. Barras 3D

42 Pruebas de rendimiento 42

43 Pruebas de rendimiento 43 Configurando los argumentos de VM con -Xmx1g

44 Prototipo para probar Prototipo para probar © grafiSOK Hecho en JavaFX (netbeans) Integrando © grafiSOK: 44