О визуализации данных. Заключительная часть

Тысяча слов. Часть третья

Фарук Али (Farooq Ali, компания ThoughtWorks)

4. Варианты проектирования визуализации данных

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

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

Исследование изменений с течением времени

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

• Линейный график (Line graphs). Такие графики кодируют время и одну или более зависящих от времени переменных в двухмерной перспективе.

• График с областями (Stack graphs, также именуемый «этажерочным графиком»). Напоминает линейный график, описывающий сразу несколько параметров и, кроме того, кодирующий разницу между этими параметрами в определенной области. Например, он очень эффективен для обнаружения узких мест в потоке значений (области практического применения — анализ, разработка, гарантия качества, утверждение плана в ходе создания программного обеспечения). В таком случае, на график наносятся показатели работы, выполненной с течением времени. Затем на графике отыскиваются отрезки, более мелкие, чем соседствующие с ними фрагменты. Производным вариантом графика с областями является «паровой» график, на котором ось x (0) может свободно перемещаться по оси y. Например, на ресурсе last.fm, рекомендующем различную музыку, паровые графики используются для визуализации тенденций прослушивания тех или иных композиций.

• Горизонтный график (Horizon graphs). Горизонтный график показан на следующем рисунке. Горизонтный график отлично подходит для визуализации больших множеств данных, распределенных во времени. Таким множеством является, например, эффективность тридцати разновидностей ценных бумаг в течение года. Это такой график с распределением во времени, в котором интенсивность цвета и занимаемая площадь помогает нам представить более полную картину значений по оси y, но сам график при этом не растягивается по вертикали. Одно из интересных свойств цвета заключается в том, что человек склонен переоценивать площадь фигуры, закрашенной более интенсивным и насыщенным цветом. В горизонтном графике этот феномен используется очень активно, что позволяет уложить большее количество информации в меньшем пространстве. Поэтому высота графика остается постоянной. Большие количественные значения кодируются как слои различного цвета на площади под кривой. Кроме того, график отражает отрицательные значения по положительной части оси, но уже другим цветом. (например, красным цветом могут обозначаться отрицательные значения, а синим — положительные). 

Горизонтный график (©2012 Panopticon Software AB)

• Искрографик (Sparklines). На рисунке ниже «Искрографики в информационной панели Google Analytics» показаны искрографики (спарклайны). Искрографик определяется как «небольшой график с высоким разрешением, расположенный в контексте слов, чисел и изображений». Термин и это определение были придуманы Эдвардом Тафти, признанным экспертом по визуальному дизайну при работе с информацией. В последнее время искрографики очень распространились. Обычно они изображаются как небольшие групповые линии. В частности, такие графики играют очень важную роль на информационных панелях. Например, подобные панели применяются в системе Google Analytics для отслеживания трафика на веб-сайте.

Искрографики, применяемые в информационной панели Google Analytics

Исследование корреляций

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

• График рассеяния (Scatterplots). Пример такого графика был показан на рисунке «Гештальт-принципы для распознавания образов» в предыдущей части этой статьи. Графики рассеяния также очень удобны для выявления отклоняющихся значений и аномалий. В простейшей форме, график рассеяния использует для кодирования данных позицию в двухмерном пространстве. Тем не менее, график рассеяния предлагает гораздо больше возможностей для кодирования многомерных данных — в частности, такие данные можно кодировать при помощи размера/площади, контура, цвета и обрамления. Вот почему пузырьковые (кружковые) диаграммы являются лишь производным случаем графика рассеяния.

• Матрица (Matrices). Матрица действует подобно графику рассеяния, но в матрице двухмерное пространство укладывается в сетку, позволяющую соотносить качественные и порядковые данные. Две распространенные формы для исследования корреляций — это матричные диаграммы и тепловая диаграмма. Типичным примером матричной диаграммы является сравнение характеристик конкурирующих продуктов. Тепловая диаграмма (на следующем рисунке показана такая диаграмма, демонстрирующая академическую успеваемость австралийских студентов по штату/территории) напоминает температурную карту (далее показана температурная карта, демонстрирующая изменение котировок NASDAQ в конкретный день). Такая матрица кодирует интересующий нас качественный или порядковый показатель (представляемый как узел сетки) при помощи цвета.   В отличие от температурной карты, тепловая диаграмма ориентирована на выстраивание корреляций между двумя группами информационных данных. Поэтому, позиция узла в двухмерном пространстве имеет значение, например, для демонстрации прибыльности компании розничной торговли по различным категориям продукции (качественные данные) и по регионам (качественные данные).

Тепловая диаграмма, отражающая академическую успеваемость австралийских студентов в зависимости от штата/территории

Исследование иерархических отношений и отношений часть-целое

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

• Плоские деревья (Tree maps). Пример плоского дерева показан на одноименном рисунке ниже. Еще одна интересная возможность применения плоских деревьев — визуализация сложности и размера кода в зависимости от структуры классов и каталогов — как это сделано в примере от Panopticode. Плоские деревья особенно эффективны, если пользователь может взаимодействовать с ними, «просверливая» их и накладывая прямоугольную область, представляющую качественные данные (например, класс/файл/каталог).

Плоское дерево

• Маркированные графики (Bulletgraphs). Показанный далее маркированный график — альтернатива «виртуальных спидометров», используемых в информационных панелях для визуализации количественных отношений «часть-целое», например, при обозначении КПД. Если взять пример с КПД, то, в данном случае, маркированный график кодирует часть и целое как длину участков с варьирующимися оттенками интенсивностью цвета. Такие участки служат фоном, на котором отображаются порядковые параметры, например, «хорошо», «удовлетворительно», «плохо». Ближайшая аналогия из реальной жизни для такого графика — это обычный термометр.

