Aprenda a crear un gráfico de líneas con D3.js

Utilice el poder de D3.js para dibujar hermosas representaciones de sus datos.

D3.js es una biblioteca de JavaScript de código abierto que se utiliza para crear hermosas representaciones de datos que podemos ver en cualquier navegador moderno. Con D3.js, podemos crear varios tipos de tablas y gráficos a partir de nuestros datos.

En este tutorial, crearemos un gráfico de líneas que muestra el índice de precios de Bitcoin de los últimos seis meses. Extraeremos datos de una API externa y representaremos un gráfico de líneas con etiquetas y un eje dentro del DOM.

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

Empezando

En primer lugar, importaremos la biblioteca D3.js directamente desde el CDN dentro de nuestro HTML.

También hemos agregado una etiqueta dentro de nuestro HTML para crear el gráfico de líneas dentro de él usando D3.js

Pasemos ahora a escribir nuestro código JavaScript. En primer lugar, queremos cargar nuestros datos del índice de precios de Bitcoin desde una API externa una vez que se haya cargado el DOM.

Obtener datos

var api = '//api.coindesk.com/v1/bpi/historical/close.json?start=2017-12-31&end=2018-04-01';
document.addEventListener("DOMContentLoaded", function(event) { fetch(api) .then(function(response) { return response.json(); }) .then(function(data) { //DO SOMETHING WITH DATA })});

En el código anterior, estamos usando el fetchmétodo para obtener los datos de una API externa. Luego lo analizamos usando el .json()método.

Ahora queremos convertir estos datos en pares clave / valor para que tengan el formato date:price. Para ello, vamos a enviar nuestros datos a otra función que los analizará y devolverá en la forma deseada.

Analizar datos

.....then(function(data) { var parsedData = parseData(data) })
function parseData(data) { var arr = []; for (var i in data.bpi) { arr.push( { date: new Date(i), //date value: +data.bpi[i] //convert string to number }); } return arr;}

Pasamos nuestros datos a una función parseDataque devuelve otra matriz de objetos. Cada objeto contiene una fecha y el precio de bitcoin en esa fecha en particular.

Una vez que tengamos los datos en nuestro formato requerido, enviaremos estos datos a la drawChartfunción en la que todo el código restante se escribirá usando D3.js para representar el gráfico de líneas.

.....then(function(data) { var parsedData = parseData(data); drawChart(parsedData);})

Seleccionar elemento SVG

En la drawChartfunción, primero seleccionamos nuestro elemento SVG y le proporcionamos algo de estilo.

function drawChart(data) {
 var svgWidth = 600, svgHeight = 400; var margin = { top: 20, right: 20, bottom: 30, left: 50 }; var width = svgWidth - margin.left - margin.right; var height = svgHeight - margin.top - margin.bottom;
 var svg = d3.select('svg') .attr("width", svgWidth) .attr("height", svgHeight);...

En el código anterior, estamos configurando el ancho y la altura del contenedor SVG seleccionándolo primero usando el select()método y luego usando el attr()método para asignar los atributos.

También hemos definido márgenes y estamos usando sus valores para calcular los atributos de ancho y alto del contenedor SVG. Estos valores de margen nos ayudarán más adelante a posicionar y mostrar nuestro gráfico correctamente.

Usando CSS, le hemos dado bordes a nuestro contenedor SVG:

 .line-chart { border: 1px solid lightgray; }

Hasta ahora, todavía no tenemos nada dentro de nuestro DOM:

A continuación, crearemos un elemento de grupo para contener nuestro gráfico de líneas, eje y etiquetas.

Crear y transformar elemento de grupo

...var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")" );

La agrupación de elementos ayuda a organizar elementos similares o relacionados. Aquí, después de renderizar un elemento de grupo, le proporcionamos alguna transformación.

D3 nos brinda varias opciones para transformar nuestros elementos. En el código anterior, estamos usando la translatepropiedad para reposicionar nuestro elemento de grupo con márgenes a la izquierda y arriba.

Agregar escalas

Ahora, queremos agregar escalas a nuestro gráfico.

var x = d3.scaleTime().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);

Como sabemos, nuestros datos consisten en fechas y el valor de Bitcoin en esas fechas. Por lo tanto, podemos asumir que el eje x contendría las fechas y el eje y contendría valores. Así es como podemos ver la variación en el gráfico de líneas con respecto al tiempo.

Y así, en el fragmento de código anterior, creamos una escala de tipo de tiempo en el eje xy de tipo lineal en el eje y. También proporcionamos estas escalas con los rangos según el ancho y la altura de nuestro contenedor SVG.

Crear una línea

Pasemos ahora a definir nuestra línea utilizando el d3.linemétodo. Definiremos los atributos xey de la línea pasando funciones anónimas y devolviendo el objeto de fecha y el valor de bitcoin para ese día en particular.

var line = d3.line() .x(function(d) { return x(d.date)}) .y(function(d) { return y(d.value)}) x.domain(d3.extent(data, function(d) { return d.date })); y.domain(d3.extent(data, function(d) { return d.value }));

Agregar ejes

Ahora vamos a agregar nuestros ejes izquierdo e inferior dentro de nuestro elemento de grupo para el gráfico de líneas. El eje izquierdo representará el valor de bitcoin mientras que el eje inferior muestra la fecha correspondiente.

g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) .select(".domain") .remove();

In the above code, we are appending a group element inside our main group and translating it at the very bottom our container. Then, we pass d3.axisBottom method in the call function where d3.axisBottom takes the parameter of x which is defined in the Add Scales section.

g.append("g") .call(d3.axisLeft(y)) .append("text") .attr("fill", "#000") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("Price ($)");

Similar to the bottom axis, we append another group element and then call on it the d3.axisLeft method which takes the parameter of y. Then, we also style our axis by assigning it different attributes and a label.

If we save and refresh the page, we can see our axes being rendered inside the DOM:

Append a Path

In the last step, we will be appending a path inside our main group element. This path will actually draw the line chart as per the values of the data.

We pass our dataset using the datum method and then set the attributes of fill color, stroke color, and width. In the end, we set the attribute of d which actually gives instruction to the SVG path about where to connect the points of the path.

g.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-width", 1.5).attr("d", line);

Here is the final result:

Conclusion

Congratulations! We have successfully created the line chart using D3.js. You can check out the official documentation of D3.js to learn more about different charts and graphs you can create.

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

I am Sohaib Nehal. I am a Full-Stack Web Application Developer. You can reach me at [email protected] or on Twitter @Sohaib_Nehal. Thank you :-)