Mi blog personal sobre investigación y divulgación
Tag Archives: gráficas
Representando datos con Javascript
Desde hace tiempo tengo curiosidad por la representación de datos en páginas web. No me refiero a mostrar un fichero gráfico, sino algo más interactivo. Por ejemplo, gráficos en los que se pueda hacer zoom, o que muestren los valores cuando pasamos el ratón por encima.

Investigando un poco encontré unas cuantas librerías de código abierto para hacer esto, pero la que más me gustó es Dygraphs. Esta es una librería en Javascript que es utilizada por Google, Eutelsat, NOAA y muchos más. Muchos aficionados a la meteorología también la usan para publicar los datos de sus estaciones meteorológicas en una web. Por lo que he podido leer hasta ahora es muy flexible, permitiendo cambiar muchas cosas de las gráficas hasta dejarlas completamente a nuestro gusto. Personalmente las que resultan de usar Dygraphs me parecen además las gráficas más atractivas visualmente de entre todas las que he visto en la web.

Entre ayer y hoy estuve trasteando un poco con esta librería y aquí muestro mi primera gráfica, todavía bastante cutre pero que da una idea de lo más básico que se puede hacer y algunas funcionalidades interesantes. Los datos representados son las concentraciones de PM10 diarias en la estación de El Río (Tenerife) entre los días 1 de enero y 31 de marzo de 2014. Los datos son de la Red de Vigilancia y Calidad del Aire del Gobierno de Canarias, que ofrece datos en varios formatos. Uno de esos formatos es el .csv y de uno de esos .csv extraje la información.

Hay varias maneras de entrar los datos en Dygraphs. Una de ellas es simplemente cargar un fichero .cvs desde la web. Otra manera es incluir los datos en el script, como en el primer script de este tutorial. En este caso, como no son muchos datos, yo lo hice de la última manera. Todavía no he jugado con la configuración de los ejes, sus etiquetas o los colores de las gráficas, así que como dije antes mi gráfica todavía es muy primitiva.  

Como puedes comprobar, si pasas el cursor por encima de los datos se puede ver, para cada punto, su valor (fecha y concentración de PM10 y microgramo/metro cúbico). Si marcas un área haciendo click con el ratón puedes hacer zoom en  cualquier zona que quieras, y si haces doble click en cualquier punto de la gráfica vuelves a la vista original. Esto me parece muy práctico.

Para ejecutar un código en Javascript en WordPress, que es el gestor de contenidos que uso para este  blog, hay que hacer alguna cosilla que no es necesaria en un .html de los de toda la vida. Primero tienes que subir el código .js (en este caso, dygraph-combined.js que puedes encontrar aquí) en un directorio de tu web. Yo entré por FTP y creé un nuevo directorio llamado "scripts", y ahí copié el dygraph-combined.js. Luego tienes que incluir el script que llama a dygraph-combined.js en el post o página donde quieras añadir la gráfica. Para eso tienes que usar el modo Texto en el editor de WordPress y copiar el código. Si así no puedes ver la página una vez publicada tu entrada, instala el plugin llamado Text Control y en el post o página y cuestión indica "Ningún formato" y "Ningún formato de caracteres". Ahora se supone que debería funcionar. Ojo, a mí nunca me funcionó ver la gráfica haciendo vista previa de este post. Tuve que publicarlo para poder verla (no sé si en cualquier instalación de WordPress ocurrirá igual).

Como dije antes, el código que usé es una modificación del primero que aparece en el tutorial de Dygraphs.

Lógicamente, debes escribir la dirección de tu web y el directorio donde tengas el script en el campo src="dygraph-combined.js". Por ejemplo, src="http://www.miweb.com/scripts/dygraph-combined.js".

Ahora solo queda meterse más de lleno con Dygraphs, porque las posibilidades que ofrece son muchísimas.

¿Un titular basado en una interpretación errónea?

