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

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

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

У нас остается лишнее потраченное впустую пространство, которое, возможно, отвлекает от сообщения визуализации. В этом посте мы посмотрим, сможем ли мы уменьшить часть этого пространства с помощью d3.partition() с помощью d3.treemap(). Давайте назовем это parttree.

d3.partition()

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

Поскольку мы пытаемся избавиться от части неиспользуемого пространства в нашем sankeytree, давайте посмотрим, сможем ли мы использовать заполнение пространства d3.partition(). Для согласованности давайте продолжим использовать набор данных Titanic из R и создадим раздел.

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

меньшие узлы со ссылками

Что, если мы начнем с d3.partition(), а затем используем размер узла меньше, чем размер, назначенный разделу? Тогда у нас может быть место для рисования ссылок типа d3.tree() или d3-sankey. Увидеть — значит поверить, поэтому давайте внесем предложенные изменения в разделенный на части Титаник, а затем анимируем трансформацию.

Я считаю это хорошим прогрессом, и наше новое parttree придает ощущение иерархии с эффективным и компактным изображением размера и потока. Я должен отметить, что мы немного помогли с d3.stack() и d3.treemap().

Однако прямые угловые звенья могут быть немного жесткими. Это можно решить с помощью d3.linkHorizontal.

Последние штрихи

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

Только представьте, если мы добавим правильные метки, хороший цвет и интерактивность.

Следующий

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