Taller impartido por Ana Belén García Parra

Introducción

Protovis es una librería gráfica javascript orientada a la realización de visualizaciones, que proporciona al desarrollador un gran conjunto de componentes y herramientas y otorga al mismo la posibilidad de personalizar sus visualizaciones con un control detallado, permitiéndole abstraerse de las tareas básicas de creación de gráficas.

Visualización

A continuación se presentan los distintos ejemplos realizados con Protovis. Para poder visualizar los ejemplos únicamente es necesario descargar el código a partir del enlace proporcionado en cada ejemplo y abrirlo con un navegador web (Firefox,...).

La fuente de datos indicada en cada uno de los ejemplos será de utilidad para comprobar el formato de los mismos. Sin embargo, modificaciones en dichos datos no redundarán en modificaciones en las visualizaciones, ya que los ejemplos tienen una adaptación de dichos datos incluidos en el código fuente. Esto es debido a que Protovis no proporciona ningún método de interacción con Google Spreadsheets

Tree Map

Al igual que el treemap del Google API, esta visualización muestra las menciones que ha tenido cada jugador de cada país, pero con otra interactividad. En la parte superior derecha aparece la siguiente información numérica asociada a la visualización: Nº de jugadores, nº de menciones y porcentaje de los datos mostrados.

Interactividad: En la parte inferior izquierda permite realizar búsquedas, tanto por países como por jugadores tecleando el nombre. Conforme se escribe se van adaptando los colores del treemap para resaltar el dato buscado a la vez que se actualiza la información numérica de la parte superior derecha.

Fuente de datos

• Hoja con los datos de los jugadores del mundial turkey_2010_players. Tabla players_pais.

Codigo del ejemplo: treemap.html

Resultado

Bubble Chart

Con el mismo código de color por país que el anterior treemap se muestran las menciones de todos los jugadores a la vez con una colocación aleatoria, representadas por una burbuja cuyo tamaño es proporcional al número de veces en que fueron citados. Interactividad: Pasando el ratón por cada burbuja indica el nombre del jugador, el país al que pertenece y el número de menciones que ha obtenido.

Fuente de datos

• Hoja con los datos de los jugadores del mundial turkey_2010_players. Tabla players_pais.

Código del ejemplo: bubblechart.html

Resultado:

Stream Graph

Se muestran las menciones de todos las palabras clave con las que se han seleccionado los tweets.

Interactividad: No tiene

Fuente de datos^

• Hoja con los datos de las menciones por hora turkey_2010_hour_count. Tabla keywords_hour_count.

Código del ejemplo: streamgraph.html

Resultado: