Что такое Д3? Что мы должны знать, прежде чем задать этот вопрос?

Возможно, вы заметили, что статистики, аналитики или машинного обучения еще не было. Справедливости ради, мы не совсем в том месте, где наши знания о D3 и DS могут быть практически переплетены, но как только мы начнем визуализировать вещи (в следующем посте), будьте уверены, что для нас будет происходить некоторая наука о данных. говорить о. А пока давайте пройдемся по основам.

Представляем D3

Во-первых, D3 означает data-dразорванные dокументы (есть 3 Ds … умно), но я полагаю, что это также можно рассматривать как игру на представлении W3 (www.) мирмир мириде зэб. В любом случае, Мюррей говорит (своими словами), что когда кто-то смотрит на визуализацию D3, он видит определенный вид веб-документа, который управляется данными, а D3 — это структура, которая управляет этим. Более точно мы можем построить наше понимание D3 следующим образом:

D3 выполняет четыре основные функции:

  1. Загрузка (данные)
  2. Привязка (данные к элементам DOM)
  3. Преобразование (атрибуты элементов на основе данных)
  4. Переход (элементы между состояниями)

Каждая из этих функций одинаково важна по-своему, но вы можете видеть, что D3 — это больше, чем просто инструмент визуализации; опять же, это карта между данными (то, что мы не можем увидеть или реально воспринять) и визуальным стимулом (то, что мы можем видеть и воспринимать). На самом деле, он был изначально придуман его создателем(ями) как ядро визуализации, а не как инструмент или фреймворк. Таким образом, я считаю, что нам нужно думать о слове визуализация как о чем-то большем, чем просто описание красивых графиков и графиков с движущимися линиями и прыгающими кругами. Мы должны думать о визуализации как о визуальном представлении данных (это выходит за рамки просто красивых графиков и может включать сами цифры и буквы).

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

Альтернативы D3

Во вводной части Мюррей уделяет некоторое время обсуждению некоторых «альтернатив» D3. Я использую здесь цитаты, потому что некоторые из них на самом деле являются альтернативами, а некоторые являются ответвлениями D3 или обертками вокруг него. Вот те, которые мне показались наиболее интересными; посмотреть на себя!

sigma.js, paper.js, three, plotly, plottable и vega (о боже, vega!! вы могли бы остановиться прямо здесь, если вы действительно Мне нравится идея этого инструмента, и это ответвление Python Altair. Кроме того, существует так много плагинов для d3, что это сумасшедшая шина. Мне нравится d3.sketchy (особенно из-за объяснения, которое дает Мюррей, т. е. использовать его, чтобы показать клиентам, когда вы все еще находитесь на стадии эскиза проекта).

Основы технологии

Вторые 80% главы 2 посвящены тому, как работает Интернет (в основном, клиенты запрашивают данные, серверы предоставляют данные, а клиенты получают и отображают/выполняют то, что обслуживает сервер). ) и дает краткое изложение некоторых основных фреймворков, связанных с использованием Интернета.

HTML. Что?

HTML расшифровывается как Hyper-Text Markup Label. HTML — это язык, определяющий структуру веб-страницы, и поэтому он необходим для нашего понимания при использовании D3. Сначала я изо всех сил пытался найти хорошую аналогию для описания этого языка, но потом меня осенило:

Итак, моя жена находится в издательстве, и она недавно принесла домой эту классную старую коробку коробок коробок (ознакомьтесь с изображениями выше, а именно справа вверху). Я подумал, лол, что? И она сказала, что это ящик для шрифтов в принтере (один из многих, которые можно поместить в шкаф для шрифтов). В те времена, когда вам нужно было думать о том, как будет напечатан каждый символ на листе бумаги, у вас была гигантская машина для высокой печати, и в этой машине вы помещали различные блоки символов (я знаю людей, занимающихся издательством, я используя всю неправильную терминологию, пожалуйста, оголите меня) в местах, которые им нужно было бы напечатать, чтобы напечатать то, что вам нужно было напечатать. В каждой из маленьких коробок в ящике вы можете хранить блоки шрифтов, когда они используются, организованные так, как вы считаете нужным.

Я думаю, что в полном шкафчике со шрифтом шкаф, ящики и маленькие ящики можно рассматривать как HTML-код для одной страницы. Каждая отдельная коробка (не включая то, что в ней находится) является элементом. Эти элементы могут быть одним полем среди многих в «разделе» (например, тегом <div>), и это может быть ящик над другим в списке, может быть, и т. д. И любое из этих полей может быть текстом. . Об этом может быть трудно думать, но текст или данные сами по себе бесформенны и им придается форма (то, как они выглядят) с помощью CSS, который мы немного обсудим (это вы выбираете блок шрифта для использования). Используйте любой, какой хотите, в противном случае это значение по умолчанию (аналогия здесь, по крайней мере, немного нарушается, но вы можете представить себе ящик с волшебным шрифтом, в котором всегда есть какие-то блоки символов, если вы не замените их другими по вашему выбору).

