Visualización en javascript

Ana Belén García Parra 1

Un paseo por la Visualización en siete días

JAVASCRIPT/ JAVA/ FLASH

Ana Belén García Parra 2

Día 4Un paseo por la Visualización en 7 días

I N D I C E

Visualización Redes Java / javascript Flash

Google API

Protovis

Prefuse

¿Por qué Javascript?

• Desarrollo rápido• Pequeña curva de aprendizaje• Integración directa en páginas Web• Diversas librerías de visualización• Gran número de ejemplos

3Ana Belén García Parra

Ana Belén García Parra 4

Google Visualization API

Añadiendo gráficos interactivos a cualquier web

GVA. Visión general

• Acceso a fuentes de datos externas• En continuo desarrollo

• Gran selección de visualizaciones

• Reutilización• Visualizaciones atractivas• Visualizaciones integrables

en forma de Gadget

Ana Belén García Parra 5

GVA. Galeríahttp://code.google.com/intl/es-ES/apis/visualization/documentation/gallery.html

• HTML, Javascript, Flash, GWT• Visualizaciones propias de la librería• Visualizaciones de terceros• ¿Ninguna te satisface?

Crea tu propia visualización

Ana Belén García Parra 6

GVA. Uso: APIs y Librerías 1/3Google AJAX API

Third-party visulization

Visualization API

Visualization library

Ana Belén García Parra 7

GVA. Uso: Preparar los datos 2/3

• DataTable: todas visualizaciones esperaneste tipo de datos– DataView: versión de sólo lectura• Reordenar /ocultar/hacer cálculos sobre filas y

columnas

• Poblado a mano• Poblado a partir de un proveedor: DataSource– Ej. Google SpreadSheet

Ana Belén García Parra 8

GVA. Uso: Dibujar la visualización 3/3

• Crear la instancia de la visualización– ¿Dónde se dibujará?

• Dibujar– ¿Cómo se personaliza?

Ana Belén García Parra 9

GVA. Crear una visualización

• GWT (Google Web Toolkit). Desarrollo en java y traducción a Javascript

• Javascript– Evitar conflictos de nombres– Evitar conflictos CSS– Implementar :

• Un constructor. Parámetro: objeto DOM contendor• Un método draw. Parámetros: un DataTable y un map con

opciones de visualización (opcional)

– Añadir los eventos con google.visualization.events.trigger

Ana Belén García Parra 10

GVA. Ejemplos: Motion Chart 1/3

• DataSet: Turkey2010_day_list-main_countries_day_list– País | Fecha | Menciones

• ¿Qué recibe MotionChart?– String | Fecha | Número o String |…

• ¿Qué buscamos?– Comparación de menciones frente a puntos anotados en el

tiempo• ¿Qué utilizamos?

– Consulta de datos a proveedor externo– Creación inline de DataTables– Combinación de DataTables

Ana Belén García Parra 11

GVA. Ejemplos: Annotated Time Line 2/3

• DataSet: Turkey2010_hour_count-country_hour_count– Fecha | Hora | País1 | País2 | …

• ¿Qué recibe Annotated Time Line?– Fecha o Fecha y hora | Número | [String | String ] |…

• ¿Qué buscamos?– Comparación de menciones entre países y cuándo se habla de

ellos• ¿Qué utilizamos?– Consulta de datos a proveedor externo– Uso de Formatters– Transformación de DataTables

Ana Belén García Parra 12

GVA. Ejemplos: Treemap 3/3

• DataSet: Turkey2010_players-players_pais– País| # | Jugador | Nick | menciones | % | edad | altura|

Posición | Equipo,liga local |…• ¿Qué recibe Treemap?

– Nodo | Padre | Valor tamaño | [Valor color] |…• ¿Qué buscamos?

– Comparación de número de menciones por diversos criterios• ¿Qué utilizamos?

– Consulta de datos a proveedor externo– DataView: ocultar cols, cols calculadas– Creación inline de DataTables

Ana Belén García Parra 13

GVA. Más información

http://code.google.com/intl/es-ES/apis/visualization/interactive_charts.html

http://code.google.com/p/camon/

Ana Belén García Parra 14

Ana Belén García Parra 15

ProtovisUna aproximación gráfica a la

visualización

Protovis. Visión general 1/2

Abstracción

ProtovisLibrería gráfica diseñada para visualización

Ana Belén García Parra 16

Protovis. Visión general 2/2

• Liderado por Mike Bostock y Jeff Heer del Stanford Visualization Group con importante colaboración de Vadim Ogievetsky.

• Licencia BSD• Versión actual: Protovis 3.2• Javascript y SVG. Sin necesidad de

plugins.

Ana Belén García Parra 17

Protovis. Conceptos

• Sintaxis declarativa• Encadenamiento de propiedades• Herencia de propiedades• Flujo dirigido por los datos

Ana Belén García Parra 18

Protovis. Marcas 1/2Area

Bar

Dot

Ana Belén García Parra 19

Protovis. Marcas 2/2

Line

Wedge

RuleLabelImage

Ana Belén García Parra 20

Protovis. Paneles

• Contenedor de marcas• Hace posible la repetición de marcas• Anidamiento de paneles

Ana Belén García Parra 21

Protovis. Uso 1/6

aprender

Diseñado para

mediante ejemplos

http://vis.stanford.edu/protovis/ex/

Ana Belén García Parra 22

• Descargar Protovishttp://protovis-js.googlecode.com/files/protovis-3.2.zip

• Crear un fichero HTML• Declarar el script para la visualización• Implementar el código de la visualización apoyado

en el API de Protovis– Estructuras de datos– Transformación de escalas– Paletas de colores– …

Tu visualización

Protovis. Cómo 2/6

Ana Belén García Parra 23

Protovis. Cómo 3/6Comparando con una librería de más alto nivel…

Year Austria Belgium Czech Rep.

2003

2004

2005

…

Ana Belén García Parra 24

Protovis. Cómo 4/6

Paso 1: un diagrama de barras

Ana Belén García Parra 25

Protovis. Cómo 5/6

Paso 2: replicar mediante un Panel para representar múltiples series

Ana Belén García Parra 26

Protovis. Cómo 6/6Paso 3: añadir Rules

Ana Belén García Parra 27

Protovis. Layout 1/2

• Encapsula un diseño o técnica de visualización para facilitar su reutilización– Realizar visualizaciones complejas con bajo coste

• Treemap, Grid, Network…

– Extender visualizaciones para una mayor adopción• Especialización de Panel• Define un conjunto de prototipos de marca como

propiedades• Exportan marcas para que sean extendidas en la

reutilizaciónAna Belén García Parra 28

Protovis. Ejemplos

• Turkey2010_hour_count-keywords_hour_count

– Streamgraph• Turkey2010_players-players_pais

– Treemap y BubbleChart

Ana Belén García Parra 29

Protovis. Más información

http://vis.stanford.edu/protovishttp://code.google.com/p/camon/

Ana Belén García Parra 30

31

Día 4 Visualizar

Muchas gracias por vuestra atención

Ana Belén García ParraContacto: anabelengp@gmail.com

Ana Belén García Parra