Навчіться створювати лінійну діаграму за допомогою D3.js

Використовуйте потужність D3.js, щоб намалювати красиві зображення ваших даних.

D3.js - це бібліотека JavaScript з відкритим кодом, яка використовується для створення чудових подань даних, які ми можемо переглянути в будь-якому сучасному браузері. Використовуючи D3.js, ми можемо створювати різні види діаграм та графіків на основі наших даних.

У цьому підручнику ми збираємося створити лінійну діаграму, що відображає Індекс цін на біткойни за останні шість місяців. Ми будемо втягувати дані із зовнішнього API та відображати лінійну діаграму з мітками та віссю всередині DOM.

Ми також створили безкоштовний курс D3.js на Scrimba. Перевірте тут.

Починаємо

Перш за все, ми імпортуємо бібліотеку D3.js безпосередньо з CDN всередину нашого HTML.

Ми також додали тег всередину нашого HTML, щоб створити всередині нього лінійну діаграму за допомогою D3.js

Тепер перейдемо до написання нашого коду JavaScript. Перш за все, ми хочемо завантажити наші дані Індексу цін на біткойни із зовнішнього API після завантаження DOM.

Отримати дані

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

У наведеному вище коді ми використовуємо fetchметод для отримання даних із зовнішнього API. Потім ми аналізуємо його, використовуючи .json()метод.

Тепер ми хочемо перетворити ці дані у пари ключ / значення, щоб вони мали формат date:price. Для цього ми збираємося надіслати наші дані іншій функції, яка проаналізує і поверне їх у бажаній формі.

Розбір даних

.....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;}

Ми передаємо наші дані функції, parseDataяка повертає інший масив об’єктів. Кожен об’єкт містить дату та ціну біткойна на ту конкретну дату.

Після того, як ми отримаємо дані у необхідному форматі, ми надішлемо ці дані drawChartфункції, в якій весь залишився код буде записаний за допомогою D3.js для візуалізації лінійної діаграми.

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

Виберіть елемент SVG

У drawChartфункції ми перш за все вибираємо наш елемент SVG і надаємо йому певний стиль.

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);...

У наведеному вище коді ми встановлюємо ширину та висоту контейнера SVG, спочатку вибравши його за допомогою select()методу, а потім використовуючи attr()метод для призначення атрибутів.

Ми також визначили поля та використовуємо їх значення для обчислення атрибутів ширини та висоти контейнера SVG. Ці значення полів допоможуть нам пізніше у правильному розташуванні та відображенні нашої діаграми.

Використовуючи CSS, ми встановили межі для нашого SVG-контейнера:

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

Поки що в нашому DOM ще нічого немає:

Далі ми збираємося створити елемент групи, який міститиме нашу лінійну діаграму, вісь та мітки.

Створення та перетворення групового елемента

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

Групування елементів допомагає організувати подібні або суміжні елементи разом. Тут, після відтворення групового елемента, ми забезпечуємо йому певне перетворення.

D3 дає нам різні варіанти перетворення наших елементів. У наведеному вище коді ми використовуємо translateвластивість для перестановки елемента нашої групи з полями зліва та зверху.

Додайте ваги

Тепер ми хочемо додати шкали до нашої діаграми.

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

Як ми знаємо, наші дані складаються з дат та вартості біткойнів на ці дати. Отже, можна припустити, що вісь x міститиме дати, а вісь y міститиме значення. Ось як ми можемо побачити зміни в лінійній діаграмі щодо часу.

Отже, у наведеному вище фрагменті коду ми створили шкалу типу часу на осі x та лінійного типу на осі y. Ми також пропонуємо ці ваги з діапазонами відповідно до ширини та висоти нашого контейнера SVG.

Створіть лінію

Тепер перейдемо до визначення нашої лінії за допомогою d3.lineметоду. Ми визначатимемо атрибути x та y рядка, передаючи анонімні функції та повертаючи об’єкт дати та значення біткойна для того конкретного дня.

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

Додайте осі

Тепер ми збираємося додати ліву та нижню осі всередині елемента групи для лінійної діаграми. Ліва вісь буде представляти значення біткойна, тоді як нижня вісь відображає відповідну дату.

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