Las alternativas del Data Binding como update y exit en D3 (Data-Driven Documents) forman parte de los conocimientos clave para contar con un gran dinamismo e interactividad en la visualización de los datos que pretendas realizar con los resultados arrojados.
El desarrollo de cada uno de estos eventos te permitirá tener más control en la personalización y la versatilidad para la visualización de los datos que se han trabajado. Por esta razón, en el presente artículo te compartimos un ejemplo práctico de update y exit en D3
¿Qué es Data-Driven Documents?
Data-Driven Documents es una librería de JavaScript para diseñar herramientas o para hacer gráficas Ad Hoc. Te permite tener una máxima personalización en el desarrollo de las gráficas y demás representaciones visuales del procesamiento de los macrodatos que muchas otras librerías en el campo.
A continuación, te recordamos cinco de los factores de D3 (Data-Driven Documents):
- SVG (Scalable Vector Graphics): su función consiste en establecer los datos introducidos en unos vectores según sus propiedades. El lenguaje de etiquetas SVG con base en XML consiste en designar los datos bajo dos dimensiones: ancho y largo.
- Data Bind: este factor selecciona todos los elementos que haya y, después, decidirás cuáles utiliza y cuáles no. A partir de allí, se establecerá la estructura de una gráfica.
- Escala: hace referencia a la realización de las gráficas según la escala que se establezca.
- Ejes y márgenes: en la estructura de una gráfica, se suelen encontrar dos ejes o más, que son el vertical y horizontal (X e Y). En función de estos se rige la esquematización de la información.
- Animación e interactividad: cada una de estas alternativas optimiza el acercamiento con el usuario; por ello, D3 (Data-Driven Documents) ofrece diversas opciones para añadir cuestiones, como el color, los eventos, las transiciones, la forma, el relleno, la curva, etc.
¿Qué es Data Binding?
Consiste en enlazar un archivo de datos con la gráfica, es decir, hace referencia a todas las gráficas que vas a hacer para crear elementos a partir de los datos.
Ahora, dentro de las operaciones que podrás realizar con esta función, podrás encontrar las siguientes:
- Update (no es una función): con esta opción se comparan los datos con la selección y se dejan solo los que ya tienen elementos en el DOM (Document Object Model). Por otra parte, permite modificar los elementos existentes.
- Exit: con la operación de exit se comparan los datos con la selección y se conservan solo los elementos que no tienen datos, es decir, que sobran. Además, permite que se eliminen los elementos que ya no tienen datos.
Ejemplo práctico update y exit en D3
En primer lugar, para emplear update y exit en D3 (Data-Driven Documents) tendrás que realizar las mismas operaciones que con el resto de funciones, es decir, organizar el lienzo desde JavaScript, de manera que tendrás que agregar el link CSS, el script, el div y un script source. Deberás crearlo todo, si aún no está creado, y guardarlo.
A partir de allí, por ejemplo, podrás trabajar con un div como contenedor a partir de la tercera de las opciones de data binding «enter» y añadir atributos en la selección fantasma de SelectAll contenidos en el div. En el siguiente ejemplo, se agrega texto como atributo con datos de tipo de país (country):
Ahora, en este ejemplo hemos pensado en crear un botón que filtre los países de Europa y otro que filtre los países de Sudamérica. Es decir, entre las dos funciones trabajan para conseguir un corpus de datos clasificados.
Como pudiste notar, en primer lugar se inscribe function updatePs (selection) {, al cual se le agrega el color azul para los datos que poseen elementos en el DOM (Document Object Model). Finalmente, con function exitPs(setInterval(() => { se eliminan los elementos que no tienen datos.
Continúa aprendiendo sobre el Big Data
En el desarrollo de este post, te hemos expuesto un pequeño ejemplo práctico de update y exit en D3 (Data-Driven Documents); ahora debes tener en cuenta que al principio puede ser muy complicado y es posible que no te funcione al primer intento. No obstante, vale la pena seguir aprendiendo al respecto. Además, cada uno de estos eventos cuentan con características y funciones muy ventajosas que deben ser estudiadas por separado.
Por esta razón, desde KeepCoding te ofrecemos el Big Data, Inteligencia Artificial & Machine Learning Full Stack Bootcamp. A través de esta formación intensiva, podrás familiarizarte con un ecosistema de desarrollo, conocer un IDE profesional y profundizar sobre el lenguaje de programación nativo Big Data Scala, ya que con este se ha escrito uno de los motores de procesamiento más conocidos hasta la fecha, Apache Spark. ¡Apúntate ya y sé un experto del Big Data en menos de nueve meses!
