Data-Driven Documents (D3) posee una máxima personalización en el desarrollo de sus gráficas y demás representaciones visuales del procesamiento de los macrodatos. En D3 también podrás contar con una gran variedad de alternativas para la visualización de datos, desde esquemas básicos hasta gráficas complejas.
Para ello, D3.js cuenta con múltiples funciones y operaciones que facilitan el desarrollo de la visualización de datos, dentro de estas, podrás encontrar el General Update Pattern o Patrón de actualización en la inscripción de la consola.
En este post, te explicamos qué es el patrón de actualización en D3 (Data-Driven Documents) y sus diferentes usos para la visualización de datos.
¿Qué es el patrón de actualización en D3?
General Update Pattern o patrón de actualización en D3 (Data-Driven Documents) es una función que trabaja con el enlazado de datos (Data Binding) bajo la operación enter, es decir, quien compara datos con la selección y deja solo los que no tienen elementos en el DOM (Document Object Model).
En efecto, el patrón de actualización se utiliza cuando se agregan nuevos datos al DOM (Document Object Model) y, por tanto, la operación enter debe actualizarse.
A continuación te compartimos su inscripción según la función a la que remite:
- Patrón de actualización con el grupo enter de drawBar:
function drawBar(group) {
group.enter().append(«rect»)
.attr(‘id’, d => d.country)
.attr(‘class’, ‘bar’)
.attr(‘height’, y.bandwidth())
.attr(‘width’, d => x(d.titles))
.attr(‘x’, margin.left)
.attr(‘y’, d => y(d.country))
}
- Patrón de actualización con la función de bars.enter:
let bars = elementGroup.selectAll(‘rect’).data(data)
bars.enter().append(‘rect’)
.attr(‘class’, ‘bar’)
.attr(‘x’, d => x(d.country))
.attr(‘y’, d => y(d.titles))
.attr(‘width’, x.bandwidth())
.attr(‘height’, d =>
height –
y(d.titles) – margin.bottom – margin.top)
- Patrón de actualización con elements.enter para el data binding:
// data binding:
let elements = elementGroup.selectAll(‘.country’).data(data)
elements.enter().call(drawCircles)
- Patrón de actualización con la función sector.enter del data binding:
sector.enter()
.append(‘g’).call(drawSlices)
})
¿Cuál es el siguiente paso?
En este post, te has acercado a la función del patrón de actualización en D3 (Data-Driven Documents), sin embargo, su desarrollo se rige por la operación que te encuentres realizando. Por este motivo, te aconsejamos ajustar este conocimiento al desenvolvimiento de tu visualización de los datos.
De hecho, para hacerlo más en profundidad, desde KeepCoding te ofrecemos nuestro Bootcamp Full Stack Big Data, Inteligencia Artificial & Machine Learning. Gracias a esta formación intensiva, podrás aprender todo lo relacionado con las herramientas y lenguajes actuales y populares de mundo del manejo de los macrodatos de la mano de profesores expertos en el tema y con una amplia trayectoria dentro de este campo. ¡Inscríbete ahora!
