¿Cómo definir las etiquetas en D3?

Autor: | Última modificación: 23 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Definir las etiquetas en D3 (Data-Driven Documents) es uno de los procesos más importantes para llevar a cabo la visualización de los datos. Por medio de estas se instauran los aspectos básicos para desarrollar una representación gráfica.

Recuerda que esta esquematización de la información es de suma importancia con elementos como las visualizaciones interactivas, los cuadros de mando y los gráficos que destacan el valor de los datos y facilitan la comprensión de la información.

Por ello, en este post, te explicamos cómo definir las etiquetas en D3 (Data-Driven Documents).

¿Cómo definir las etiquetas en D3?

Definir las etiquetas en D3 (Data-Driven Documents) se refiere al procedimiento de, a través de determina sintaxis, establecer los respectivos comandos con el fin de personalizar la visualización de los datos.

Por otra parte, cuando se hace referencia a definir las etiquetas en D3 se piensa en las siguientes etiquetas: las constantes, la etiqueta SVG, la escala y los ejes. Te las detallamos a continuación:

Definir las constantes

En primer lugar, definir las constantes consiste en establecer el lienzo de la visualización, es decir, los márgenes de este. De forma que tendrás que estipular un margins top, margins right, margins bottom y margins left por medio de unos valores poniendo como límite el rango con los márgenes.

¿Cómo definir las etiquetas en D3? 1

Debes tener en cuenta que tienes que instaurarlos según la escala y el tamaño de la gráfica. A continuación, te exponemos cuáles son los distintos comandos para establecer cada uno de estos factores:

const width = 800
const height = 600
const margin = {
top: 10,
right: 10,
bottom: 40,
left: 70
}

Declarar el SVG

SVG es una entidad abstracta que no contiene nada, es solamente una determinación de coordenadas. Por ello, necesitarás el siguiente comando para definir la etiqueta de SVG:

const svg = d3.select(«#chart»)
.append(«svg»)
.attr(«id», «svg»)
.attr(«width», width)
.attr(«height», height)
const elementGroup = svg.append(«g»)
.attr(«id», «elementGroup»)
.attr(‘transform’, translate(${0}, ${margin.top}))

Definir la escala

Escala en D3 consiste en la realización de las gráficas según la escala que se establezca y no a tamaño real. Para ello es necesario definirla de la siguiente manera:

let y = d3.scaleBand()
.range([0, height – margin.top – margin.bottom])
.paddingInner(0.2).paddingOuter(0.05)
let x = d3.scaleLinear()
.range([50, width – margin.left – margin.right])

Definir los ejes

Los ejes son funciones que ya vienen en D3 (Data-Driven Documents), puesto que esta librería acepta los ejes directamente. De manera que lo único que tendrás que hacer es declarar los ejes, es decir, establecerlos por medio del siguiente comando:

const axisGroup = svg.append(«g»)
.attr(«id», «axisGroup»)

const xAxisGroup = axisGroup
.append(«g»)

.attr(«id», «xAxisGroup»)
.attr(‘transform’, translate( ${margin.left}, ${height - margin.bottom}))

const yAxisGroup = axisGroup
.append(«g»)
.attr(«id», «yAxisGroup»)

.attr(‘transform’, translate( ${margin.left}, ${margin.top}))
const xAxis = d3.axisBottom()

.scale(x).ticks(5).tickSize(-height)
const yAxis = d3.axisLeft().scale(y)

Aprende más sobre el Big Data

A través de este post, te hemos explicado cómo definir las etiquetas en D3 (Data-Driven Documents) y, a pesar de que este es uno de los procesos más importantes, debes tener en cuenta muchos otros factores para el desarrollo de una visualización de datos óptima.

Por este motivo, desde KeepCoding te presentamos el Bootcamp Full Stack Big Data, Inteligencia Artificial & Machine Learning. Durante su desarrollo, no solo tendrás acceso a los módulos oficiales del bootcamp, sino que también podrás acceder a una gran variedad de material extra y webinars¡Inscríbete ahora y conviértete en un experto!

👉 Descubre más del Big Data, Inteligencia Artificial & Machine Learning Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]