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.
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)
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!
