Tag Archives: Visualización

Visualización de datos geolocalizados con CartoDB (I)

Este post trata sobre la creación de mapas y la visualización de datos sobre los mismos usando una herramienta tan potente y gratuita como es CartoDB.

CartoDB es una web que, de forma gratuita (también tiene modalidades de pago con funcionalidades y recursos adicionales) permite crear mapas y agregar diferentes conjuntos de datos a los mismos. Posteriormente posee una serie de opciones de cusotmización para mostrar de forma visual esos datos. Estas son sus características fundamentales:

  • Ofrece una libreria de datos para ser usados de forma inmediata.
  • Permite cargar (y exportar) datos desde y a diferentes formatos.
  • Posee diferentes estilos de mapas.
  • Ofrece diferentes opciones de customización para visualizar los datos en el mapa, como aplicar diferentes estilos, añadir pop-ups con información, diferentes tipos de marcadores, diferentes formas de visualización, etc.
  • Permite publicar los mapas de forma sencilla y de diferentes maneras.

Los pasos que se presentan a continuación son una introducción muy básica y sencilla al uso de CartoDB para crear sencillos pero potentes visualizaciones de datos geolocalizados. Se pueden encontrar más tutoriales de este estilo en formato curso en esta web.

1. Crear una cuenta en CartoDB. Logarse. Acceder al dashboard

Una vez que hemos accedido a CartoDB, lo primero que podemos hacer es, o bien escoger uno de los múltiples datasets que podemos encontrar disponibles dentro de la misma web, o bien cargar uno que deseemos usar en algún formato compatible (por ejemplo en CSV). De momento vamos a usar uno de los disponibles en la web, más adelante podremos usar otros preparados por nosotros mismos.

2. Seleccionar el dataset

Desde el menú que se despliega en la parte superior derecha de nuestro dashboard podemos acceder a nuestros dataset. Una de las opciones de las que disponemos es acceder a la libreria de datos de CartoDB, desde Data library. Vamos a buscar un dataset cualquiera, en este caso seleccionaremos uno que se llama Twitter T3chfest, sobre los mensajes de Twitter enviados durante el evento T3chfest… Podemos buscar datasets por palabras claves usando el buscador de la parte superior izquierda (Search).

Selección de datasets

Selección de datasets

3. Crear el mapa

Clicamos sobre el dataset. Ahora podemos ir a la parte superior derecha, donde hay otros dos enlaces, Connect dataset y Create map. Podemos clicar sobre cualquiera de los dos, pero para ir más rapido clicamos directamente sobre Create map.

Menú del dashboard

Menú del dashboard

Es entonces donde se inicializa un nuevo mapa con los datos seleccionados. Se abrirá una nueva vista con el mapa y los datos cargados por defecto.

Vista de mapa

Vista de mapa

4. Visualizar los datos

Aunque estemos viendo el mapa, podemos cambiar a la vista de datos facilmente para ver con que datos se va a trabajar. Aunque no es indispensable, si es recomendable saber de que datos se disponen y si estos están en los formatos correctos (numérico, texto, etc.). Para ello basta con clicar sobre la opcion de Data View de la parte superior de la vista de mapa.

Vista de datos

Vista de datos

Podemos ordenar los datos o filtrarlos para una mejor visualización. Si el dataset es nuestro, también podriamos cambiar el tipo de dato de cada columna. En este caso disponemos de  múltiples columnas con datos que visualizar. Vamos a ver si podemos mostrar una vista del número de twits que se produjeron en cada zona geográfica y visualizamos su evolución en el tiempo.

5. Configurar la visualización

Podemos configurar los datos que se mostrarán y la forma en la que se dibujará la visualización usando la herramienta wizards de la barra lateral derecha de la vista de mapa (la que aparece como un pequeño pincel). Seleccionar una u otra configuración irá en función de la información y la visualización que querramos crear.

Configuración de visualización

Configuración de visualización

En un primer caso, vamos a mostrar donde hubo twits, cuantos hubo y los vamos a agrupar por idioma también. Para esto seleccionamos la visualización de tipo Category. La categoria será el idioma. Seleccionamos la columna del idioma (en este caso se llama twitter_la) en el combo correspondiente. Reducimos también el tamaño del marcador. Como nos salen varios idiomas, vamos a filtrar los datos. Nos quedamos solo con el idioma inglés (en) y español (es).

Filtro SQL

