Введение

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

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

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

D3.js может использовать данные из статического JSON- или CSV-файла, а также получать данные из API. Мы также можем создать сетку данных, чтобы можно было легко обновлять данные.

Гистограммы

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

Обратите внимание, что гистограмма - это не то же самое, что гистограмма, хотя внешне они похожи. Гистограмма не содержит категориальных данных, таких как страны (в которых точка данных однозначно относится к той или иной категории). Скорее, она показывает данные, которые образуют континуум, но разбиты на различные диапазоны, называемые бинами. Например, набор данных, где ось x показывает расстояние до определенной точки, может быть разбит на диапазоны. Однако эти диапазоны произвольны и обычно выбираются для наглядного отображения данных.

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

Линейные диаграммы

Line Charts and Area Charts displays data points over a continuous interval or time period. Depending on the curve used to connect the lines it shows trends and patterns over time. The horizontal, or x-axis represents the independent variable (often time), while the vertical axis represents the dependent variable (the value which has been measured). If the horizontal axis represents time this can be labelled using standard units of time and date, such as seconds, minutes, months and years. D3.js is extremely flexible in this regard. Date and time labels can be localized (for example, by using words in another language to represent the months).

Линейные диаграммы особенно удобны для отображения нескольких наборов данных, которые каким-либо образом связаны между собой. Эти наборы данных обычно используют одну и ту же ось x, но могут иметь разные масштабы и разные оси y. Они особенно полезны для выявления тенденций в различных наборах данных (например, для сравнения времени пика заболеваемости в разных странах). В данном примере для переключения между различными комбинациями наборов данных используется пользовательский интерфейс. Обратите внимание, что D3.js может автоматически регулировать масштаб вертикальной оси при изменении данных.

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

A variation on the line chart is the area chart, in which the area under the line is shaded. This is also shown in the example on the Line Chart page

Круговые диаграммы

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

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

Метафора пирога может быть расширена путем вытягивания одной из частей пирога. Это можно сделать статически или с помощью эффекта наведения мыши, как показано на странице Pie Chart. Такая диаграмма называется развернутой круговой диаграммой. Более подробная информация может быть дана для покомпонентной секции.

Диаграммы солнечных лучей

Диаграммы в виде солнечных лучей - это разновидность многоуровневых круговых диаграмм. Иногда их называют радиальными древовидными диаграммами, поскольку данные в них имеют ту же иерархическую структуру, что и в обычных древовидных диаграммах.

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

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

Диаграмма Sankey

Диаграммы Санки используются для представления потоковых процессов, таких как движение денег внутри организации (как показано в финансовом отчете), поток энергии или сырья через ряд промышленных процессов или поток более абстрактного актива, например, информации. Высота или ширина каждого узла представляет собой общий объем потока, проходящего через этот узел, а толщина линий между каждой парой узлов - объем потока, проходящего между этими узлами. Цвет может использоваться либо для отображения объема потока (например, с помощью цветового градиента), либо для отображения какого-либо другого аспекта процесса, как в данной диаграмме Санки, где используются цвета для иллюстрации потока беженцев.

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

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

Хлороплет

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

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

К сожалению, реальные данные, как правило, не делятся на естественные категории. Например, хлороплет, в котором интенсивность цвета пропорциональна плотности населения, может работать, когда существует аналогичная разница между плотностью населения различных регионов (например, между различными округами одного и того же штата США). Однако часто данные содержат значения, которые на порядки превышают другие значения в том же наборе данных. К счастью, D3.js обладает богатым набором шкал. В некоторых случаях более подходящей может оказаться логарифмическая шкала: она хорошо отображает небольшие различия, но также показывает и гораздо большие различия. В других случаях можно использовать один цвет для отображения значений выше или ниже определенного порога. Именно этот высокий уровень гибкости делает D3.js таким мощным инструментом для создания визуализаций данных.

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

Наконец, можно использовать два отдельных (но связанных) фрагмента данных, каждый из которых имеет свою цветовую шкалу. Это называется двумерным клороплетом.

Пузырьковая диаграмма

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

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

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

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

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