TOC

Начало работы с визуализацией данных с использованием JavaScript и библиотеки D3

Вступление

  • D3.js * или D3 - это библиотека JavaScript. Его название означает D ata - D riven D ocuments (3 «D»), и оно известно как интерактивная и динамическая библиотека визуализации данных для Интернета.

Впервые выпущенная в феврале 2011 года, версия 4 D3 была выпущена в июне 2016 года. На момент написания последней стабильной версии была версия 4.4, и она постоянно обновляется.

D3 использует формат * Scalable Vector Graphic * или * SVG *, который позволяет визуализировать фигуры, линии и заливки, которые можно увеличивать или уменьшать без потери качества.

Это руководство поможет вам создать гистограмму с помощью библиотеки JavaScript D3.

Предпосылки

Чтобы максимально использовать этот учебник, вы должны иметь некоторое представление о языке программирования JavaScript, а также знание CSS и HTML.

Хотя вы будете использовать CSS для стиля D3, стоит отметить, что многие стандартные CSS, которые работают с HTML, работают по-разному в SVG - то есть вы будете использовать + stroke + вместо + border + и ` + заполните + вместо + color + `. Чтобы узнать больше, вы можете прочитать статью Mozilla Developer Network статью о SVG и CSS.

Мы будем использовать текстовый редактор и веб-браузер. В целях тестирования рекомендуется использовать инструмент для проверки и отладки JavaScript, HTML и CSS, например Firefox Tools Tools или https: / /developer.chrome.com/devtools[Chrome DevTools].

Шаг 1 - Создание файлов и ссылки D3

Начнем с создания каталога, в котором будут храниться все наши файлы. Вы можете называть это как хотите, мы назовем это здесь. Как только он будет создан, перейдите в каталог.

mkdir
cd

Чтобы использовать возможности D3, вы должны включить файл + d3.js + на своей веб-странице. Это около 16 000 строк и 500 КБ.

Давайте используем + curl для загрузки файла в ваш каталог.

Чтобы скачать компактную версию, которую лучше включить в проект, введите:

curl https://d3js.org/d3.v4.min.js --output d3.min.js

Если вы планируете читать код D3, вероятно, лучше получить несжатую версию с удобным для человека пробелом, набрав:

curl https://d3js.org/d3.v4.js --output d3.js

В этом учебном пособии мы будем использовать файл + d3.min.js, но если вы решите использовать удобочитаемую версию, то вместо этого ссылайтесь на` + d3.js` в своем HTML-файле.

Поскольку D3 версии 4 является модульной, вы можете уменьшить размер файла, используя только те модули, которые будете использовать.

Загрузив D3, давайте настроим наши CSS и HTML файлы. Вы можете выбрать любой текстовый редактор для работы с этим файлом, например + nano +. Мы начнем с CSS-файла + style.css, чтобы мы могли сразу же ссылаться на него из нашего HTML-файла.

nano style.css

Мы начнем со стандартной декларации CSS для стилизации страницы на 100% высоты и без полей.

html, body {
 margin: 0;
 height: 100%;
}

Вы можете сохранить и закрыть файл CSS на данный момент.

Затем мы создадим наш файл JavaScript, который назовем + barchart.js, потому что мы собираемся сделать гистограмму для этого примера. В этом файле будет жить большая часть нашей работы в D3, над которой мы начнем работать на следующем шаге. Поскольку нам не нужно открывать файл прямо сейчас, мы можем использовать команду + touch +.

touch barchart.js

А пока давайте соединим все эти элементы с файлом HTML, который мы назовем + barchart.html +:

nano barchart.html

Мы можем настроить этот файл, как и большинство других файлов HTML, и внутри него мы будем ссылаться на только что созданные файлы + style.css + и + barchart.js +, а также на скрипт + d3.min.js + ,

barchart.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Bar Chart</title>
   <link rel="stylesheet" type="text/css" href="style.css">

   <!-- Alternatively use d3.js here -->
   <script type="text/javascript" src="d3.min.js"></script>

 </head>

 <body>
   <script type="text/javascript" src="barchart.js"></script>
 </body>
</html>

HTML-файл может быть сохранен и закрыт на данный момент.

Шаг 2 - Настройка SVG в JavaScript

Теперь мы можем открыть файл + barchart.js с помощью нашего текстового редактора:

nano barchart.js

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

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

Далее нам нужно создать элемент SVG. Здесь мы разместим все наши фигуры. В D3 мы используем + d3.select +, чтобы сообщить браузеру, что нужно искать элементы.

Мы можем сделать это с помощью одной строки + d3.select (" body "). Append (" svg "); + но было бы лучше, если бы мы объявили ее как переменную, чтобы мы могли легко ссылаться на нее в нашем коде потом.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

Если мы сейчас загрузим + barchart.html + в выбранный нами веб-браузер, мы сможем проверить DOM или * Объектная модель документа * с нашими инструментами разработчика и наведением указателя мыши на поле SVG. В зависимости от вашего браузера, он может быть довольно маленьким.

изображение: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-svg-dom.png [D3 SVG виден в DOM]

Вернувшись в наш файл JavaScript, мы можем связать * атрибуты * с SVG, чтобы сделать его полной шириной и шириной веб-страницы. Мы будем использовать + .attr () + для атрибута. Хотя мы можем хранить все это в одной строке, разобрать это немного удобнее. Убедитесь, что вы переместили точку с запятой до конца объявления переменной.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")

Если вы перезагрузите страницу в своем браузере, вы должны увидеть прямоугольник, который занимает весь экран, когда вы наводите курсор мыши на DOM.

Шаг 3 - Добавление прямоугольников

Теперь, когда наш SVG готов, мы можем начать добавлять прямоугольники нашего набора данных в файл JavaScript.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

Как и в случае с + d3.select выше, мы говорим браузеру искать элементы. На этот раз это для массива прямоугольников. Так как это массив, мы используем + d3.selectAll + и мы используем + d3.selectAll (" rect ") +, потому что это массив прямоугольников. Если браузер найдет прямоугольники, он вернет их в выделении, если он пуст, он будет возвращен пустым. С D3 вы должны сначала выбрать элементы, которые вы собираетесь действовать.

Мы привязываем этот прямоугольный массив к данным, хранящимся в + dataArray +, с помощью + .data (dataArray) +.

Чтобы фактически добавить прямоугольник для каждого элемента в выделении (который соответствует массиву данных), мы также добавим + .enter (). Append (" rect "); +, чтобы добавить прямоугольники. В этом примере будет 9 прямоугольников, соответствующих 9 числам в массиве.

Если вы перезагрузите страницу сейчас, вы еще не увидите никаких прямоугольников, но если вы проверите DOM, вы увидите 9 прямоугольников, определенных там.

изображение: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/DOM-rectangles.png [прямоугольники D3, показанные в DOM]

Мы еще не установили атрибуты для прямоугольников, чтобы сделать их видимыми, поэтому давайте добавим их в.

Установка атрибутов для фигур

Мы можем добавлять атрибуты к фигурам так же, как мы определяли атрибуты для SVG, используя + .attr () +. Каждая фигура в D3 будет иметь различные атрибуты в зависимости от того, как они определены и нарисованы.

Наши прямоугольники будут принимать 4 атрибута:

  • + (" высота "," ") + для высоты прямоугольников

  • + (" width "," ") + для ширины прямоугольников

  • + (" x "," ") + для расстояния до левой части окна браузера

  • + (" y "," ") + для расстояния до верхней части окна браузера

Итак, если мы хотим, чтобы прямоугольники имели высоту, скажем, 250 пикселей, ширину 40 пикселей, 25 пикселей с левой стороны браузера и 50 пикселей сверху, мы напишем наш код следующим образом:

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")

Если мы обновим браузер, мы увидим, что все прямоугольники перекрываются:

изображение: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-overlapping-rectangles.png [прямоугольники D3 перекрываются по умолчанию черным]

По умолчанию фигуры в D3 закрашены черным цветом, но мы можем изменить это позже, поскольку нам нужно сначала обратиться к расположению и размеру прямоугольников.

Создание прямоугольников, отражающих данные

В настоящее время все прямоугольники в нашем массиве имеют одинаковую позицию вдоль оси X и не представляют данные с точки зрения высоты.

Чтобы изменить положение и размер прямоугольников, нам потребуется ввести functions для некоторых наших атрибутов. Добавление функций сделает значение динамическим, а не ручным.

Давайте начнем с изменения атрибута + x +. В настоящее время эта строка кода выглядит следующим образом:

       .attr("x","25")

Мы заменим цифру 25 пикселей на функцию. Мы передадим две переменные, определенные D3, в + function () +, обозначая точку данных и индекс. Индекс сообщает нам положение точки данных в массиве. Условно использовать + d + для точки данных и + i + для индекса, как в + function (d, i) +, но вы можете использовать любые переменные, которые захотите.

JavaScript будет проходить через + d + и + i +. Давайте добавим интервал для каждого индекса, который он перебирает, так, чтобы каждый прямоугольник был разнесен. Для этого мы можем умножить индекс + i + на определенное количество пикселей. Сейчас мы будем использовать 60, но вы можете решить, какой интервал вам подходит. Наша новая строка для атрибута оси X теперь выглядит так:

       .attr("x", function(d, i) {return i * 60;})

Однако, если мы сейчас запустим код, мы увидим, что прямоугольники расположены вплотную к левой стороне браузера, поэтому давайте добавим дополнительный интервал, скажем, 25 пикселей от края. Теперь наш полный код должен выглядеть так:

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("height","250")
         .attr("width","40")

         .attr("y","50");

И если мы обновим браузер на этом этапе, мы увидим что-то похожее на это:

изображение: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/9-d3-rectangles.png [прямоугольники D3 разнесены]

Теперь у нас есть прямоугольники, разнесенные вдоль оси X, представляющие каждый из элементов в нашем массиве. Далее, пусть высота прямоугольников отражает данные в массиве.

Теперь мы будем работать с атрибутом + height + и добавим функцию, аналогичную той, которую мы добавили в атрибут + x +. Начнем с передачи переменных + d + и + i + в + function + и возврата + d +. Напомним, что + d + обозначает точку данных.

         .attr("height", function(d, i) {return (d)})

Если вы запустите код сейчас, вы заметите две вещи. Во-первых, прямоугольники довольно малы, а во-вторых, они прикреплены к верхней части диаграммы, а не к ее нижней части.

изображение: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-chart-top-to-bottom.png [гистограмма D3 сверху вниз]

Чтобы учесть небольшой размер прямоугольников, давайте умножим возвращаемое + d +:

         .attr("height", function(d, i) {return (d * 10)})

Теперь размер прямоугольников больше, но они все еще отображаются сверху вниз.

Браузеры обычно читают веб-страницы сверху вниз слева направо, в то время как мы читаем гистограммы снизу вверх. Чтобы изменить положение прямоугольников, мы изменим атрибут + y +, чтобы вычесть пространство сверху.

Опять же, мы будем использовать + function (d, i) +, и мы будем возвращать значение Y, которое выше, чем самое высокое значение нашей гистограммы, скажем, 400. Мы вычтем возвращенную высоту + (d * 10) + из 400, так что теперь наша строка выглядит так:

         .attr("y", function(d, i) {return 400 - (d * 10)});

Давайте посмотрим на наш полный код JavaScript:

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")

         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})

В этот момент, когда мы перезагрузим нашу страницу, мы увидим гистограмму, которую мы можем прочитать снизу вверх:

изображение: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-bar-chart-black.png [гистограмма D3 в черном]

Теперь мы можем работать над стилизацией диаграммы.

Шаг 4 - Стиль с D3

Мы будем работать с нашим файлом CSS для стилизации наших фигур D3, но сначала, чтобы упростить эту работу, мы дадим нашим прямоугольникам имя класса в файле JavaScript, на которое мы можем ссылаться в нашем файле CSS.

Добавление класса аналогично добавлению любых других атрибутов с использованием точечной нотации. Мы будем называть класс + bar +, поскольку это гистограмма, но мы можем называть его как угодно, если все ссылки ссылаются на одно и то же имя. Наш синтаксис будет выглядеть так:

         .attr("class", "bar")

Мы можем добавить этот атрибут везде, где захотим. Сохранение его в качестве первого атрибута может облегчить обращение к нему в нашем файле CSS.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")

         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)});

Теперь давайте переключимся на наш файл + style.css +, который в настоящее время выглядит следующим образом:

style.css

html, body {
 margin: 0;
 height: 100%
}

Мы можем начать изменять наши прямоугольники, изменяя их цвет заливки, ссылаясь на только что созданный класс + bar +:

style.css

html, body {
 margin: 0;
 height: 100%
}

Здесь мы сделали прямоугольники синими, и мы можем альтернативно назначить им шестнадцатеричный код цвета, например:

.bar {
 fill: #0080FF
}

На данный момент наши прямоугольники выглядят так:

изображение: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-bar-chart-blue-fill.png [синяя заливка гистограммы D3]

Мы можем дать дополнительные значения прямоугольникам, такие как + stroke +, чтобы обвести прямоугольники определенным цветом, и + stroke-width +:

style.css

html, body {
 margin: 0;
 height: 100%
}

.bar {
 fill: #0080FF;


}

Это даст нашим прямоугольникам черный контур шириной 5 пикселей.

изображение: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/bar-chart-blue-fill-black-stroke.png [D3 гистограмма синяя заливка черный 5px штрих]

Кроме того, мы можем добавить интерактивность к нашей диаграмме, добавив стили для изменения цвета панели при наведении курсора мыши:

.bar:hover {
 fill: red
}

Теперь, когда мы наведем курсор мыши на один из прямоугольников, этот конкретный прямоугольник изменит цвет на красный:

изображение: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-red-hover-bar-chart.png [интерактивная цветная диаграмма D3]

Кроме того, вы можете стилизовать фигуры в вашем файле JavaScript, добавив дополнительные атрибуты. В блоке прямоугольника мы напишем их, как и другие атрибуты + .attr () +. Таким образом, добавление черного обводки вокруг прямоугольников будет записано как + .attr (« обводка »,« черный ») +. Давайте также добавим + stroke-width + из 5 пикселей и обязательно переместим точку с запятой вниз.

barchart.js

...
svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("class", "bar")
         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)})

         ;

Выбор за вами, как вы решите стилизовать свои фигуры и в каком файле. В этом примере мы будем работать с файлом + style.css + и ограничивать его заливкой цветом и наведением курсора:

style.css

html, body {
 margin: 0;
 height: 100%
}

.bar {
 fill: #0080FF
}

.bar:hover {
 fill: #003366
}

При работе с цветами в Интернете важно помнить свою аудиторию и стараться включать цвета, которые будут как можно более универсальными. Чтобы узнать больше о соображениях доступности цвета, вы можете проверить Acessibility & Me.

Шаг 5 - Добавление ярлыков

Наш последний шаг - добавить некоторые измеримые маркеры на наш график в виде меток. Эти метки будут соответствовать номерам в нашем массиве.

Добавление текста аналогично добавлению прямоугольников, которые мы делали выше. Нам нужно выбрать текст, а затем добавить его в SVG. Мы также свяжем его с + dataArray +, который мы создали. Вместо " rect ", мы будем использовать " text ", но общий формат аналогичен тому, что мы делали для добавления прямоугольников выше. Мы добавим эти строки в конец нашего файла + barchart.js +.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("class", "bar")
         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)});

Когда мы обновим ваш браузер, мы не увидим никакого текста на странице, но мы увидим его снова в вашей DOM:

изображение: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/DOM-text.png [текст D3 показан в DOM]

Если вы наведите курсор мыши на строки текста в DOM, вы увидите, что весь текст расположен в верхней части страницы, где X и Y равны 0. Мы изменим положение, используя те же формулы функций, которые мы использовали для прямоугольников, добавив атрибуты.

