Visualización en javascript

Ana Belén García Parra 1

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

JAVASCRIPT/ JAVA/ FLASH


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


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


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


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

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

Third-party visulization

Visualization API

Visualization library


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


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

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

• Dibujar– ¿Cómo se personaliza?


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


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


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


GVA. Más información

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

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






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


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.


Protovis. Conceptos

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


Protovis. Marcas 1/2Area

Bar

Dot


Protovis. Marcas 2/2

Line

Wedge

RuleLabelImage


Protovis. Paneles

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


Protovis. Uso 1/6

aprender

Diseñado para

mediante ejemplos

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


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

• 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


http://protovis-js.googlecode.com/files/protovis-3.2.zip

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

Year Austria Belgium Czech Rep.

2003

2004

2005

…


Protovis. Cómo 4/6

Paso 1: un diagrama de barras


Protovis. Cómo 5/6

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


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


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


Protovis. Más información

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


http://vis.stanford.edu/protovis


31

Día 4 Visualizar

Muchas gracias por vuestra atención

Ana Belén García ParraContacto: [email protected]

Ana Belén García Parra

Visualización en javascript

Technology

Transcript of Visualización en javascript