Desde que uso Twitter, no hace mucho, tengo la mala costumbre de mirarlo en el móvil muy temprano mientras desayuno. Sé que no es lo mejor para empezar el día, pero quién sabe…quiero estar informada, saber si ha habido un ataque nuclear y no tengo que salir a la calle ese día. 🙂 🙂 Pues el pasado día 11 de junio el primer mensaje en que vi en Twitter hizo que me despertara rápido. Era un mensaje de un conocido broker y deportista español que escribe libros y da muchas charlas (seguro que ya sabes quién es 🙂 ) en el que decía “Incremento de la venta de viviendas, volvemos ya a niveles de 2010”, y compartía esta imagen.

Incremento venta de viviendas

Sí, en la gráfica se puede verse que el número de viviendas vendidas en el primer trimestre del año 2014 es mayor que en 2013, con lo que ha habido una recuperación en las ventas, pero no es cierta la afirmación que comparte el twitero y que además aparece en el titulas de esa noticia: “la compraventa de viviendas vuelve a los niveles de 2010”.

Que alguien me corrija si me equivoco, pero yo lo que veo es que tendrían que haberse vendido más de 20000 viviendas más para estar en el nivel de 2010. El primer trimestre de 2014 sería el primer trimestre desde 2010 en el que las ventas no bajan, pero nada más. En el texto de la noticia sí está mejor explicado, pero no entiendo de dónde sacan el titular. 

No me parece grave solo lo del titular, sino que haya gente que comparta esto por las redes sociales repitiendo la misma afirmación que ahí ven. Ese mensaje fue retwiteado 36 veces y marcado como favorito por 27 usuarios.

Es muy posible que yo pueda estar malinterpretando también algo, porque me extraña mucho que el titular sea así de claro y la gente lo comparta como si lo viera clarísimo, pero yo lo veo así. Si me estoy equivocando en algo te agradecería que usaras los comentarios para hacérmelo saber. Le comenté estas mismas impresiones al twitero-broker, pero nunca respondió.

Cómo cambiar el tamaño de símbolo en una leyenda de MATLAB

Llevo unos días tratando de resolver un problema aparentemente muy tonto en una gráfica hecha con MATLAB, pero por mucho que he estado buscando en la ayuda del programa y en internet, no daba con la solución. El problema es el siguiente: representas una serie de datos en una gráfica y añades a la gráfica una leyenda, pero quieres que los símbolos de las leyendas aparezcan en un tamaño más grande que el que tienen por defecto. Parece una tontería, pero por lo visto MATLAB no permite modificar el tamaño de los símbolos de la leyenda de una forma tan intuitiva como lo permite hacer para los símbolos en la propia gráfica.

Voy a poner un ejemplo visual. Esta es una gráfica del tipo scatterm, es decir, una serie de puntos localizados en las coordenadas x e y a los que les asignamos valores. El dimátero del círculo varía con ese valor.

plot1

En la leyenda, arriba a la derecha, puedes ver que el punto al lado de la palabra “data1” es muy pequeño, quizás extremadamente pequeño para incluirlo en una figura para publicar o añadir a una presentación. Pues bien, después de leer mucho y juntar varias posibles soluciones, esta es la solución a la que llegué para hacer esto en la versión R2010a de MATLAB (y creo que funciona desde esa versión en adelante):

– Una vez representada la gráfica, escribe esto en la ventada de comandos

I=findobj(gcf,'tag','legend');
a=get(I,'Children');
set(get(a(1),'Children'),'markersize',20);

El número que está señalado en rojo es el que debes cambiar hasta conseguir el tamaño que quieras. Con un valor de 20, yo conseguí este resultado:

plot2

La propiedad ‘markersize’ de las leyendas parece ser que se podía cambiar más fácilmente en versiones anteriores de MATLAB, pero si tratas de hacerlo como indican algunos usuarios en diferentes foros de la red te encontrarás con el error ‘there is no ‘MarkerSize’ property in the ‘hggroup’ class’. De esta otra manera que te propongo aquí sí te debería funcionar.

En el caso de que tengas muchos símbolos en la leyenda, tienes que tener en cuenta que tanto símbolos como textos de la leyenda se guardan en la variable que hemos llamado “a”. Si tienes un segundo símbolo, puedes hacer lo mismo que antes pero con a(3) y verás que ese símbolo también cambia de tamaño. Jugando un poco con esto conseguirás que los símbolos de las leyendas sean bien visibles.

