При работе с данными одним из наиболее важных аспектов является их представление. По этой причине существуют различные инструменты и методы визуализации данных. В этом уроке я покажу вам, как построить базовую линию в 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.