Все это важно для нас в отношении D3, потому что, в конце концов, D3 не имеет смысла без браузера, а браузер мало что делает без HTML.

CSS

Итак, как мы уже говорили, CSS или каскадная таблица стилей — это то, что определяет, как данные отображаются в браузере. Он использует вещи, называемые правилами (которые вы могли видеть раньше) в таблице стилей, например,

div {
    color: blue
}

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

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

JavaScript

Моим любителям Python и R… я знаю, я знаю JavaScript. Дело в том, что в D3.js две последние буквы есть не просто так. Итак, это неизбежно; вы должны справиться со зверем. К счастью, вам не нужно быть профессионалом в области JavaScript, чтобы быть профессионалом в D3, поэтому не беспокойтесь о прохождении 6-месячного курса JavaScript для профессионалов Coursera, просто сделайте то, что вам нужно, чтобы ознакомиться с ним. Мне понравился курс Codecademy, но там их куча. Выберите один, поиграйте с ним немного и двигайтесь дальше :)

Несколько ошибок

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

  • == (преобразование типов) или === (строгое) фиаско. По сути, всегда используйте ===, если только вы не уверены, что вас не волнует тип, и вы уверены, что просто хотите что-то проверить, тогда и толькозатем используйте == . В противном случае вы можете запутаться, поэтому просто придерживайтесь строгого.
  • Если вы собираетесь определять что-то глобально (определения функций подходят), похоже, что хорошим практическим правилом (в веб-разработке) является определение объектов (например, классов в Python), а не новых переменных. . Итак, вместо того, чтобы говорить var zebras = 'me' и, возможно, «загрязнять глобальное пространство имен», сделайте свой объект визуализации var Viz = {}, а затем добавьте свои переменные в этот объект Viz.zebras = 'me'. Это убережет все ваши переменные от конфликта с уже определенными переменными на странице.
  • Всегда используйте var и дважды проверяйте window в консоли, чтобы убедиться, что то, что вы называете своим объектом (обсуждается во втором пункте), не конфликтует ни с чем на вашей странице.

SVG

Вот где D3 сияет. Раньше я не обращал на это внимания, но на самом деле вы можете использовать D3 для изменения любых типичных элементов HTML (например, div , p и т. д.) на веб-странице. Например, код

d3.select("#mything")
  .append("p")
  .text("New paragraph!");

переходит к элементу с идентификатором mything, добавляет тег p (абзац) и внутри этого тега абзаца пишет слова «Новый абзац!» Но захватывающая часть D3, которую мы все знаем и любим, — это то, что он делает с элементами SVG.

Что?

Масштабируемая векторная графика обеспечивает отображение концептуальной формы (круг, линия и т. д.) в пиксели на экране. В то время как изображение JPEG (скажем) имеет установленное количество пикселей (например, 500 пикселей на 500 пикселей), что означает, что масштабирование может деформировать или ухудшить изображение, SVG сохранит свою целостность, потому что сопоставление просто будет использовать больше или меньше пикселей в зависимости от заданных параметров. Это хорошее свойство, которое имеет решающее значение для того, почему визуализации D3 такие красивые.

Некоторые ошибки

Эта часть книги, где Мюррей рассказывает о SVG и о том, как они работают, действительно помогает подготовить почву для того, что будет с синтаксисом D3, но есть несколько вещей, которые он упоминает, которые, я думаю, стоит выделить особо:

  • Точка начала координат (0, 0), находящаяся в верхнем левом углу любой визуализации D3, связана с тем, что в конце дня этот элемент является элементом SVG! Элементы SVG — это не декартовы оси, это просто прямоугольники, как и все остальное в HTML. А блоки обычно воспринимаются так, как мы читаем страницу книги слева направо, сверху вниз. Итак, когда мы начинаем говорить об осях, помните, что D3 не столько «рисует», сколько размещает объекты на холсте SVG.
  • В SVG нет понятия свойства z, как в обычных элементах CSS-HTML. То есть вы не можете использовать z для SVG, чтобы определить, какой объект находится «поверх» другого. Вместо этого приоритет объекта определяется порядком написания кода. Чем ниже код объекта, тем больше он «поверх» других.
  • stroke объекта (как граница для таких вещей, как круги) всегда находится наполовину внутри и наполовину вне объекта. Итак, на изображении ниже эти три круга имеют одиночные штрихи (в данном случае толстые границы) с примененной к ним прозрачностью, чтобы показать, что «середина» границы на самом деле является окружностью круга. То же самое произойдет и с прямоугольниками.
  • rgba прозрачность применяется отдельно в fill и stroke. Так, например, на изображении ниже круги могут иметь заливку rgba(255, 0, 20, 0) (альфа равна 0 или нет прозрачности), а обводка rgba(255, 0, 20, .5). Используя opacity, вы можете одинаково применить прозрачность к обоим.
  • SVG не поддерживаются в старых браузерах, таких как Internet Explorer 8; рекомендуется предложить своим клиентам обновить свой браузер или вообще использовать другой.

Что будет?

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