Visualización de la información: el recurso por excelencia para explicar mil y una cosas

Debajo de la mesa de mi despacho, en la oficina, tengo un taco de papel reciclado. Cada vez que alguien entra preguntando por algo, enseguida echo mano al taco y cojo un par de hojas. A los técnicos se nos suele acusar (con razón, muchas veces) de que no explicamos los temas técnicos de forma lo suficientemente clara como para que lo entiendan los que se dedican a otras áreas del negocio. Seguramente se debe a que intentamos explicarles sólo con palabras las imágenes que nosotros vemos con claridad en nuestro cerebro, no consiguiendo que ellos se formen, partiendo de esas palabras las mismas  nítidas imágenes, o visualizaciones. Por eso yo, a la vez que hablo, voy dibujando sobre el papel recuadros, círculos, nubes, flechas y abreviaturas que hacen más visuales mis explicaciones. Es un recurso que uso tan a menudo, que cuando la necesidad de dar explicaciones me surge en una mesa ajena, lo que más echo en falta es mi taquito de papel reciclado.

Hace unos días me surgió en el trabajo la necesidad de presentar gráficamente un conjunto de datos generados por una aplicación web. Necesitaba algún tipo de pieza open source que pudiera añadir a esa aplicación para mostrar visualmente la información que hasta ese momento había presentado siempre en tablas. Las tablas están muy bien para algunas cosas, pero para otras, lo mejor es presentar la información mediante una sabia combinación de posiciones, tamaños, formas y colores. Durante mis pesquisas, que suelen comenzar siempre en la cajita de Google, me dí de bruces con un artículo realmente interesante (Data visualization: Modern approaches, Visualización de datos: Enfoques modernos) de un blog que me impactó sobremanera (Smashing Magazine). El artículo no resolvía mi problema como lo resolverá la pieza de open source que encontré finalmente, pero me resultó muy inspirador y me enganchó, obligándome a dedicar unos cuantos días a revisar de rato en rato todos sus apartados. Aunque os recomiendo leer también el artículo de Smashing Magazine, os introduzco aquí lo que a mí me ha llamado más la atención. En cada uno de los apartados que os presento he intentado tirar un poco del hilo para aportar algo de valor al artículo original, aportación sin la cual no tendría mucho sentido este post.

La mayoría de las visualizaciones que os presento ya llevan rodando por Internet unos cuantos años, y para algunos de vosotros no serán ninguna novedad. Yo conocía algunas, pero no les había prestado mucha atención. Os aseguro que para preparar este artículo les he prestado horas y horas de atención. Aunque éste sea un artículo sobre visualización de la información, no os he puesto ni una sola imagen, ya que en el artículo de Smashing Magazine tenéis para dar y tomar. Por otra parte… me gusta la idea de que cada enlace sea una sorpresa.

Os añado otro artículo, breve, pero interesante, sobre visualización de la información, de Escenarios de Innovación.

Comencemos.

Web Trend Map 2007/v2

Information Architects Japan son los creadores de este «plano de metro» de Internet. Partiendo del plano de metro de la ciudad de Tokyo, han elaborado un mapa de los sitios web más existosos de Internet, ordenados, según ellos mismos dicen, por categoría, proximidad, éxito, popularidad y perspectiva. En el enlace que titula este apartado puedes encontrar el mapa en dos resoluciones diferentes, para imprimirlo o ponerlo como fondo de pantalla, y también te lo puedes descargar como salvapantallas para Mac. A mí la versión que más me gusta es la versión online interactiva, que usa Snap Shots. ¿No os parece una página extraordinaria como punto de partida para comenzar unas cuantas excursiones por la parte más famosa y exitosa de Internet? La gran mayoría de los sitios representados y enlazados están en inglés -qué le vamos a hacer-, aunque, claro, si dominas el chino, puedes montarte en la línea marrón.

Yo no considero, como hace el autor del artículo original, que eso sea un mapa mental, a pesar de que parezca haber algo en el centro (el «YOU») y el resto de los elementos se relacionen unos con otros; pero sí que es una forma bastante original y útil de presentar la información de partida. Uno puede levantarse un día con el impulso de explorar la tecnología, por ejemplo, y lo único que tiene que hacer es llegar lo antes posible a la línea roja para ir de extremo a extremo, desde Dell hasta MSN. Por el camino se encontrará con un buen número de estaciones en las que podrá transbordarse a otras líneas, si es que no resiste la tentación de hacerlo, que es mucha. Me gusta la metáfora de la exploración de Internet como un viaje en el que tienes caminos bien definidos que puedes seguir (por ejemplo, el conjunto finito de los feeds de tu agregador) pero en los cuales siempre te vas a encontrar alternativas para viajar a otros lugares (en todos tus feeds habrá enlaces a nuevos mundos por descubrir) . Sólo me queda desearte un buen viaje.

Newsmap

