Aprenda a crear un gráfico de barras con D3: un tutorial para principiantes

D3.js es la biblioteca de JavaScript más popular para crear representaciones visuales de sus datos. Sin embargo, es un poco complicado de aprender, así que creo que es importante empezar con suavidad.

En este tutorial, aprenderá a crear su primer gráfico de barras con D3. Te dará una introducción a los conceptos más importantes, mientras te diviertes construyendo algo.

También hemos creado un curso gratuito de D3.js sobre Scrimba. Compruébalo aquí.

Ahora comencemos.

La puesta en marcha

Usaremos la configuración más simple posible, simplemente importando la biblioteca D3 desde un CDN.

Escribiremos nuestro código D3 en la etiqueta del script. En segundo lugar, hemos agregado un elemento al DOM. Si desea jugar con el código mientras lee este tutorial, consulte este campo de juegos de Scrimba, que contiene la versión final del código.

Lo primero que haremos es seleccionar este elemento y darle un poco de estilo.

var svgWidth = 500; var svgHeight = 300; var svg = d3.select('svg') .attr("width", svgWidth) .attr("height", svgHeight) .attr("class", "bar-chart"); 

Le estamos dando un ancho y un alto, más una .bar-chartclase. En nuestro CSS, hemos diseñado la clase de esta manera:

.bar-chart { background-color: #C7D9D9; } 

Aquí está el resultado:

Ahora tenemos un bonito contenedor SVG donde podemos dibujar nuestro gráfico de barras. El código para hacerlo es un poco complejo, así que primero veamos todo y luego repasemos cada paso:

var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160]; var barPadding = 5; var barWidth = (svgWidth / dataset.length); var barChart = svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("y", function(d) { return svgHeight - d }) .attr("height", function(d) { return d; }) .attr("width", barWidth - barPadding) .attr("transform", function (d, i) { var translate = [barWidth * i, 0]; return "translate("+ translate +")"; }); 

seleccionar todo()

Lo primero que hacemos puede parecer un poco extraño, lo estamos haciendo .selectAll("rect"), sin embargo, todavía no hemos creado ningún elemento. Entonces, este método devuelve una selección vacía (una matriz vacía). Sin embargo, pronto crearemos elementos usando enter().append().

Esto puede parecer un poco confuso. Pero explicar cómo selectAll()funciona en combinación con enter().append()está fuera del alcance de este tutorial. Si quieres entenderlo correctamente, lee este artículo con mucha atención.

datos()

Luego, encadenamos el data()método y pasamos nuestro conjunto de datos. Los datos terminarán dictando la altura de cada barra.

entrar()

El siguiente paso es encadenar el enter()método. El enter()ve tanto en el conjunto de datos que ha pasado en data()  y en la selección que hicimos con selectAll('rect'), y entonces se trata de buscar “coincidencias”. Entonces crea un mapeo entre sus datos y el DOM.

Pero recuerde, el selectAll('rect')método devolvió una selección vacía , ya que todavía no hay elementos en el DOM. Sin embargo, el conjunto de datos tiene nueve elementos. Entonces no hay "coincidencias".

El enter()método a continuación, le permite crear un nuevo elemento en el DOM para cada elemento en el conjunto de datos que todavía no tiene un correspondiente elemento.

adjuntar()

En la siguiente línea, agregamos un elemento para cada uno de los elementos. Como este método sigue a continuación enter(), en realidad se ejecutará nueve veces, una para cada punto de datos que carece de un correspondiente en el DOM.

attr ()

El siguiente paso es decidir la forma de cada uno de los rectángulos (nuestras barras). Tenemos que darle cuatro atributos: altura, anchura, posición X y la posición Y . Usaremos el attr()método para todos estos.

Comencemos con la posición y:

.attr("y", function(d) { return svgHeight - d }) 

El primer parámetro dicta qué atributo queremos agregar: en este caso, la coordenada y de la barra. En el segundo, tenemos acceso a una función de devolución de llamada en la que vamos a devolver el valor que queremos que tenga nuestro atributo.

Aquí, obtenemos acceso al punto de datos en este paso del proceso de iteración (recuerde, este método se invoca una vez por elemento en la datasetmatriz). El punto de datos se almacena en el dargumento. Luego restaremos el punto de datos dado d, de la altura de nuestro contenedor SVG.

Las coordenadas X e Y siempre se calculan a partir de la esquina superior izquierda. Entonces, cuando restamos la altura del contenedor con el dvalor, obtenemos la coordenada y para la parte superior de la barra.

Para hacer que la barra se estire desde este punto hasta la parte inferior del contenedor SVG, necesitaremos darle una altura equivalente al valor del punto de datos:

.attr("height", function(d) { return d; }) 

El siguiente paso es darle un ancho:

.attr ("ancho", barWidth - barPadding)

Aquí, simplemente estamos pasando una expresión simple en lugar de la función de devolución de llamada, ya que no necesitamos acceso al punto de datos. Simplemente estamos tomando una base en la barWidthvariable que creamos más arriba, que es el ancho total del contenedor dividido por el número de barras. Para obtener un pequeño espacio entre cada una de las barras, también restaremos el relleno, que hemos definido como 5.

El paso final es establecer las coordenadas x. Esta expresión es un poco más compleja:

.attr("transform", function (d, i) { var xCoordinate = barWidth * i; return "translate("+ xCoordinate +")"; }); 

En este caso, estamos ante todo, tomando ventaja de un segundo parámetro de la devolución de llamada, i. Este es el índice del elemento dado en la matriz.

To set the coordinate for each of the bars, we’ll simply multiply the index with the barWidth variable. We’ll then return a string value which describes the transformation for the x-axis, for example "translate(100)". That would push the bar 100 pixels to the right.

And just like that, you have your very first bar chart in D3.js.

If you’re interested in learning more about D3.js, be sure to check out our free course on Scrimba.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.