При работе с данными одним из наиболее важных аспектов является их представление. По этой причине существуют различные инструменты и методы визуализации данных. В этом уроке я покажу вам, как построить базовую линию в D3.js. D3.js — одна из самых мощных библиотек для визуализации данных в javascript. По этой ссылке вы можете найти несколько базовых руководств по изучению D3.js.
Код можно загрузить из моего репозитория Github, и он свободно вдохновлен этим примером, извлеченным из галереи данных d3.
Начиная
Описание данных и построение HTML-страницы
Во-первых, мы начинаем с данных. Мы рассматриваем данные о количестве туристов, прибывших в Италию, Францию, Испанию, Германию и Великобританию с 1990 по 2019 год.
У нас есть столбец для дат и еще 5 столбцов, по одному для каждой страны. Затем мы начинаем создавать HTML-код:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.js"></script> </head> <body> <div id="line"></div> </body> </html>
Нарисуйте базовый объект SVG
Определите поля и добавьте объект SVG в элемент div HTML.
Обратите внимание, что мы используем версию 4 d3. Внутри body
мы создаем div
, который будет содержать строку. Теперь мы можем написать скрипт, который будет вставлен в файл body
.
Мы устанавливаем размеры и поля графика:
var margin = {top: 50, right: 30, bottom: 30, left: 100}, width = 600 - margin.left - margin.right, height = 400 - margin.top - margin.bottom;
и мы добавляем элемент svg
к элементу div
, созданному в HTML-коде, и указываем их размеры. Мы также добавляем элемент группировки g
в svg
и транслируем его в margin.left
и margin.top
:
var svg = d3.select("#line") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
Загрузка и форматирование данных
Загрузите данные из CSV и отформатируйте их в соответствии с использованием приложения.
Теперь мы можем прочитать CSV, используя функцию d3.csv(data, preprocessing_function, processing_function)
, где data
представляют данные CSV, preprocessing_function
позволяет форматировать данные в соответствии с некоторыми критериями, processing_function
выполняет операции, необходимые для построения графика.
Мы определяем следующее preprocessing_function
(обратите внимание, что мы опускаем имя функции, потому что мы поместим его внутри функции d3.csv
и имя не требуется):
function(d){ return { date : d3.timeParse("%Y-%m-%d")(d.date), IT : d.IT , FR : d.FR, DE : d.DE, ES : d.ES, UK : d.UK} },
Единственная полезная вещь, которую мы делаем, — это анализ даты как даты объекта. Остальные поля остаются постоянными. Теперь мы можем определить processing_function
. Эта функция требует в качестве входных данных данные, содержащиеся в файле CSV.
Добавить ось и заголовок к графику
Добавьте на график оси X и Y и определите их диапазон и домен. Добавьте также заголовок
Мы добавляем ось X, используя шкалу времени. Мы определяем домен, который содержит диапазон возможных значений для оси и диапазон, который содержит размеры оси в изображении svg.
var x = d3.scaleTime() .domain(d3.extent(data, function(d) { return d.date; })) .range([ 0, width ]);
Мы добавляем ось внизу объекта svg:
svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x));
Точно так же мы строим ось Y, где домен определяется максимальным значением в данных. В нашем случае максимальное значение дает ряд Соединенного Королевства:
var y = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return +d.UK; })]) .range([ height, 0 ]);
Мы добавляем ось y слева от объекта svg:
svg.append("g") .call(d3.axisLeft(y));
Теперь мы создаем метку для оси Y, поворачиваем ее на 90 градусов и добавляем к объекту svg.
svg.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x",0 - (height / 2)) .attr("dy", "1em") .attr("font-size", "12px") .style("text-anchor", "middle") .text("Total Number of Tourists Arrivals");
Мы также можем добавить заголовок, просто добавив еще один текст вверху объекта svg:
svg.append("text") .attr("y", 0 - margin.top) .attr("x",(width / 2)) .attr("dy", "1em") .attr("font-weight", "bold") .attr("font-size", "16px") .style("text-anchor", "middle") .text("Total Number of Tourists Arrivals for Italy");
Добавьте линии на график
Добавьте строку для каждой страны
Мы можем определить другой цвет для каждой страны. Это можно сделать, определив палитру цветов. Мы определяем массив с именем countries
, содержащий идентификаторы всех стран.
var countries = ['IT', 'FR','DE','UK','ES']; var color = d3.scaleOrdinal() .domain(countries) .range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00'])
Мы можем добавить строку для каждой страны. Мы используем элемент svg с именем path
и определяем его свойства. Обратите внимание, что цвет зависит от страны.
for(var i = 0; i < countries.length; i++) { svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", function(d){ return color(countries[i]) }) .attr("stroke-width", 1.5) .attr("d", d3.line() .x(function(d) { return x(d.date) }) .y(function(d) { return y(d[countries[i]]) }) ) }
Добавьте легенду к графику
Нарисуйте легенду, чтобы понять линии
Мы также можем нарисовать легенду. Легенда состоит из прямоугольника, определяющего цвет, и текста, определяющего идентификатор страны.
var lineLegend = svg.selectAll(".lineLegend").data(countries) .enter().append("g") .attr("class","lineLegend") .attr("transform", function (d,i) { position = width - margin.right return "translate(" + position + "," + (i*20)+")"; }); lineLegend.append("text").text(function (d) {return d;}) .attr("transform", "translate(15,9)"); //align texts with boxes lineLegend.append("rect") .attr("fill", function (d, i) {return color(d); }) .attr("width", 10).attr("height", 10);
Резюме
В этом уроке я проиллюстрировал процедуру построения базовой линейной диаграммы в d3.js, низкоуровневой библиотеке JS для управления HTML и создания очень мощных объектов SVG. Подводя итог, шаги для построения графика следующие:
- На HTML-странице создайте статически тег
div
, который будет содержать диаграмму
Внутри JS-скрипта: - читать данные, например, из файлов CSV
- форматировать данные в соответствии с тем, для чего они используются
- получить div и повесить объект
svg
- повесить оси x и y на объект
svg
и назначить им домен (набор возможных значений) и диапазон (размеры) - повесить на объект
svg
линию, прямоугольник или точку для каждых данных - повесить легенду на объект
svg
(возможно) - повесить заголовок на объект
svg
.