Es una forma diferente de ver las noticias. Según su creador, es una aplicación que refleja visualmente el paisaje constantemente cambiante del agregador de noticias de Google News. En una misma página se presentan los titulares de las noticias de mayor repercusión que se pueden ver con este agregador. Los titulares se agrupan temáticamente en bandas coloreadas (noticias del mundo, nacionales, de negocios, de tecnología, de deportes, de entretenimiento y de salud). El tamaño de cada titular es directamente proporcional al número de noticias relacionadas con él. Se puede elegir -entre unos pocos- el país o combinación de paises origen de las noticias y la categoría o combinación de categorías de las mismas. También se puede seleccionar una de las cuatro bandas horarias de los siete días de la semana en curso para ver las noticias archivadas en esos momentos. Los créditos de Newsmap y algunos enlaces relacionados los podéis obtener en su página ‘about’.

Newsmap está construido partiendo de Treemaps, una herramienta para la visualización de jerarquías en un espacio limitado desarrollada en el Human-Computer Interaction Lab (Laboratorio de Interacción Humano-Computador) de la Universidad de Maryland (USA). Podéis ver otro ejemplo online de uso de Treemaps en esta representación de los favoritos más populares guardados en del.icio.us. Finalmente, os recomiendo darle un tiento al programa WinDirStat, que permite ver de manera bastante visual qué se está comiendo el espacio en los discos duros de tu ordenador. Si, lo sé, esto es un clon de un programa de Linux, el KDirStat, pero es que yo soy windowsero, qué le vamos a hacer.

The Gapminder World, 2006

Hans Rosling es profesor de salud global en el prestigioso Karolinska Institutet de Estocolmo (Suecia). Para que veáis cuán prestigioso es este instituto, sólo os diré que una asamblea de 50 de sus profesores, elegidos por votación, determinan anualmente el ganador del Premio Nobel de Medicina. Rosling desarrolló, en el marco de una organización sin ánimo de lucro que montó con su hijo y su nuera –Gapminder Foundation-, un software, Trendalyzer, que presenta de manera extraordinariamente visual, clara, intuitiva e interactiva, las tendencias globales en el mundo y en el tiempo: esperanza de vida, mortalidad infantil, ratios de pobreza… En los dos últimos años, Rosling ha dado dos conferencias de gran repercusión en TED (Technology, Entertainment, Design), apoyándose en su Trendalyzer: Debunking third-world myths with the best stats you’ve ever seen (2006), (Desmontando los mitos del tercer mundo con las mejores estadísticas que hayas visto nunca) y New insights on poverty and life around the world (2007) (Nuevas perspectivas sobre la pobreza y la vida en el mundo). Por lo visto, en estas conferencias conoció a los fundadores de Google. En marzo de 2007, Google compró Gapminder. Imagino que hicieron buenas migas en la cafetería del TED y allí mismo le hicieron una oferta que no pudo rechazar 😉 Google dice que su intención es poner Trendalyzer al alcance de todos… pero parece que aún tendremos que esperar.

Antes de ponerte a trastear en la herramienta, te recomiendo que visites su demostración de un minuto. Hay dos tipos de gráficos, el gráfico con ejes y el mapa. Para presentar la información en el primer tipo se emplean cinco dimensiones: la primera se mide sobre el eje horizontal, la segunda sobre el eje vertical, para representar la tercera se emplea el tamaño de los círculos, para la cuarta se emplea el color y para la quinta, una línea de tiempo. En el tipo «mapa» se pierde la posibilidad de enfrentar dos dimensiones sobre los ejes horizontal y vertical, pero se gana que los valores representados están colocados sobre un mapamundi. Para cada una de las dimensiones, excepto el tiempo, puede seleccionarse el valor a representar.

TIME Multimedia: This is where we live

¿Alguna vez te habías preguntado por qué gran parte de las series, telefilmes y películas urbanas americanas parecen transcurrir en Nueva York o Los Ángeles? Este original mapa habla por sí solo.

A Periodic Table of Visualization Methods

Ralph Lengler y Martin J. Eppler, de la facultad de Ciencias de la Información de la Universidad de Lugano (Università della Svizzera italiana-USI), coordinador y lider, respectivamente, del proyecto de formación online universitaria Visual-Literacy.org (Tutorial e-learning sobre la visualización aplicada a la comunicación, la ingeniería y los negocios), son los autores de este estupendo gráfico interactivo. Si los japoneses de Information Architects Japan que mencionaba más arriba utilizaban como patrón para presentar visualmente la información un mapa de metro, estos «italianos» de Visual-Literacy.org utilizan una estructura archiconocida: la tabla periódica de los elementos. Cada método de visualización está representado, como los elementos químicos, por una celda de la tabla con su nombre abreviado en una o dos letras (símbolo químico). El color de la tipografía empleada para este símbolo distingue los métodos que representan estructuras de aquellos que representan procesos. Una combinación de pequeños símbolos clasifica cada método por el nivel de detalle con el que se presenta la información o el tipo de pensamiento aplicado para la representación. Finalmente, el color de fondo agrupa los diferentes métodos en seis categorías. Al pasar el puntero del ratón por encima de cada celda, aparece una imagen con un ejemplo del método de visualización. Yo creo que merece la pena dedicar más de un rato a ver uno a uno todos los ejemplos.