Espero que este truco te sirva en tus trabajos. Yo lo estoy usando con mapas de este tipo pero referenciados a coordenadas de latitud y longitud, sobre un mapa geográfico (es algo que no puedo hacer con Veusz), y ahora sí que quedan bien las leyendas.

ACTUALIZACIÓN: Misterios de la informática….al grabar la figura a un archivo gráfico (tanto en jpg, como en tiff, eps, etc.) encuentro que el cambio en el tamaño del símbolo de la leyenda desaparece. Esto no ocurre en todas las figuras pero en algunas de las que tengo ya hechas sí que ocurre. La solución está en ir al Export Setup dentro de el menú File de la figura, seleccionar Rendering y allí activar Custom Renderer (a mí me funciona con painters (vector format) en el menú desplegable), luego aplicar a la figura y luego OK. Ahora el cambio sí se verá reflejado cuando grabes la figura en un fichero gráfico.


Veusz, un buen programa gratuito para representar gráficas

Una de las cosas más importantes en ciencia es mostrar los resultados de la mejor manera posible. A la hora de representar datos en una gráfica no vale hacerlo de cualquier manera. Independientemente del tipo de gráfica elegida (que no es trivial elegir el tipo más adecuado) y de cuestiones como el tamaño de las fuentes de letra, los colores, etc., hay pequeños detalles que aveces pasan desapercibidos y pueden arruinar una gráfica.

Recuerdo perfectamente el comentario de un referee sobre una gráfica que yo misma preparé para un artículo hace unos años: era una serie temporal de concentraciones de partículas, y el problema que encontró el referee era que los puntos de la serie no estaban alineados con las marcas que indicaban los años en el eje x. Además, me indicó que no hiciera la gráfica con Excel sino con otro programa. Al principio me pareció una tontería y pensé que simplemente había reconocido la apariencia de una gráfica hecha con el programa de Microsoft, al que quizás tendría manía por alguna extraña razón, y por eso me ponía esa “pega”. Después reflexioné y entendí que ciertamente la gráfica podía ser confusa por eso de no tener los puntos alineados con las marcas de los años, sino entre dos marcas. Solución: usar Grapher. Rehice la gráfica con Grapher y quedó perfecta.

El caso es que ahora uso Linux para trabajar y resulta que Grapher no tiene versión para Linux. Se puede instalar la versión de Windows y ejecutarla usando Wine (comprobado, funciona), pero ya que estamos en Linux…busquemos un programa de gráficas para este sitema operativo y que me permita hacer las gráficas que necesito.

Programas de gráficas para Linux hay varios. Yo el primero que probé fue Grace. También probé SciDavis. Los dos son buenos y permiten hacer las gráficas con una apariencia muy sencilla y elegante (cosa que cuesta un poco en Excel), además de que tienen el problema de Excel con los datos de series temporales y las marcas en los ejes, pero yo me encontré con un pequeño gran problema: ninguno de estos programas permite trabajar con datos NaN (vacíos). Cuando se encuentran con un dato que falta y representas la serie temporal, simplemente unen el último punto con el siguiente, de manera que ves una línea de un lado a otro del hueco de la serie, donde no tienes datos. A mí eso no me interesa….solo quiero que si no hay dato no represente nada y la gráfica continúe a partir de donde vuelva a haber datos. Esto me parece una cosa fundamental, que mucha gente necesitará, y me parece muy extraño que tantos programas no lo tengan en cuenta.

Buscando y buceando por la web, con ayuda (todo hay que decirlo), al final me topé con el programa que sí hace lo que necesito: Veusz. Este programa es gratuito y además está disponible tanto para Linux como para Mac y Windows. Esto es genial porque puedo empezar a trabajar una gráfica en un ordenador, por ejemplo en la oficina con Linux, y seguir trabajando esa gráfica en casa con mi Mac.

Veusz

