Tutorial: Visualizando con Exhibit

5/Nov/2009

Muchos de nosotros creemos que así como es importante tener información confiable sobre ciertos temas, tanto o quizás más importante resulta la necesidad de poder relacionarse con esa información de la manera adecuada: La visualización equivocada puede hacer que los datos -por muy buenos que sean- no sirvan para nada. Es así que en los últimos años han aparecido una serie de herramientas que ayudan a la visualización de datos de la manera más adecuada para cada caso. Hoy quiero hablar de Exhibit, un proyecto realizado por la gente de MIT, mostrarles algunas cosas que se pueden hacer y cómo usarlo.

Mi primera aplicación

Hace algún tiempo expliqué qué era JSON y cómo se usa de manera que no entraré en detalles nuevamente.

Por ejemplo, tenemos una lista de personas con la siguiente información:

{

"items": [

  {"label": "Pedro", "sexo": "Masculino", "ano": "2000", "type":"Persona"},

  {"label": "Juan", "sexo": "Masculino", "ano": "2001", "type": "Persona"},

  {"label": "Maria", "sexo": "Femenino", "ano": "2000", "type": "Persona"},

  {"label": "Francisca", "sexo": "Femenino", "ano": "2003", "type": "Persona"},

  {"label": "Andrea", "sexo": "Femenino", "ano": "2002", "type": "Persona"},

  {"label": "Roberto", "sexo": "Masculino", "ano": "2001", "type": "Persona"},

  {"label": "Maria", "sexo": "Femenino", "ano": "2000", "type": "Persona"}

 ]

 }

Simplemente, es una lista de personas que incluye su nombre, sexo y su año de nacimiento. Tomando esta base como datos, creamos una sencilla página web con el siguiente código:

<html>

<head>

<link href="jsontest.js" type="application/json" rel="exhibit/data" />

<script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js"></script>

<script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js" type="text/javascript"></script>

</head>

<body>

<table>

  <tr>

    <td> 

      <!-- FACETAS -->

      <div ex:role="facet" ex:expression=".type" ex:facetLabel="Incident type:"></div>

      <div ex:role="facet" ex:expression=".date" ex:facetLabel="Date:"></div>

      <!-- FIN FACETAS -->

    </td>

    <!-- PANEL PRINCIPAL -->

    <td ex:role="viewPanel">

      <!-- VISTA DE LINEA DE TIEMPO -->

      <div ex:role="view" ex:viewClass="Timeline" ex:start=".datetime" colorKey=".type" ></div>

    </td>

  </tr>

</table>

</body>

</html>

Las líneas que comienzan con "<script..." llaman a las bibliiotecas que contienen los métodos para hacer funcionar exhibit. En particular, llamamamos no sólo a la funcionalidad básica, sino también a un plug-in el cual nos desplegará una línea de tiempo. Pero primero veamos la interfaz básica.

La interfaz básica de Exhibit es lo que se llama un browser 'facetado', es decir, un sistema donde es posible ver distintas "caras" (filtradas) de la información con base en sus atributos. Así, en este caso podemos mostrar sólo a personas de sexo femenino y que hayan nacido el año 2000 ó 2002. Para lograr esto, se puede hacer click en uno o más atributos en las cajas a la izquierda, como se ve en la figura.

Para lograr esto, dentro de la tabla, definimos los dos primeros "<div..." que indican qué atributos se usarán para filtrar datos. Para terminar, debemos agregar en la segunda celda de la tabla el atributo ex:role="viewPanel". Así, esta será nuestra pantalla principal.

Línea de tiempo

Una de las cosas que más me gusta de exhibit es la facilidad de agregar nuevas vistas. Así en el código anterior, la línea que comienza con '<div ex:role="view"....' dentro del "ViewPanel" nos permite ahora mostrar una línea del tiempo, basados en los años de nacimiento, como se puede ver en la siguiente imagen.

Lentes

Finalmente, muchas veces sólo queremos mostrar algunos datos y no todos. Más aún, queremos mostrarlos de alguna forma determinada. Para eso existen los lentes, los cuales nos ayudan a mostrar la información en la forma que queramos. Así, modificando el código anterior, agregamos un lente:

<html>

<head>

<title>Prueba de exhibit</title>

<link href="jsontest.js" type="application/json" rel="exhibit/data" />

<script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js"></script>

<script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js" type="text/javascript"></script>

</head>

<body>

<table width="100%">

  <tr>

    <td width="25%" valign="top">

    <br/><br/>

    <br/><br/>

    <br/><br/>

    <div ex:role="facet" ex:expression=".ano" ex:facetLabel="Nacimiento:"></div>

    <div ex:role="facet" ex:expression=".sexo" ex:facetLabel="Sexo:"></div>

    </td>

    <td ex:role="viewPanel">

    <!-- LENTE -->

    <table ex:role="lens" class="sexo">

      <tr>

        <td>

          <div>

            <b>Nombre:</b>

            <span ex:content=".label" class="name"></span>, 

            <b>Nacimiento:</b>

            <span ex:content=".ano" class="ano"></span>

          </div>

          <b>Sexo:</b>

          <span ex:content=".sexo" class="sexo"></span>

          <div ex:content=".nombre" class="nombre"></div>

        </td>

      </tr>

    </table>

    <!-- FIN LENTE -->

    <div ex:role="view"></div>

    <div ex:role="view" ex:viewClass="Timeline" ex:start=".ano" colorKey=".sexo" ></div>

  </td>

 </tr>

</table>

</body>

</html>

De esta forma, podemos mostrar sólo la información que necesitamos. Mejor aún, la mostramos cómo nosotros queremos. En este caso es una pequeña tabla con los nombres de los campos en negrita(*), como vemos en la figura

Existen varias otras opciones (exportar los datos como JSON, visualizar mapas, etcétera) pero se entiende la idea. La idea es aprovechar estas herramientas para poder explicar de manera más clara a la gente lo que queremos decir. Si quieres ver el código que utilicé en esta presentación así como los datos, los puedes encontrar aquí.

(*) Este es otro ejemplo donde queda demostrado que algunos computines no tenemos mucha habilidad con el diseño :-)

Ver más: simile-widgets.org/exhibit/

Alvaro's blog
567 lecturas

Noticias: tag #mmecanica en Twitter

más