Lengler y Eppler demuestran que la tabla periódica de los elementos puede servir para algo más que para clasificar convenientemente los elementos químicos. Aquí te pongo otro uso muy distinto de la tabla periódica de los elementos, en esta ocasión, para trasmitir sentimientos (vídeo).

En Visual-Literacy.org, he encontrado también otra imagen interactiva bastante interesante: Stairs to visual excellence (Escalera hacia la excelencia visual). Parafraseando las palabras del autor, cada escalón de la escalera resalta una dimensión importante del diseño al crear visualizaciones. Si recuerdas y pones en práctica estas cinco dimensiones, tus visualizaciones serán claras, consistentes y cautivadoras. No dejes de pasar el puntero del ratón por encima de cada palabra para ver los ejemplos, son muy… visuales.

Timelines

Bajo este título he reunido varios ejemplos de lo que los anglosajones llaman «timelines», y que nosotros podríamos llamar líneas de tiempo, o cronologías. En estas visualizaciones, las fechas indican la dirección en que corre el tiempo y relacionan un hito con el hito posterior. Los colores se utilizan para indicar agrupaciones (familias, ramas evolutivas…). La posición en el eje horizontal representa los diferentes momentos del tiempo dentro de la cronología.

• Linux distro timeline: Cronología de las distribuciones de Linux, desde 1991 hasta 2007.

• The History of Programming Languages (PDF): Cronología de una selección de 50 lenguajes de programación, desde 1954 hasta 2004, preparada por la editorial O’Reilly. Está basado en el trabajo original de Éric Lévénez, mucho más feo, pero actualizado hasta 2007.

• Windows History: Cronología de los sistemas operativos Windows. La imagen, más sosa no puede ser… pero la cantidad de información que presenta es abrumadora. El autor es Éric Lévénez. Va desde 1980 hasta 2007.

• Unix History: Cronología de los sistemas operativos Unix. El autor es el mismo, la historia transcurre entre 1969 y 2007.

Mapas visuales/Mapas conceptuales

• Mapa Visual de la Web 2.0: Los autores de este extraordinario mapa son Alvy y Nacho, de Internality, blogueros del archiconocido Microsiervos. En sus propias palabras: «Este mapa agrupa de forma visual los principales conceptos que habitualmente se relacionan con la Web 2.0, junto con una breve explicación. Además se han seleccionado algunos ejemplos de servicios de la Internet hispana que suelen enmarcarse en la Web 2.0. También se incluyen algunos representantes globales habitualmente utilizados por el público hispano. Un glosario técnico explica con mayor detalle algunas de las tecnologías y acrónimos asociados con este fenómeno. Este mapa forma parte del libro La Web 2.0 publicado por la Fundación Orange«. Para mí, la mejor versión es el PDF interactivo, que, al igual que el Web Trend Map 2007/v2 que presentaba en primer lugar, se ha convertido en uno de mis puntos de inicio para la exploración de la web.

• Java Technology Concept Map: Mapa conceptual de la tecnología Java, elaborado por Dubberly Design Office para Sun Microsystems. En los mapas conceptuales, los verbos conectan nombres para formar proposiciones. Los términos están acompañados por ejemplos y detalles. En este mapa, la proposición principal es «Developers learn and use Java to create and run programs that make devices and the Internet useful for people«, lo que, en español es, más o menos, «Los desarrolladores aprenden y usan Java para crear y ejecutar programas que hacen que los dispositivos e Internet sean útiles para las personas) «. La versión online, aunque es interactiva, a mí me resulta muy incómoda por el tamaño del reproductor Flash en la que la han embebido (incomprensiblemente pequeña para tanto mapa). La versión en PDF es más tratable, aunque no es interactiva.

Dubberly Design Office ha desarrollado otros cuantos mapas conceptuales muy, muy interesantes. No os los perdáis.

• XPLANATIONS®: Es la forma de explicar, de manera visual, sencilla y clara, conceptos y relaciones complejas por parte de XPLANE. Puedes descargarte de manera gratuita hasta 8 de sus Xplanations®. Es necesario introducir tus datos en un formulario, pero merece la pena dar este pequeño paso, porque sus mapas visuales son realmente estupendos (mi agradecimiento a María Abad, antigua compañera de trabajo, por descubrirme estos mapas).

Esto de la visualización de la información es un tema infinito. Podría estar días y días investigando y escribiendo sobre esto y no terminaría. Pero tengo que dejarlo porque en casa ya están empezando a mirarme mal… y hay otros asuntos que tengo que visualizar.

Nos vemos.