La interface gráfica de Veusz es sencilla, yo diría que más intuitiva que la de Grapher. Con este programa se pueden hacer muchísimos tipos de gráficas, e incluso anidarlas para formar figuras con varias gráficas en ellas. En la web de Veusz hay muchos ejemplos, con su fichero incluido, de manera que puedes cargarlos en tu ordenador y usarlos como plantilla. Se puede usar además por línea de comandos, usando scripts y como módulo de representación gráfica para Python.

Seguramente habrá otros programas de representación gráfica más sencillos, o con más opciones, pero si buscas un programa gratis, multiplataforma y que respete los NaN en la gráfica, este es el tuyo.

Una recomendación para los usa este tipo de programas por primera vez: no exportes el resultado final a un fichero .gif o .jpg. Guárdalos en algo con más calidad, como por ejemplo un .eps o un .tif. La ventaja del .eps es que es formato vectorial, de manera que la gráfica se reescalará al tamaño que necesites (o que necesite la revista a la que la envíes). Para publicar en revistas necesitas que las figuras tengan buena resolución, un tamaño apropiado y a ser posible que estén en formato vectorial.


Tendencias que parecen lineales, pero no lo son

A medida que vas teniendo más experiencia en mostrar datos te das cuenta de la importancia que tiene el elegir la mejor manera de representarlos en una gráfica. La escala, los colores, los símbolos que representan los puntos, las curvas de ajuste, las leyendas…. todo tiene que hacerse de la manera más apropiada para que el lector entienda, de un solo vistazo, lo que queremos mostrar.

(Imagen de: Ciencia Activa).

Una vez representados los datos, un problema típico es elegir cuál es la forma de la curva de ajuste a una serie de puntos. Aveces, por simple inspección visual, nos da la impresión de que la nube de puntos se va ajustar muy bien a una recta. En ese caso elegimos un ajuste lineal, calculamos la bondad del ajuste a través de R^2 y si el valor es bueno nos quedamos satisfechos. Sin embargo aveces, aunque nuestra vista y el valor R^2 parezcan confirmarlo, el ajuste lineal no es la respuesta.

En el blog Topologic Oceans hay un post muy interesante sobre este tema, titulado “Graphing Out Loud: curves and lines“. En este artículo se habla del curioso caso de las series temporales de CO2 claramente manipuladas por el autor del blog C3Headlines en esta entrada. En C3Headlines, un blog que podríamos catalogar facilmente como “negacionista” en asuntos de Cambio Climático, tratan de echar un cable al autor de el todavía más conocido blog negacionista Watts Up With That?, acerca de este artículo donde su autor pone en duda (como siempre), los resultados publicados en un trabajo científico. El trabajo en cuestión es el paper titulado “Evidence for super-exponentially accelerating atmospheric carbon dioxide growth“, de Andreas D. Hüsler y Didier Sornette (Atmospheric and Oceanic Physics, 2011). Hüsler y Sornette llegan a la conclusión de que existe un crecimiento exponencial y acelerado de las concentraciones de CO2 en la atmósfera, pero los blogueros de Watts Up With That? y C3Headlines quieren hacer ver que los expertos no tienen razón y el crecimiento de las concentraciones de CO2 es simplemente lineal. Para ello en C3Headlines lo que hacen es representar los datos de una manera muy dudosa: por un lado, en vez de representar la serie de promedios anuales, eligen representar la serie de promedios de los meses de enero. El por qué solo usan los datos de enero pero en el título de la gráfica no lo aclaran (solo ponen Monthly CO2 ppm levels since late 1958) es todo un misterio que ya nos puede hacer pensar mal (¿quizás los datos de los meses de enero son los que muestran un comportamiento aparentemente más lineal de la serie?).

Ahora la cuestión clave es fijarse en el ajuste lineal marcado con una líne roja sobre los puntos grises. En la pequeña gráfica que se incluye en la parte superior izquierda se nos muestra cómo se vería un ajuste lineal (en rojo) y un ajuste exponencial (en verde). A simple vista la serie temporal mostrada parece asemejarse más a la línea roja, luego…el ajuste es lineal. Además, el R^2 es de 0.986, muy bueno, así que ya no hay dudas de que el ajuste lineal es el mejor. Pero, tal y como apunta el autor de Topologic Oceans, hay un pequeño problema Read More…