Cómo crear tu primer gráfico de barras con D3.js

Un tutorial de visualización de datos para novatos.

D3.js es la biblioteca de JavaScript más popular para crear representaciones visuales de sus datos. Sin embargo, es un poco difícil de aprender, así que creo que es importante comenzar suavemente.

En este tutorial, aprenderá cómo 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 creamos un curso gratuito de D3.js sobre Scrimba. Compruébalo aquí.

Ahora comencemos.

La puesta en marcha

Utilizaremos 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 quieres jugar con el código mientras lees este tutorial, echa un vistazo a este patio de juegos 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 ("ancho", svgWidth)
    .attr ("altura", svgHeight)
    .attr ("clase", "gráfico de barras");

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

.gráfico de barras {
    color de fondo: # C7D9D9;
}

Aquí está el resultado:

Ahora tenemos un buen 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 veamos cada paso:

conjunto de datos var = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var barPadding = 5;
var barWidth = (svgWidth / dataset.length);
var barChart = svg.selectAll ("rect")
    .data (conjunto de datos)
    .entrar()
    .append ("rect")
    .attr ("y", función (d) {
        return svgHeight - d
    })
    .attr ("altura", función (d) {
        retorno d;
    })
    .attr ("ancho", barWidth - barPadding)
    .attr ("transformar", función (d, i) {
         traductor var = [ancho de barra * i, 0];
         volver "traducir (" + traducir + ")";
    });

seleccionar todo()

Lo primero que hacemos puede parecer un poco extraño, 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 funciona selectAll () en combinación con enter (). Append () está fuera del alcance de este tutorial. Si quieres entenderlo correctamente, lee este artículo con mucho cuidado.

datos()

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

entrar()

El siguiente paso es encadenar el método enter (). Enter () mira tanto el conjunto de datos que pasó a data () como la selección que hicimos con selectAll ('rect'), y luego trata de buscar "coincidencias". Por lo tanto, crea un mapeo entre sus datos y el DOM.

Pero recuerde, el método selectAll ('rect') 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 método enter () luego le permite crear un nuevo elemento en el DOM para cada elemento del conjunto de datos que aún no tiene un elemento correspondiente.

adjuntar()

En la siguiente línea, agregamos un elemento para cada uno de los elementos. Como este método sigue después de 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). Necesitamos darle cuatro atributos: altura, ancho, posición xy posición y. Usaremos el método attr () para todo esto.

Comencemos con la posición y:

.attr ("y", función (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í, tenemos 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 matriz del conjunto de datos). El punto de datos se almacena en el argumento d. 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 valor d, obtenemos la coordenada y para la parte superior de la barra.

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

.attr ("altura", función (d) {
    retorno 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 nos basamos en la variable barWidth que creamos más arriba, que es el ancho total del contenedor dividido por la cantidad de barras. Para obtener un pequeño espacio entre cada una de las barras, también restaremos un relleno, que definimos como 5.

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

.attr ("transformar", función (d, i) {
    var xCoordinate = ancho de barra * i;
    devuelve "translate (" + xCoordinate + ")";
});

Aquí, en primer lugar, estamos aprovechando un segundo parámetro en la devolución de llamada, i. Este es el índice del elemento dado en la matriz.

Para establecer la coordenada para cada una de las barras, simplemente multiplicaremos el índice con la variable barWidth. Luego devolveremos un valor de cadena que describe la transformación para el eje x, por ejemplo "translate (100)". Eso empujaría la barra 100 píxeles hacia la derecha.

Y así, tienes tu primer gráfico de barras en D3.js.

Si está interesado en obtener más información sobre D3.js, asegúrese de consultar el curso gratuito sobre Scrimba.

¡Gracias por leer! Mi nombre es Per, soy cofundador de Scrimba y me encanta ayudar a las personas a aprender nuevas habilidades. Sígueme en Twitter si deseas recibir notificaciones sobre nuevos artículos y recursos.