Что, почему, как: D3.JS

Краткий обзор того, как работает D3.js

В своем последнем посте я рассмотрел некоторые варианты синтаксиса Python и JavaScript. В этом посте я хочу кратко рассмотреть один из наиболее рекомендуемых инструментов визуальной библиотеки, доступных для JS. Документы, управляемые данными, также более известные как D3.js, — это визуальная библиотека, которая для JS является такой же, как matplotlib для Python.

D3 работает на основе HTML (который используется практически для отображения настроек всех веб-страниц). С помощью D3 мы можем создавать статические таблицы в телах HTML, подобно тому, как мы делаем это в Python с Pandas, SQL или любыми визуальными инструментами. Но D3 также можно использовать для создания динамического изображения, как мы могли бы сделать с SeaBorn или создать панель управления в Python. Создание информационной панели в Python требует от вас знания HTML-кодов и сложных «вызывающих» функций, которые позволяют вам визуализировать что-то конкретное, вызывая определенные атрибуты этого.

В HTML код примера будет выглядеть примерно так:

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i);
  paragraph.style.setProperty("color", "blue", null);
}

Однако, если мы используем D3, те же фрагменты кода можно сократить до этого:

d3.selectAll("p").style("color", "blue");

Он создал простой однострочный код, в котором все элементы с тегом «P» будут окрашены в синий цвет на странице отображения HTML (также известной как панель инструментов или страница просмотра). Но это еще не все. Вы можете дополнительно настроить, указав термины, как это сделано ниже:

d3.select("body").style("background-color", "black");

Это выделит все элементы «тела» и сделает фон черным. Вы даже можете добавить эффект перехода, сделав это:

d3.select("body").transition()  #just add transition before style
    .style("background-color", "black");

Это отличные примеры статических изменений. Как насчет того, чтобы мы хотели, чтобы изменение происходило каждый раз, когда мы обновляем страницу или повторно посещаем ее? Это был бы пример динамических изменений, и хотя он немного сложнее, его можно сделать, используя следующий пример:

#To randomly change or add colors
d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
#To change color between even and odd numbers
d3.selectAll("p").style("color", function(d, i) {
  return i % 2 ? "#fff" : "#eee";
});

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

Ниже я приведу ссылки на некоторые из моих любимых работ, но ссылка на всю галерею также будет доступна в конце.

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

Вот динамическая диаграмма, которая обнаруживает возможное столкновение с объектом (в данном случае с вашей мышью), и дисплей удаляется от него. Это напоминает мне старые изображения рыбы в аквариуме, которые были очень популярны в Google Blogspot в начале 2010-х годов.

И, наконец, изображение, похожее на классическую панель инструментов или график линейной регрессии на IPO Facebook:

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