Filtro SQL

Para filtrar los datos seleccionamos la pestaña del filtro en la barra de herramientas. Seleccionamos la columna sobre la que filtramos y marcamos o desmarcamos sus posibles valores. También podemos editar el filtro en formato SQL en la pestaña de herramientas correspondiente.

Modificamos los colores y customizamos a nuestro gusto, por ejemplo añadiendo una leyenda con los codigos de idioma. Una vez que el mapa esta listo, podemos publicarlo. Pulsamos sobre el boton PUBLISH de la esquina superior derecha. Nos ofrece tres opciones de publicación. Como una URL sin más, con un iframe, embebido en nuestra web, o usando la API JavaScript de CartoDB. Simplemente copiamos la URL que nos ofrece en la primera opción para visualizar el mapa que hemos creado.

Mapa de idiomas

Mapa de idiomas

 6. Animar mapas

Vamos a crear un segundo mapa, esta vez animado. En este caso la visualización escogida nos permitira hacer esto. Vamos a mostrar los twits que fueron apareciendo a lo largo del tiempo. Para ello reseteamos la vista para eliminar el filtro de datos anterior.

Escogemos otra visualización, en este caso la llamada “Torque“. Esta visualización muestra una barra de progreso sobre el mapa que avanza a lo largo de las fechas asociadas al dataset visualizado.

Otra configuración

Otra configuración

Seleccionamos la columna “postedtime” como la columna de tiempo. Configuramos colores y otras opciones y estaria listo. Por utlimo cambiamos el estilo del mapa a algo más oscuro para que se visualicen mejor los datos. Lo hacemos accediendo al “Change basemap” que hay en la parte inferior izquierda. Y estaria listo, se puede testear o publicar tal y como está.

Mapa de twits

Mapa de twits

Como inicio para comenzar a crear mapas con CartoDB creo que puede ser suficiente con lo anterior. En próximos post incluiré otros temas relacionados con el uso de estilos (CSS), la creación de mapas con varias capas y el uso de mapas con la API JS de CartoDB.

Visualización de datos con Prefuse – Grafos

Comenzamos con este post una serie de entradas relacionadas con el uso de diferentes herramientas y técnicas de visualización gráfica de datos.

La visualización gráfica de datos es crucial para mostrar de una manera rápida y sencilla una gran cantidad de información, además de ser una útil técnica para generar información adicional acerca de esos mismos datos, que puede estar oculta pero que puede hacerse visible cuando esos mismos datos se relacionan de una forma visual.

La primera de las herramientas que se van a usar es la libreria en Java de desarrollo de visualizaciones gráficas llamada Prefuse. Prefuse es una libreria gratuita implementada en Java y de gran potencia para el desarrollo de visualizaciones de datos complejas. Permite el desarrollo de diferentes visualizaciones como grafos, árboles, mapas, etc. Es especialmente adecuada para su uso desde aplicaciones Java estándar o applets.

En este ejemplo se presenta una sencilla visualización usando un grafo que además implementa un sistema de fuerzas con fuerzas sencillas como la Ley de Hook o fuerzas gravitatorias, para dar mayor dinamismo e interacción a la visualización.

1. GraphML

Una de las capacidades de Prefuse es la de procesar información formateada en GraphML. GraphML es un lenguaje de etiquetas para definir grafos, es decir, un XML para definir grafos. Esto facilita exportar e importar información contenida en un grafo. En el ejemplo en cuestión, se usa GraphML para definir un grafo y cargarlo via Prefuse, tal que así:

2. Cargar el grafo

El GraphML se cargaría en Prefuse:

3. Clase de visualización del grafo

Seguidamente, se crea una clase que implementará la visualización del grafo:

4. Visualización del grafo

El grafo cargado anteriormente se pasa a la clase de visualización del mismo:

5. Contenedor de la visualización

Aunque ya se ha creado la visualización, falta agregar la misma al contenedor que la mostrará. Para ello se crea la clase DisplayBrowser:

Se añade la visualización al contenedor:

Por último, el contenedor de la visualización se puede agregar a cualquier otro contenedor, por ejemplo, un JPanel en una aplicación con SWING.

 prefuse_grafo

JNumbers muestra un grafo con los números naturales del 1 al 100. Cada nodo es un número que esta relacionado con sus correspondientes múltiplos y divisores.

Se puede descargar el proyecto completo para Eclipse de la aplicación desde este enlace.