Дополнения

Всплывающие подсказки

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

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

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

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

Еще одним преимуществом всплывающих подсказок является их увлекательность! Они повышают интерактивность, позволяя пользователям взаимодействовать с графиком, изучая данные на своих условиях.

Zooms

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

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

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

Масштабирование также помогает улучшить доступность для людей с дефектами зрения.

Кисти

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

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

Анимация

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

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

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

Когда для перехода между наборами данных используется анимация, и эти переходы управляются пользовательским интерфейсом, например <TransLink>этот ползунок</TransLink>, пользователь может исследовать значения почти как на видеодисплее.

Цвета

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

Наиболее очевидным применением цвета является разграничение различных наборов данных - например, на этом графике Bar Chart присутствуют данные для нескольких наборов схожих данных. Используя различные цвета для каждого набора данных и поясняя значение этих цветов в легенде, можно объединить их в одном графике.

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

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

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

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

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

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

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

Сетка данных

Данные для диаграмм или графиков D3js обычно поступают из одного из трех источников. Если данные вряд ли будут часто меняться, их можно хранить в файле JSON или CSV на сервере. Если данные поступают из локальной базы данных, то их необходимо обновлять напрямую, либо с помощью пользовательского интерфейса, либо с помощью инструмента для работы с базами данных, например, DBeaver. Мы можем настроить это для вас.

However, if data needs to be updated by somebody with no technical skills, the best option is for us to create a data grid for you. This looks and feels much like an Excel spreadsheet. It can either be on a page which is shielded from search engines or which is password-protected.

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

Элементы пользовательского интерфейса

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

Наиболее полезными элементами пользовательского интерфейса являются радиокнопки и флажки. Иногда их путают. Радиокнопки, как, например, показанные на этой Stacked Bar Chart, позволяют пользователям выбирать между набором взаимоисключающих вариантов: в данном случае они могут выбрать один набор данных, представленный в виде простой гистограммы, или несколько наборов данных, представленных в виде Stacked Bar Chart. Однако их можно использовать и для изменения способа отображения данных. В этой визуализации данных Sunburst радиокнопки влияют на то, как цвет используется для выделения различных аспектов набора данных.

С другой стороны, флажки позволяют пользователю выбрать любую комбинацию опций: в этом случае варианты не являются взаимоисключающими. В примере с флажком визуализация данных <Link>Line Chart</Link> может отображать только один набор данных, два любых набора данных или все три. Это очень удобно, когда пользователю необходимо провести конкретное сравнение между парами наборов данных: например, он может захотеть сравнить значения операций на сердце с операциями на печени, а значения операций на селезенке убрать для большей наглядности.

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

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