¿Cómo definir las funciones en D3?

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

Llegar a definir las funciones en D3 (Data-Driven Documents) puede ser un proceso de inscripción de comandos en la consola un poco complicado; no obstante, es por medio de estas que se desarrolla una visualización de datos óptima. Por ello, en este post, te explicamos cómo definir las funciones en D3.

¿Cómo definir las funciones en D3?

Cuando se habla de cómo definir las funciones en D3 se hace referencia a las operaciones que instauran los factores clave para el desarrollo de la visualización de datos en esta librería de diseño visual.

¿Cómo definir las funciones en D3? 1

Definir constantes

Consiste en establecer los márgenes del lienzo con la siguiente fórmula:

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

Definir el SVG

SVG son los gráficos vectoriales escalables que se instauran a partir de los atributos. Su sintaxis es la siguiente:

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}))

¿Cómo definir las funciones en D3? 2

Definir escala

Se basa en los ejes (x, y) por medio de los que se establece la escala con la que se realizarán los gráficos. En la consola se presenta así:

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

Finalmente, los ejes se definen de forma más extensa, puesto que deben contar con los márgenes y la escala para instaurarse efectivamente:

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)

Sigue aprendiendo

En este post, has aprendido cómo definir las funciones en D3 (Data-Driven Documents), sin embargo, ¡todavía falta mucho por aprender sobre esta librería de diseño visual!

Para facilitarte el proceso de aprendizaje, desde KeepCoding te brindamos el Bootcamp Full Stack Big Data, Inteligencia Artificial & Machine Learning, con el que, en pocos meses, te convertirás en un experto del Big Data. ¡Apúntate!

👉 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]

¿Sabías que hay más de 5.000 vacantes para desarrolladores de Big Data sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!