React y D3, la mezcla perfecta para hacer visualizaciones de datos complejos

React se ha convertido en una librería JavaScript con un gran reconocimiento desde que Facebook, su creadora, decidiera abrirla para el resto de desarrolladores. Su gran ventaja: es una biblioteca no sólo por el lado del cliente, sino también por el lado del servidor. 

BBVAOpen4U
|
02 Nov. 2016

Estamos en el mejor momento de la historia de la visualización de datos dinámica. Existen herramientas típicas de cuadros de mando que pueden utilizarse como programas de creación de gráficos como Tableau o Qlik y, además, existen numerosas librerías en JavaScript para hacer visualizaciones sencillas con conjuntos de datos complejos. Hoy en día, la combinación perfecta para este tipo de producto de análisis es la mezcla entre las librerías en JavaScript D3 y React. D3 es una gran alternativa, pero React es capaz de multiplicar sus posibilidades. 

De D3 ya hemos hablado, pero de React lo hemos hecho algo menos, aunque también dedicamos un artículo a sus características. React es una librería JavaScript de código abierto desarrollada por Facebook. Esos dos elementos, código abierto y Facebook, ya son los suficientemente potentes como para llamar la atención de cualquier desarrollador front-end. Pero lo es aún más el sentido de su nacimiento: crear componentes dinámicos que puedan ser reutilizados en distintas interfaces de usuario. Además, es una librería tanto por el desarrollo por el lado del cliente como del servidor. Es una librería full-stack en JavaScript.

No hay nada más que darse una breve vuelta por Google Trends para darse cuenta de la explosión en el interés en React. Búsquedas como ‘React’, ‘Reactjs’, ‘React Native’ o ‘Facebook React’ ha explotado literalmente en el gran buscador durante el último año. Ver la curva de crecimiento muestra la atención que ha acaparado: 

En este vídeo de Platzi, uno de los proyectos de formación técnica en internet con más seguidores en el mundo hispano, se explica a la perfección la importancia de React en su concepto de llevar toda la lógica JavaScript al lado del servidor y la enorme ventaja que tiene eso para la renderización de grandes volúmenes de datos o para toda la capa de seguridad de nuestros proyectos. Y cómo se producen los cambios en la vista por el lado del cliente y el concepto de DOM virtual. ;

Por qué incorporar React a D3

¿Por qué tiene sentido incorporar a los trabajos de visualización en D3 un plugin con React? Cuando un desarrollador front-end hace gráficos dinámicos en los que no va a ser necesario ningún tipo de mantenimiento, depuración o escalado posterior, lo más probable es que D3 le sirva con creces para ese trabajo finito. Pero si dichas visualizaciones de datos forman parte de un conjunto que sufrirá evoluciones posteriores, incorporar React puede añadir algunas ventajas:

  • Trabajo basado en componentes: ya hemos comentado que el sentido principal de React es la creación de componentes de front-end que pueden ser reutilizables en distintas interfaces de usuario. En el trabajo de visualización de datos, la subdivisión en componentes permite que las pruebas y depuraciones posteriores de cada uno de esos componentes de las visualizaciones dinámicas sean más sencilla. Además, una vez probado y depurado, esos componentes pueden moverse sin riesgo a un fallo. Lo realmente interesante de React es que gracias a JSX, una extensión de la sintaxis de JavaScript creada por Facebook, el JS se convierte en un lenguaje muy similar al XML o el HTML. Gracias a este avance de React, los componentes de los distintas visualizaciones se pueden utilizar en cualquier interfaz de usuario como elementos que se insertan como etiquetas HTML: por ejemplo un histograma

    Lo realmente interesante de React es que gracias a JSX, una extensión de la sintaxis de JavaScript creada por Facebook, el JS se convierte en un lenguaje muy similar al XML o el HTML. Gracias a este avance de React, los componentes de los distintas visualizaciones se pueden utilizar en cualquier interfaz de usuario como elementos que se insertan como etiquetas HTML: por ejemplo un histograma (<Histogram />) o un gráfico tarta (<Piechart />). Esto permite que el código usado en las visualizaciones de datos sea declarativo, reutilizable, comprensible y organizado. En este artículo de Sitepoint se explica a la perfección esos cuatro elementos del código React:

render() {

	  // ...

	  return (

	      <g transform={translate}>

	          <Histogram data={this.props.data}

	                     value={(d) => d.base_salary}

	                     x={0}

	                     y={0}

	                     width={400}

	                     height={200}

	                     title="All" />

	          <Histogram data={engineerData}

	                     value={(d) => d.base_salary}

	                     x={450}

	                     y={0}

	                     width={400}

	                     height={200}

	                     title="Engineer" />

	          <Histogram data={programmerData}

	                     value={(d) => d.base_salary}

	                     x={0}

	                     y={220}

	                     width={400}

	                     height={200}

	                     title="Programmer"/>

	          <Histogram data={developerData}

	                     value={(d) => d.base_salary}

	                     x={450}

	                     y={220}

	                     width={400}

	                     height={200}

	                     title="Developer" />

	      </g>

	  )

	}

Aquí se puede ver el renderizado de cuatro histogramas, con título (title), su valores de anchura y altura (width y height), las coordenadas (x e y) y la fuente de datos para la propia visualización. Con el gráfico final resultantes:

  • React sólo modifica la vista de los componentes con cambios en los datos: esta es posiblemente la gran ventaja para los desarrolladores front-end que se dedican a la visualización de datos, sobre todo si están manejando grandes volúmenes de información. Una de las características principales de React es que permite hacer una búsqueda en todo el DOM de aquellos elementos o componentes que han sufrido cambios en sus datos para volver a pintar la vista actualizada. Esto se hace gracias a la existencia de lo que se conoce como algoritmos de diferencias, que buscan en todo el árbol de nodos del DOM aquellos que han sufrido nuevos cambios y facilitan una actualización de la vista con los nuevos datos en el DOM virtual.

    Este proceso de identificación y carga de diferencias de datos en las vistas es lo que hace que React permite un gran valor añadido a librerías de visualización de información compleja y abultada como D3. Si estamos haciendo un gráfico dinámico con miles de datos con D3, cada cambio en alguna de las cifras de un JSON obliga a actualizar la página entera: cargar el conjunto de datos entero, analizarlos, pintarlos… Con React eso no es necesario en ningún caso porque sólo actualiza la vista en esos cambios mediante lo que se llama en esa librería la carga caliente de datos.

Si te interesan las APIs financieras, visita el catálogo de BBVA

"El software se está comiendo el mundo"
Marc Andreesen

¡Suscríbete!

Recibe nuestro boletín semanal. No te pierdas nuestros trucos, consejos, artículos y los eventos más innovadores.