Простой практический пример

В этом уроке мы создадим простую столбчатую диаграмму с помощью Deneb, набора данных, встроенного шаблона и Vega-Lite. Готовый результат — столбчатая диаграмма слева в отчёте:

Скачать файл отчёта.

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

Из примера отчёта возьмём один столбец и одну меру. Вот как выглядят исходные данные:

Столбец [City] задаёт номинальную категорию, а [Mean Temperature] — простая мера, вычисляющая среднюю температуру для текущего контекста строки.

Добавление визуала

После добавления Deneb появляется в панели Visualizations («Визуализации»):

Нажмите на его значок, чтобы поместить визуал на холст отчёта:

Добавление данных

Добавим столбец [City] и меру [Mean Temperature] в область данных Values визуала Deneb:

Теперь нужна спецификация, которая объяснит Vega-Lite или Vega, как отрисовать визуализацию.

Открытие редактора визуала

Откройте меню заголовка визуала — многоточие — и выберите Edit («Изменить»):

Редактор откроется в режиме фокусировки. Появится окно Create New Specification («Создать новую спецификацию»):

Выбор шаблона

Для работы с Vega и Vega-Lite нужна спецификация на JSON. Можно выбрать [empty], чтобы начать с минимальной спецификации с привязанным набором данных, или использовать готовый шаблон.

Нажмём на шаблон Simple Bar Chart. Появятся дополнительные сведения о шаблоне и обязательные заполнители:

Назначение заполнителей

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

Затем выберем заполнитель Measure и назначим ему меру Mean Temperature:

Создание начальной спецификации

Когда все заполнители назначены, кнопка Create становится доступной:

Нажмите её. В редакторе появится спецификация с назначенными полями и предпросмотр визуализации:

Разбор созданной спецификации

На вкладке Specification теперь находится следующая спецификация Vega-Lite в формате JSON:

{
  "data": { "name": "dataset" },
  "mark": {
    "type": "bar",
    "tooltip": true
  },
  "encoding": {
    "y": {
      "field": "City",
      "type": "nominal"
    },
    "x": {
      "field": "Mean Temperature",
      "type": "quantitative"
    },
    "opacity": {
      "condition": {
        "test": {
          "field": "__selected__",
          "equal": "off"
        },
        "value": 0.3
      }
    }
  }
}

Разберём её устройство:

• Объект data ссылается на набор данных "dataset".
  • Эта ссылка обязательна: она указывает, что нужно использовать данные визуала. Оставьте её без изменений.
  • Подробнее см. в разделе «Набор данных».
• Для каждой точки данных используется примитив bar, для которого включена подсказка tooltip.
• Кодирование визуала связывает данные следующим образом:
  • City связан с осью y и имеет номинальный, то есть категориальный, тип.
  • Mean Temperature связан с осью x и имеет количественный тип с линейной шкалой.
  • Непрозрачность примитива связана со специальным полем __selected__, которое управляет перекрёстной фильтрацией. Подробнее об этом ниже.

Это простая спецификация одиночного представления. Освоив синтаксис, вы сможете перейти к представлениям со слоями, размещённым рядом или разбитым на панели 😉

Шаблон также подготовил содержимое вкладки Config.

Разбор созданной конфигурации

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

{
  "autosize": {
    "type": "fit",
    "contains": "padding"
  }
}

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

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

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

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

В шаблоне подсказки включены по умолчанию. При наведении на точку данных появляется стандартная подсказка:

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

Перекрёстная фильтрация

Многие визуалы Power BI позволяют фильтровать другие визуалы нажатием на точки данных, в том числе с Ctrl. Deneb также это поддерживает. Нужно продумать оформление выбранных и остальных точек: обычно невыбранные точки приглушают, чтобы пользователь понимал, как связан выбор в разных визуалах.

Как правило, эту возможность включают отдельно, но в нашем шаблоне уже настроен простой вариант. Соответствующий фрагмент спецификации находится в строках 16–25:

{
  "opacity": {
    "condition": {
      "test": {
        "field": "__selected__",
        "equal": "off"
      },
      "value": 0.3
    },
    "value": 1
  }
}

Специальное поле __selected__ хранит состояние выбора каждой строки набора данных. Его можно использовать в encoding вместе с проверкой test: если точка не выбрана нажатием или Ctrl + нажатием, задаём непрозрачность opacity равной 0.3, то есть 30%.

Дополнительная настройка конфигурации

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

"bar": {
  "color": "#605E5C",
  "cornerRadiusTopRight": 10,
  "cornerRadiusBottomRight": 10
},

Примените изменения командой Apply или сочетанием Ctrl + Enter:

После применения изменений визуал обновится:

Просмотр готового результата

Нажмите Back to report («Назад к отчёту»), чтобы выйти из режима фокусировки. На холсте визуал займёт обычный размер благодаря конфигурации autosize, применённой ранее:

Что дальше

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

Документация Deneb объясняет, как применять визуал в Power BI, дополняя уже существующие материалы по Vega и Vega-Lite. Продолжайте изучение разделов, чтобы узнать о дополнительных возможностях и ограничениях.

За примерами и идеями обратитесь к галерее Vega-Lite или галерее Vega.