Visualización en javascript

Un paseo por la Visualización en siete días
JAVASCRIPT/ JAVA/ FLASH

Visualización
Redes
Java / javascript
Flash
Día4
I N D I C E
Un paseo por la Visualización en 7 días
Google API
Protovis
Prefuse

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
¿Por qué Javascript?
3

Google Visualization API
Añadiendo gráficos interactivos a cualquier web
4

GVA. Visión general
5
Gran selección de visualizaciones
Reutilización
Visualizaciones atractivas
Visualizaciones integrables en forma de Gadget
Acceso a fuentes de datos externas
En continuo desarrollo

GVA. Galería
http://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
6

GVA. Uso: APIs y Librerías 1/3
7
Google AJAX API
Third-partyvisulization
Visualization API
Visualizationlibrary

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
8

GVA. Uso: Dibujar la visualización3/3
Crear la instancia de la visualización
¿Dónde se dibujará?
Dibujar
¿Cómo se personaliza?
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
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
11

GVA. Más información
http://code.google.com/intl/es-ES/apis/visualization/interactive_charts.html
http://code.google.com/p/camon/
14

Protovis
Una aproximación gráfica a la visualización
15

Protovis. Visión general 1/2
Protovis
Librería gráfica diseñada para visualización
Abstracción
16

Protovis. Visión general 2/2
Lideradopor Mike Bostock y Jeff Heer del Stanford Visualization Group con importantecolaboración de VadimOgievetsky.
Licencia BSD
Versión actual: Protovis 3.2
Javascript y SVG. Sin necesidad de plugins.
17

Protovis. Conceptos
Sintaxis declarativa
Encadenamiento de propiedades
Herencia de propiedades
Flujo dirigido por los datos
18

Protovis. Marcas 1/2
Area
Bar
Dot
19

Protovis. Marcas 2/2
Line
Wedge
Rule
Label
Image
20

Protovis. Paneles
Contenedor de marcas
Hace posible la repetición de marcas
Anidamiento de paneles
21

Protovis. Uso 1/6
Diseñado para
aprender
mediante ejemplos
http://vis.stanford.edu/protovis/ex/
22

Descargar Protovis
http://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
23

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

Protovis. Cómo 4/6
Paso 1: un diagrama de barras
25

Protovis. Cómo 5/6
Paso 2: replicar mediante un Panel para representar múltiples series
26

Protovis. Cómo 6/6
Paso 3: añadir Rules
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ón
28

Protovis. Ejemplos
Turkey2010_hour_count-keywords_hour_count
Streamgraph
Turkey2010_players-players_pais
Treemap y BubbleChart
29

Protovis. Más información
http://vis.stanford.edu/protovis
http://code.google.com/p/camon/
30

31
Día 4
Visualizar
Ana Belén García Parra
Contacto: anabelengp@gmail.com
Muchas gracias por vuestra atención

http://code-opensocial.googleusercontent.com	183
http://www.barriblog.com	167
https://code-opensocial.googleusercontent.com	44

Visualización en javascript

by Ana Belén García Parra on Oct 25, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 394

Statistics

Visualización en javascript — Presentation Transcript