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

Есть «известные известные. Есть вещи, которые мы знаем, что мы знаем. Есть известные неизвестные. То есть есть вещи, о которых мы теперь знаем, что мы не знаем. Но есть и неизвестные неизвестные. Есть вещи, о которых мы не знаем, которых мы не знаем». — Дональд Рамсфелд

Известные известные

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

Каковы основы?

Если вы еще не волшебник данных, подумайте о том, чтобы прочитать Data + Design, отличное руководство, которое превращает концепции данных в нечто более приемлемое для остальных из нас, начиная с того, как следует собирать необработанные данные, работая над пониманием результатов и очисткой. данные и обсуждение некоторых основ визуализации данных.

У вас есть данные? Если ответ «нет», это не идеально, но и не является полной блокировкой. Если вы не используете общедоступный API или фаза сбора данных не завершена до того, как вы начнете создавать визуализацию, скорее всего, вы будете работать с тестовым набором. Работа с тестовыми данными связана с некоторыми проблемами, которые необходимо решить, прежде чем погрузиться в них:

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

Что вы пытаетесь сообщить?

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

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

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

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

Почему люди используют D3?

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

  • Получите и проанализируйте свои данные.
  • Обработайте свои данные, очистив и отформатировав их.
  • Работайте со сложной анимацией, интерактивностью и динамическими данными.

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

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

Что D3 не делает?

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

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

Стоит ли использовать D3?

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

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

Известные Неизвестные

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

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

Не изобретайте велосипед больше, чем необходимо.

Простой поиск нужной функциональности в контексте D3 приведет к большому количеству рабочих примеров кода. Многие люди выкладывают свои проекты d3 на github в виде списков, которые вы просматриваете на bl.ocks.org.

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

Когда переработанный код не работает?

Предупреждение об утилизации кода: обратите внимание на номер версии. D3 существует уже некоторое время, и вы сможете определить версию в большинстве примеров кода. Если вы хотите использовать новейшую версию D3, но вкусный фрагмент кода, который вам нужен, устарел на две версии, вполне возможно, что он не будет работать для вас без некоторой модификации. Между версиями 3 и 4 в D3 произошли серьезные структурные изменения.

Я подошел к этому двумя способами; либо просматривая журнал изменений D3, либо просто просеивая текущую документацию. Многие исправления включали незначительные изменения, такие как изменение d3.scale.linear на d3.scaleLinear.

Поместите пример кода в свою среду.

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

Для себя я решил создавать свои визуализации в CodePen, чтобы не ждать компиляции моего javascript. У меня не было конечных точек API, и CodePen давал мне обратную связь гораздо быстрее, когда я придавал D3 желаемую форму. Я столкнулся с проблемами рендеринга в React, а при использовании fetch возникли некоторые проблемы с Internet Explorer 11. В какой-то степени это как раз то, на что похожа жизнь с использованием WebPack, React и Babel, и задним числом это 20/20, но я мог бы обнаружить эти проблемы раньше в игре, что могло бы привести к более тщательному изучению того, действительно ли D3 была правильной библиотекой для использования.

неизвестные неизвестные

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

Ты не одинок

Ни один человек не является островом! Другие разработчики — чрезвычайно ценный ресурс, и некоторым из них может даже понравиться D3 настолько, что они с удовольствием поговорят о нем с вами. Если бы я нашел время, чтобы связаться с моим сообществом разработчиков, прежде чем ворваться в проект на полной скорости, они, возможно, смогли бы предупредить меня о некоторых подводных камнях впереди. Я очень невинно понятия не имел (это могло бы объяснить более тысячи поисков в Google с D3 в запросе). Спросите их, на что был похож их опыт, с какими проблемами они сталкивались и о том, где они искали ответы, когда все пошло наперекосяк.

Считайте неудачу

Успех не гарантирован. Многих из нас приучили верить, что если мы хотим этого достаточно сильно и работаем достаточно часов, мы преодолеем все проблемы изящными решениями. Если вы начнете думать о том, как выглядит неудача в начале игры, возможно, вы сможете определить некоторые слабые места в своей стратегии. Что произойдет, если данные плохие? Что, если история, которую вы хотите рассказать с помощью ваших данных, не может быть эффективно передана с помощью вашей визуализации? Что делать, если у вас есть жесткий дедлайн, который вы не можете выполнить?

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

Обучение и работа в D3 были для меня отличным опытом и, вероятно, правильным инструментом для работы, которую мне нужно было сделать, но если бы я мог вернуться в прошлое и провести дополнительные предварительные исследования, моя история поиска могла бы состоять всего из 500 поисковых запросов Google.

Первоначально опубликовано на blog.planetargon.com.