Создаем дашборд с инструкциями

Складывающиеся контейнеры (Collapsible containers) являются одной из самых мощных функций, которые Tableau добавила за последние несколько лет. Я использую их практически каждый раз, когда возникает необходимость в визуализации, при решении как личных, так и профессиональных задач. Когда эта функция была выпущена, я опубликовал пост в блоге, в котором представил двенадцать различных вариантов использования “складных” контейнеров. Несколько недель спустя я увидел, как Линдси Бетзендаль использовала их таким способом, о котором я и не подумал — в качестве аннотаций. Вот пример того, что сделала Линдси.

Недавно я опубликовал визуализацию под названием Movie Money. Тогда я решил, что буду использовать эту технику для предоставления информации о том, как читать каждый из моих графиков. Я построил ее, но не был на 100% доволен результатом. Мне хотелось, чтобы подсказки появлялись по порядку, чтобы одно шло за другим. Я решил попытаться создать панель с автоматическим появлением и сменой подсказок. Как только я закончил, вспомнил про недавний пост в блоге Tableau Zen Master, Криса Лава. В своей визуализации он воспользовался невероятно хитроумной техникой.

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

Прежде чем мы начнем, откройте мою визуализацию и убедитесь, как она работает. Просто нажмите на иконку «How to Read» (“как читать”) слева от первого графика и просмотрите панель с подсказками. Вы также можете посмотреть на анимированное GIF-изображение ниже.

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

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

Я решил, что подойду к этой задаче так же, как и к задаче перелистывания листов, за исключением того, что листы будут лежать в разных контейнерах, а не в одном. (Если вы не знакомы с переключением между листами, предлагаю вам прочитать отличный пост в блоге  Data School). В случае настройки смены листов с использованием двух из них, вы должны создать параметр с двумя значениями, по одному значению, связанному с каждым из листов. У меня было восемь листов, так что я установил параметр, содержащий восемь значений, для которых взял целые числа от 1 до 8, и настроил его как функцию перелистывания. В конечном итоге я стал использовать этот параметр для фильтрации просмотров. Подробнее об этом я расскажу позже.

Затем нужно было создать восемь различных листов, содержащих восемь фраз описания. Возможно, вы спросите: «Почему бы просто не использовать текстовые объекты?» Потому что у меня не было бы возможности отфильтровать их. Я создал новый лист, набрал «…» на карточке с метками и переместил их в текстовые карточки. Это дало мне возможность получить доступ к этому тексту. Теперь я просто щелкаю на текстовую карточку, затем на «…», чтобы открыть окно редактирования текста. После этого я вбил первые подсказки, как это показано ниже. Я продублировал этот лист и создал еще семь наборов подсказок, идентичных первому.

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

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

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

Я вернулся к своему первому листу и создал поле функции, которое назвал «Фильтр подсказок для поиска лучших фильмов», оно соответствовало моему параметру. Я добавил его к фильтру для первого набора подсказок и проверил значение 1. На втором листе я добавил те же параметры фильтра и проверил значение 2. На третьем листе я проверил значение 3, и так вплоть до восьмого. (Обратите внимание, поскольку функция задавалась только на один параметр, а параметры допускают только одно значение, мне приходилось каждый раз подстраивать ползунок, чтобы проверить нужное мне число). В итоге у меня получилось восемь разных листов, каждый из которых соответствовал одному числу моего параметра. С каждым номером был связан только один лист. Это означает, что при перемещении ползунка параметров будет отображаться только один лист, все остальные будут отфильтрованы.

Теперь вернемся к дашборду. Я добавил этот параметр ползунка под первым листом моей сетки. Я убрал описание, чтобы видеть только ползунок. Затем выбрал весь контейнер и поставил галочку напротив «Добавить кнопку/Скрыть», чтобы сделать контейнер складным. Я изменил кнопку меню на значок «How to read», а кнопку закрытия — X на X с кружком вокруг.

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

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

https://www.flerlagetwins.com/2020/03/building-guided-instructions-panel.html

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.