¿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:

Algunos de nuestros reconocimientos:

Premios KeepCoding

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]

La IA no te quitará el trabajo, lo hará quien sepa usarla

Conviértete en Data Scientist con el único Bootcamp que además te formará en Inteligencia Artificial Generativa para potenciar tu perfil.