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

Сегодня продолжаем тему инфографики. В этом посте я расскажу, как визуализировать величины не просто числовыми значениями или столбчатой диаграммой, а показать количественное сравнение тематическими картинками. Например, у вас есть задача показать объём количеством соответствующих объектов, а не числом. Тогда читайте дальше – расскажу метод по шагам.

Создаем инфографику в QlikView: технология

Мой метод создания элементов инфографики в  QlikView подойдет для отображения небольшого количества объектов либо для отображения округленных до сотен, тысяч и т.п. значений. Ещё эффектнее будет смотреться сравнение таких величин по группам. Количество групп должно быть известно сразу, и их не должно быть слишком много. Цвет для каждой группы тоже фиксируется заранее.

Рассмотрим сначала простой пример показа доли процента в группе квадратиками, сгруппированных в матрицу 10х10. Пример (А)

Инфографика QlikView

Пример (А)

Исходные данные:

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

Так же нам необходимо в скрипте создать две вспомогательные таблицы:

и

Инфографика QlikView в несколько шагов:

  1. Начнем с создания обычной гистограммы или Bar Chart.
    • В качестве первого дименшина укажем расчетный и введем:
      =IF( _ЛИНИЯ<=10, _ЛИНИЯ)
    • В качестве второго дименшина тоже укажем расчетный и введем:
      =IF( _КОЛОНКА<=19, _КОЛОНКА)
    • На странице Выражений (Expressions) введем такое выражение:
      =IF( EVEN(_КОЛОНКА), 3, 10)

и назовем его «ячейка» (в поле ввода Метка («Label»))

В итоге получим пример (Б):Инфографика QlikViewПример (Б)

  1. Поработаем со свойствами чарта (Properties):
    • Вкладка Стиль (Style):
      Выберем режим Подтип Стопкой (Subtype = «Stacked») и ориентацию баров «горизонтально»Свойства диаграммы QlikView
  • Вкладка Общие (General):

Отключаем галочку «Показывать заголовок в диаграмме» («Show Title in Chart»), но включаем галочку «Только чтение» («Read Only»)Свойства диаграммы QlikView

  • Вкладка Измерения (Dimensions):

У обоих дименшинах отключаем галочки Метка («Label») и Показывать легенду («Show Legend»)

Свойства диаграммы QlikView

  • Вкладка Оси (Axes):

Скрываем ось Х, включив галочку Скрыть оси («Hide Axis»)

Свойства диаграммы QlikView

  • Отключаем заголовок и рамку.

Получили пример (В):

Инфографика QlikView

Пример (В)

  1. А теперь сама идея. Будем управлять раскраской квадратиков, по следующей схеме: четные квадратики в каждой линии будем закрашивать цветом фона, а нечетные согласно нашему числу, которое мы хотим отобразить. Для этого:
  • На вкладке Выражения (“Expressions”) раскроем {+} у нашего выражения и в Цвет фона («Background Color») впишем выражение:

Свойства диаграммы QlikView

  • На вкладке Представление («Presentation») регулируем ширину объекта и немного уменьшаем параметр Кластер («Cluster Distance»):Свойства диаграммы QlikView
  • Получаем результат как в примере (Г):Инфографика QlikView

Пример (Г)

  1. Изменяя размер построенного нами объекта (Bar Chart), можно получать разного масштаба матрицы квадратиков 10х10, кроме того создав копии уже созданного и изменив в них только тип отображаемой величины других групп, получим сравниваемые величины как в примере (Д) Инфографика QlikView

Пример (Д)

  1. Так же не забудем отключить на вкладке Представление («Presentation») галочку Всплывающие метки («Pop-up Labels»), чтобы не всплывали подсказки при наведении мышки на квадратики.Свойства диаграммы QlikView

Инфографика QlikView: под новым углом

А теперь посмотрим, что же ещё можно отобразить при помощи данной технологии.

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

В примере (Ж) специально сделан серый задник, чтобы было понятна структура png-файла.Инфографика QlikView

Пример (Ж)

Разместив маску поверх нашего «Bar Chart», получим закрашенными не просто квадратики, а нужные нам тематические картинки (пример (Е)).Инфографика QlikView

Пример (Е)

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

Свойства диаграммы QlikView

Вот то, о чем я говорю на примере (З):Инфографика QlikView

Пример (З)

На сегодня у меня все. Пишите свои комментарии ниже. Расскажите, как вы работаете с визуализацией приложений.