dilluns, 6 de desembre de 2010

Construye tus propios gráficos estilo Gapminder: los motion chart de Google Docs

En la entrada de presentación de Gapminder prometí explicar cómo adaptar ese estilo de presentación de gráficos a nuestros datos. En esta entrada explicaré en cuatro pasos cómo construir un gráfico Gapminder con datos propios, a través de la herramienta de gráficos dinámicos de Google Docs. Otra entrada interesante sobre el tema la podéis encontrar en el blog de El perfil de la ciutat.

Paso 1: elegir los datos que queremos representar gráficamente y construir nuestra base de datos. Esto es, elegir qué indicadores queremos representar, descargarlos en la base de datos en formato .xls que vincularemos al gráfico y configurarla para que la herramienta la pueda leer. Para ello, evidentemente, tenéis que tener acceso a Google Docs mediante una cuenta de Google. Tenéis que crear un New-Spreadsheet y hacer File-Open, elegir el archivo .xls que habéis cargado y ya tendréis los datos en pantalla listos para vincular al gráfico.


En este caso representaremos la evolución del paro registrado de todos los municipios de la comarca del Baix Llobregat mes a mes desde 2005 hasta 2010, por sexo y edad. Para hacer este tipo de gráfico, Google Docs nos pide que pongamos los datos en un determinado orden: en la primera columna tenemos que poner el identificador de las unidades (entity name), en este caso, la zona territorial (el municipio, el distrito, etc.) No obstante, también podemos poner otras cosas o conceptos que no sean territorios. En la segunda columna tenemos que poner la referencia temporal de los datos (time values), es decir, el período (mes, año, etc.) En este punto hay que tener en cuenta que el formato de fecha se tiene que adaptar a los formatos que acepta el programa, que se pueden consultar aquí. En las columnas siguientes ya podemos poner los indicadores que queremos mostrar en el gráfico, tantos como queramos, teniendo en cuenta que el nombre que le ponemos al indicador en el encabezamiento de columna es el que después nos va a salir para elegir en el gráfico.



Paso 2: una vez cargado el documento, y con los datos bien ordenados, tenemos que seleccionar todos los datos, hacer click con el botón derecho del ratón y seleccionar la opción Insert Gadget, tras lo cual nos aparecen los distintos gráficos que podemos hacer. Seleccionaremos para este ejemplo la opción Motion Chart. A continuación tenemos que seleccionar el rango de celdas (si no lo hemos hecho antes) y hacer click en Apply and close.



Paso 3: si todo ha salido bien, ya tenemos nuestro gadget creado, con dos ejes en los cuales podemos seleccionar los indicadores a mostrar y con una serie de elementos que podemos ver en forma de burbujas, barras o líneas evolutivas, según nos interese. A partir de aquí ya podemos empezar a jugar con nuestro gráfico, seleccionando los indicadores que queremos ver, los que determinan el tamaño de la burbuja, reproduciendo la serie, o bien seleccionado aquel o aquellos ámbitos que deseamos destacar en la evolución, haciendo click sobre su burbuja o su barra.

Paso 4: una vez construido el gráfico, lo podemos incrustar en nuestro sitio web para que todo el mundo lo pueda ver y jugar con él (seleccionando Public on the web en la categoría de Sharing settings que sale encima de nuestra hoja de cálculo o gráfico.) Haciendo click en el botón Publish nos aparece el código html que tenemos que pegar en el editor de nuestro sitio web. Le podéis cambiar el tamaño editando los valores height and width para que se ajuste a las medidas de vuestro espacio o adaptarlo a la configuración de pantalla que queráis. Otro aspecto interesante es determinar la apariencia que tendrá por defecto el gráfico en nuestra web. Es decir, frecuentemente trabajaremos con bastantes variables. Para que el gráfico no elija al azar las variables que se muestran de inicio, podemos establecer una configuración predeterminada seleccionando las variables tal y como queremos que se muestren y después haciendo clic en el icono de configuración - avanzada, y copiando el código que aparece en "cadena de estado". Una vez tenemos ese código copiado clicamos en el botón "modificar configuración" y lo pegamos en el apartado de apariencia por defecto (default state).

Y ya está, una vez finalizado el proceso tenemos el gadget interactivo en nuestro sitio web. Inserto a continuación el ejemplo que he hecho. Podéis descargaros la hoja de cálculo en este enlace.

Disfrutadlo!

4 comentaris:

  1. Moltes gràcies per la info, Rubén, i bon blog!


    Roger

    ResponElimina
  2. Hola! He realizado mi propia presentación y quisiera publicarla en un blog pero no lo he logrado, pese a las indicaciones que han puesto en el paso 4 .... quisiera saber si pueden darme indicaciones más específicas csobre eso.... Muchas gracias!

    ResponElimina
  3. Hola!

    He realizado mi propia presentación haciendo uso de MotionChart, sin embargo no he podido publicarla en mi blog pese a las instrucciones dadas en el paso 4. Quisiera saber si podrían ayudarme indicaciones más específicas para la publicación de mi presentación en un blog.

    Muchas gracias

    ResponElimina
  4. Hola Angela,

    La verdad es que esta entrada sobre los motion chart ha quedado un poco anticuada y la tendría que revisar, en cualquier caso el aspecto que me comentas de tu presentación, si has logrado hacer el gráfico, debes buscar una pestaña donde ponga Publicar o Publish, y allí tienes acceso al código HTML del gráfico, que luego tendrás que incrustar en tu editor de entradas de blog.

    Espero haberte ayudado.

    Salut.

    ResponElimina