Proyecto Estación Meteorológica 4: Visualización de Resultados Mediante HTML y D3.js

Visualización de Resultados Mediante HTML y D3.js

Una vez se han subido los datos a ThingSpeak, tal y como se describe en el post anterior, se quiere visualizar el contenido que se ha subido. Para ello, se diseña una página web utilizando HTML, JavaScript, CSS y D3.js.

El código de la página consiste principalmente en 3 partes: la importación de datos y su tratamiento, la visualización de estos en una gráfica y la visualización en una tabla.

Primero, la importación de datos. Para ello, se debe conseguir una URI desde ThingSpeak, la cual se puede conseguir entrando en la pestaña “Data Import/Export” de los canales que se han creado, en la sección “Get a Channel Feed”. Se decide que se quieren recuperar 5 sets de datos desde cada canal, por lo que esto se tiene en cuenta a la hora de codificar las URIs. Se cargan los datos llamando a estas con JavaScript, las cuales, tras ser llamadas, ejecutan unas funciones previamente definidas. El cometido de estas funciones es la de guardar los datos recibidos en unas variables. En este caso, se reciben 3 tipos de datos desde ThingSpeak: la temperatura (en ºC), la humedad (en %) y el momento de cada lectura. Además, al haber 2 canales en total, se deben juntar todos los datos en una única variable para poder trabajar luego con ellos. Por esto, se hace una llamada extra a una de las URIs de ThingSpeak, con la cual se crea una variable cuyo tamaño es el doble de las otras dos; es decir, en la que se importarán 10 sets de datos. Esta variable se usará como esqueleto para juntar después todos los datos. Por último, todos los datos se juntan en la última variable creada utilizando un “for”. A la hora de juntar los datos, se tiene en cuenta que el último dato subido a la plataforma no tiene porqué estar en un canal específico, por lo que se comprueba primero en qué canal está el último dato, y de acuerdo a esto, se llena la variable en el orden correspondiente.

Una vez se han importado los datos y se han tratado como es debido, se grafican. Para ello se utiliza D3.js. D3.js (Data-Driven Document) es una librería de JavaScript que sirve para manipular documentos basados en datos. Es decir, mediante esta librería se pueden crear diferentes tipos de gráficos utilizando tanto HTML, SVG y CSS.

Para ello, primero se carga la librería (en este caso se ha utilizado la v4). Esto permite usar la API que incorpora para definir, tanto las funciones, como los atributos de la imagen. Las funciones definidas aquí siempre tienen el prefijo “d3.”. Por ejemplo, para definir una línea se usa “d3.line”. Esta librería, aparte de aceptar sus propias funciones, también acepta las de los ya mencionados HTML, SVG y CSS.

Para hacer el gráfico, se empieza por definir la dimensión que ocupará este en la página web; es decir, sus márgenes. Dado que se tienen 2 variables, se definen 2 salidas: ‘y0’ para la temperatura e ‘y1’ para la humedad. La variable ‘x’ es el tiempo, que sirve para ambas salidas. Teniendo en cuenta lo anterior, se definen los rangos de las variables ‘x’, ‘y0’ e ‘y1’, los cuales se usarán varias veces más adelante. Seguidamente, se definen las líneas a graficar, una para la evolución de la temperatura y otra para la de la humedad, ambas en función del tiempo. Una vez definidos tanto los rangos, como las líneas, se define un objeto SVG. El SVG es un formato de gráficos vectoriales bidimensionales, tanto estáticos como animados, en formato XML. En este caso se usa para definir dónde estará situado el gráfico. También se definen las líneas de las cuadrículas para que quede más claro el gráfico.

Una vez puesto a punto el espacio donde crear la gráfica, se define la función “draw”. Esta contiene los comandos necesarios para dibujar la gráfica. Tiene una única variable de entrada, la cual contiene la información de tiempo (momento en el que se creó cada dato), temperatura (°C) y humedad (%). Antes de empezar a graficar, se da formato a los datos de tiempo, temperatura y humedad, para que sea más fácil trabajar con ellos. Después, aunque los datos hayan sido previamente ordenados, se vuelven a ordenar en función del tiempo con el comando “sort”. Esto se hace por si ocurre alguna anomalía.

Como el rango de temperatura y humedad es variable, se extraen los máximos y mínimos de los datos y se define su dominio en función de estos. Así, se consigue que los gráficos estén ajustados a sus valores máximos y mínimos. Es decir, si los datos de temperatura van desde los 20°C a los 30°C, no tienen lógica que el dominio sea de 0°C a 100°C, ya que así, el usuario no será capaz de observar los detalles.

Una vez definidos los datos, rangos, líneas, etc. se dispone a dibujar la gráfica. Cada objeto que se añade se define como “svg.append” o anexado. De esta manera se añaden: las líneas de cuadrícula, las líneas de las funciones, los ejes y sus etiquetas y el título de la gráfica.

Solo queda llamar a la función. Para ello se escribe el nombre de la función y se le pasa la variable donde se encuentran los datos (en este caso “jsonData”). Por último, para que las demás estructuras del código puedan trabajar sin problemas con los mismos datos, se vuelve a cambiar el formato del dato de tiempo (“created_at”).

Por último, los datos se meten en una tabla. Esto cuenta con dos partes. Una de ellas es el HTML, el cual se encuentra en el “body” del código. Aquí se define la tabla como tal. La otra es el código JavaScript, el cual se encuentra en el “head”. Este actualiza los valores de la tabla con los datos recibidos en el orden correcto de lectura, además de cambiarles el formato a uno más intuitivo para facilitarle la comprensión al usuario.

Una vez juntado todo y añadiendole algunos detalles, como el CSS, por ejemplo, para configurar el aspecto visual de la página o unos botones para mostrar u ocultar la tabla, el código tiene el siguiente aspecto: