Как создавать диаграммы из внешних источников данных с D3.js

Узнайте, как создавать потрясающие визуализации данных с помощью D3.Js версии 5

По оценке Forbes в середине 2018 года, человечество в совокупности генерирует около 2,5 квинтиллионов байтов данных каждый день. Несмотря на то, что на анализ этих данных с помощью алгоритмов машинного обучения уходит много усилий, мощные визуализации помогают описать результаты и представить вещи в правильной перспективе. Визуализация данных также помогает аудитории быстрее обрабатывать данные и запоминать ключевые моменты. За последнее десятилетие вырос спрос и на специалистов по визуализации.

D3 - это библиотека на JavaScript для создания визуализаций для Интернета. Первая версия D3 была выпущена еще в 2011 году, и ее поддержка со стороны сообщества возросла. Хотя для более ранних версий D3 кривая обучения была немного крутой, последние версии были проще для начинающих JavaScript. Большинство визуализаций, созданных для Интернета, основаны на динамических источниках данных, поэтому цель этой публикации - дать вам возможность создавать диаграммы в D3 с внешними источниками данных.

Совет: используйте Бит для создания, совместного использования и синхронизации компонентов диаграммы (или любого другого компонента JS) между различными приложениями. Не тратьте время на настройку пакетов или копирование кода. Попробуйте.

Гистограмма в D3

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

<script src="https://d3js.org/d3.v5.min.js"></script>

Вы обнаружите, что большинство учебных пособий по D3 в Интернете основаны на версиях 3 и 4. Однако мы будем использовать последнюю версию D3, v5, которая была выпущена в начале 2018 года. Последний выпуск D3 длился около месяца. назад.

Журнал изменений D3.js содержит подробные изменения по версиям. Для целей этой публикации вы должны отметить, что способ загрузки данных в версии 4 отличается от версии 5.

Во-первых, давайте определим заголовок и данные.

var title = "Comments on Posts",
  data = [{type: "Post A", amount: 4},
         {type: "Post B", amount: 2},
         {type: "Post C", amount: 7},
         {type: "Post D", amount: 5},
         {type: "Post E", amount: 6}]
;

Поскольку вы уже включили сценарий D3, вы можете выполнить любое действие, связанное с D3, с помощью глобальной переменной d3. Затем создайте заголовок для диаграммы, добавив элемент заголовка в тег body. Если вы создаете диаграмму в определенном элементе div, вы можете выбрать этот элемент перед созданием элемента заголовка для заголовка. В качестве альтернативы, если вы знаете, что заголовок будет таким же, вы можете добавить его во время загрузки страницы без использования D3.

d3.select("body")
  .append("h3")
  .text(title);

Прежде чем продолжить, вы можете добавить собственный CSS.

body {
  background-color: #3c3c3c;
  color: #cfcfcf;
}
div {
  line-height: 15px;
  margin-bottom: 3px;
  background-color: grey;
}

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

d3.select("body")
  .selectAll("div")
  .data(data)
  .enter()
  .append("div")
  .style("width", function(d) { return d.amount * 40 + "px"; })
  .style("height", "15px");

Ваша простая гистограмма готова. Посмотреть график можно на CodePen. Чтобы дополнительно добавить метки к полосам, вам нужно будет перебрать данные и добавить текстовый элемент к соответствующему элементу div, представляющему полосу.

Давайте теперь попробуем поработать с внешними файловыми источниками.

Загрузка данных из внешнего источника данных

Когда объем данных достаточно велик по сравнению с размером веб-страницы (в среднем ~ 2 МБ), это может создать неудобства из-за увеличения времени загрузки, если вы объявите эти данные встроенными. Поэтому рекомендуется сохранить его в файл. Те же данные в файле CSV (значения, разделенные запятыми) выглядят примерно так.

Данные, которые мы использовали для создания гистограммы выше, были загружены на GitHub, чтобы действовать как внешний источник. Файл CSV (значения, разделенные запятыми) содержит значения, разделенные запятыми. Содержимое файла выглядит следующим образом:

type,amount
Post A,4
Post B,2
Post C,7
Post D,5
Post E,6

Чтобы прочитать файл CSV через D3, вы можете использовать функцию csv(). Мы дополнительно используем функцию синтаксического анализа d3.autoType для преобразования строк в наборе данных в объекты JavaScript. В документации перечислены правила переназначения (например, пустое значение становится null). Чтобы увидеть преобразованный объект, вы можете распечатать данные на консоли после его загрузки с помощью функции then().

d3.csv('https://raw.githubusercontent.com/sdaityari/my_git_project/master/posts.csv',
  d3.autoType)
  .then(function (data) {
    console.log(data)
  });

Вот вывод из консоли инструментов разработчика Chrome, который показывает объект JavaScript после преобразования.

(5) [{…}, {…}, {…}, {…}, {…}, columns: Array(2)]
0: {type: "Post A", amount: 4}
1: {type: "Post B", amount: 2}
2: {type: "Post C", amount: 7}
3:
  amount: 5
  type: "Post D"
  __proto__: Object
4: {type: "Post E", amount: 6}
columns: Array(2)
  0: "type"
  1: "amount"
  length: 2
  __proto__: Array(0)
  length: 5
__proto__: Array(0)

Аналогичная функция существует для загрузки других типов внешних файлов. Чтобы загрузить текстовый файл без парсера, используйте следующий код:

d3.text("/path/to/file.txt").then(function(text) {
  // do something
});

Если ваш файл разделен другим разделителем, вы можете использовать функцию dsv(). Единственное отличие здесь - это первый аргумент, который является разделителем файла. Вы также можете использовать функцию dsv() для загрузки файла CSV с использованием разделителя запятой.

d3.dsv(',', 'https://raw.githubusercontent.com/sdaityari/my_git_project/master/posts.csv',
  d3.autoType)
  .then(function (data) {
    console.log(data)
  });

Кроме того, в вашем распоряжении также следующие функции:

• json(): для загрузки файла, содержащего данные в формате JSON
• xml(): для загрузки файла, содержащего данные XML
• image(): для загрузки изображения
• svg(): для загрузки векторной графики

Создание диаграммы с внешним источником данных

Теперь, когда вы успешно загрузили данные из внешнего источника, давайте создадим диаграмму.

d3.csv('https://raw.githubusercontent.com/sdaityari/my_git_project/master/posts.csv', d3.autoType).then(function (data) {
  d3.select("body")
    .selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .style("width", function(d) { return d.amount * 40 + "px"; })
    .style("height", "15px");
});

Единственное отличие от предыдущей функции состоит в том, что вызов data() может выполняться внутри функции csv(). Поскольку имена столбцов совпадают, остальной код остается без изменений.

Вот Демо CodePen для той же гистограммы с внешним источником данных.

Данные в реальном времени

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

• Поймать триггер события и вызвать функцию
• Перезаписать или обновить существующие данные
• Обновите визуальный элемент, содержащий диаграмму

Вот демонстрация этого процесса с использованием Python и веб-сокетов.

Последние мысли

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

Кроме того, не стесняйтесь проверять эти компоненты диаграммы в облаке Bit (установите их с помощью NPM или импортируйте с помощью Bit, чтобы разработать их в своем собственном проекте):

Учить больше