barchart.js

...
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})

         ;

Когда вы загрузите веб-страницу сейчас, вы увидите числа, плавающие над полосами.

изображение: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-labels-bar-chart.png [D3 текстовые метки с гистограммой]

Стоит отметить, что, поскольку это SVG, а не изображение, вы можете выбрать текст так же, как и любой другой текст, который вы видите на странице.

Отсюда вы можете начать изменять номера, изменив формулы функций. Возможно, вы захотите держать их плавающими над решеткой, например:

barchart.js

...
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})
         .attr("x", function(d, i)
         .attr("y", function(d, i) ;

В качестве альтернативы, вы можете сделать так, чтобы числа плавали над самими прямоугольниками, изменяя их положение по оси Y. Мы также хотим сделать это более читабельным, поэтому давайте добавим класс, к которому мы можем получить доступ из нашего файла + style.css +.

barchart.js

...
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})

         .attr("x", function(d, i) {return (i * 60) + 36})
         .attr("y", function(d, i) ;

В нашем файле + style.css + мы сделаем текст белым и без засечек, добавив следующие строки в конец нашего файла.

style.css

...
.text {
 fill: white;
 font-family: sans-serif
}

изображение: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-white-text-labels.png [D3 текстовые метки белого цвета с гистограммой]

Вы можете изменять текст сколько угодно с помощью позиционирования и стиля. Например, вы также можете изменить атрибут + font-size в файле` + style.css`.

Законченный код и улучшения кода

На этом этапе у вас должна быть полностью работающая гистограмма, отображаемая в библиотеке JavaScript D3. Давайте посмотрим на все наши файлы кода.

barchart.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Bar Chart</title>

   <!-- Reference style.css -->
   <link rel = "stylesheet" type="text/css" href="style.css">

   <!-- Reference minified version of D3 -->
   <script type="text/javascript" src="d3.min.js"></script>
 </head>

 <body>
   <script type="text/javascript" src="barchart.js"></script>
 </body>
</html>

style.css

html, body {
 margin: 0;
 height: 100%
}

/*Rectangle bar class styling*/

.bar {
 fill: #0080FF
}

.bar:hover {
 fill: #003366
}

/*Text class styling*/

.text {
 fill: white;
 font-family: sans-serif
}

barchart.js

// Create data array of values to visualize
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

// Create variable for the SVG
var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

// Select, append to SVG, and add attributes to rectangles for bar chart
svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("class", "bar")
         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)});

// Select, append to SVG, and add attributes to text
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})
          .attr("class", "text")
          .attr("x", function(d, i) {return (i * 60) + 36})
          .attr("y", function(d, i) {return 415 - (d * 10)});

Этот код полностью работает, но вы можете многое сделать для его улучшения. Например, вы можете использовать элемент группы SVG для группировки элементов SVG, что позволяет вам изменять текст и прямоугольники в меньшем количестве строк кода.

Вы также можете получить доступ к данным различными способами. Мы использовали массив для хранения наших данных, но вы можете захотеть визуализировать данные, к которым у вас уже есть доступ, и это может быть значительно больше данных, чем было бы хорошо в массиве. D3 позволит вам работать с несколькими различными типами файлов данных:

  • HTML

  • JSON

  • Простой текст

  • CSV (значения через запятую)

  • TSV (значения, разделенные табуляцией)

  • XML

Например, вы можете иметь файл JSON в каталоге вашего сайта и подключить его к файлу JavaScript

d3.json("myData.json", function(json) {
// code for D3 charts in here
});

Вы также можете комбинировать библиотеку D3 с другими интерактивными функциями, которые вы, возможно, уже знаете из ванильного JavaScript.

Заключение

В этом уроке мы создали гистограмму в библиотеке JavaScript D3. Вы можете узнать больше о d3.js, посетив D3 API на GitHub.

Другие языки программирования предлагают другие способы визуализации данных, которые не ограничиваются веб-браузерами. Отсюда вы можете узнать, как использовать matplotlib для построения данных с помощью Python.

Related