Маркированный график

Исследование связей и сетей

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

• Сетевые графики (Network graphs). Такие графики помогают увидеть связи, как правило, между качественными данными. Эти связи выглядят как набор линий, соединяющих узлы. Не считая самых очевидных способов — кодирования линий и узлов — существует еще масса возможностей выстраивания такого графика. Круговые графики предназначены для визуализации плоского списка отношений. В иерархических графиках используются древовидные макеты. В многоуровневых динамических (force-directed) графиках используется определенная физика и пружинная эвристика, позволяющая разводить узлы на схеме. Конечно, есть и другие методы, но окончательный выбор всегда зависит от имеющихся данных и от поставленной задачи.

• Связывание ребер (Edge bundling). Такая методика позволяет более ясно представлять сетевые графики. Как понятно из названия, при этом происходит связывание смежных ребер, а не использование кратчайшей прямолинейной траектории между двумя узлами. Такая структура напоминает хорошо выполненную укладку кабелей в серверном помещении. (на следующем рисунке, автор — Дэнни Холтен). Эффективность такого подхода совершенно очевидна: достаточно обратить внимание на характерные утолщения линий и интенсивность цвета в тех частях графика, где расположены связанные соединения.

Связывание ребер (Дэнни Холтен, 2006)

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

Тепловая диаграмма, иллюстрирующая изменения котировок NASDAQ в заданный день

5. Инструменты и фреймворки

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

Библиотеки для визуализации

Браузеры все лучше приспосабливаются к работе с визуально-насыщенными интерфейсами. Не отстают от браузеров и динамично развивающиеся инструменты для создания таких интерфейсов. Те вещи, которые сегодня можно делать на холсте HTML5 и на JavaScript, еще недавно были «сливками», доступными только в технологии Flash и в апплетах Java. Но сейчас все меняется. Здесь перечислены лишь некоторые библиотеки для визуализации данных. Чтобы познакомиться с их возможностями, лучше всего сходить на сайт каждой библиотеки, где предлагаются демонстрационные «галереи» и образцы кода.

• Protovis. Поддержкой библиотеки занимаются члены Стэнфордской Визуализационной Группы (Stanford Visualization Group). Это популярная графическая библиотека JavaScript с открытым кодом. В ней не только предоставляется собственный API (интерфейс программирования приложений) для визуализации, также поддерживающий анимацию. Кроме того, эта библиотека позволяет выполнять разнообразные распространенные настраиваемые варианты визуализации — в том числе все, упомянутые выше. Protovis предоставляет декларативный, управляемый данными гибкий API, очень хорошо приспособлен для качественного решения задач, связанных с визуализацией информации.

• Processing. Это развитый свободный язык программирования. Он предназначен для визуализации информации и построен на основе Java. Первоначально он создавался для программирования апплетов Java, но впоследствии был портирован еще на некоторые платформы и адаптирован для других языков. В частности, это касается JavaScript (Processing.js) и Flash/ActionScript (Processing.as).

• Raphaël. Это многообещающая свободная библиотека JavaScript для создания графики. В библиотеке используется рекомендация SVG WC3 и язык VML. Как и Protovis, эта библиотека содержит весь стандартный браузерный фугкционал и механизмы для реализации клиентских интерфейсов. В частности, библиотека поддерживает манипуляции с объектной моделью документа и работу с событиями. Raphaël используется в GitHub для визуализации некоторых параметров их репозиториев с исходным кодом. Кроме того, в Raphaël обеспечивается поддержка анимации.   

• Стандартные библиотеки для построения графиков. Существует множество графических и диаграммных библиотек. Они не могут похвастаться такой гибкостью, как библиотеки, упомянутые выше, так как в большей мере ориентированы на предоставление дополнительного функционала, обогащающего готовые варианты визуализации. В качестве примеров таких библиотек можно назвать Google Charts (для работы с изображениями и Flash), Fusion Charts, flot (jQuery) и инструментарий для визуализации данных JavaScript InfoVis Toolkit.

Графические инструменты

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

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

• Panopticon. Этот инструмент позволяет создавать многие варианты визуализации, рассмотренные выше. Кроме того, он снабжен специальным инструментарием для разработчика (SDK). Следует отметить, что горизонтные графики впервые появились именно в Panopticon. Инструмент позволяет создавать тепловые диаграммы, тепловые матрицы, графики с распределением данных во времени, маркированные графики и многие другие схемы.

• Many Eyes. Хотя, я бы и не рекомендовал полагаться на этот инструмент при решении критически важной задачи, он очень хорош для ознакомления с визуализацией данных. Этот инструмент был создан компанией IBM и задумывался как социальное приложение. Предполагалось, что пользователи смогут создавать визуальные схемы из загруженных данных и делиться ими.

• GraphViz. Это текстовый инструмент, позволяющий создавать сетевые графики при помощи простого языка DOT. На этом языке вы можете декларативно определять узлы и связи между ними.   

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

Заключение

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

Если вы стараетесь избегать визуального дизайна при работе — не забывайте, что у него есть и объективная сторона. Ее мы и постарались осветить в этом материале. Можно не быть Моне, чтобы эффективно работать с визуальной коммуникацией и иметь авторитетное мнение об этой теме. Непременно продолжайте изучать объективные аспекты дизайна и вырабатывайте отношение к его субъективным аспектам. Для начала, очень рекомендую почитать статьи и книги Стивена Фью, Эдварда Тафти и Колина Уэйра. Найдите периодически повторяющуюся аналитическую задачу, требующую просеивания скучных или многомерных данных — и можете приступать к дизайну визуализаций.

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

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

16 лет dev.by — «дефолтный» источник информации о беларусском ИТ

Вы можете...