Версия: 1.7

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

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

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

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

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

Столбец City и мера Mean Temperature

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

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

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

Deneb добавлен в панель визуализаций отчёта

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

Стартовый экран Deneb после добавления на холст

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

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

После добавления данных Deneb предлагает создать спецификацию

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

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

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

Открытие редактора через меню заголовка визуала

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

Диалог создания спецификации из встроенного или импортированного шаблона

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

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

Выберем Create using… → Vega-Lite → Interactive bar chart. Появятся дополнительные сведения о шаблоне и обязательные заполнители:

Выбран встроенный шаблон столбчатой диаграммы

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

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

Столбец City назначается заполнителю Category

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

Мера Mean Temperature назначается заполнителю Measure

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

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

Кнопка Create доступна после назначения всех заполнителей

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

Редактор со спецификацией и предпросмотром диаграммы

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

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

Созданная спецификация
{
  "data": {
    "name": "dataset"
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "opacity": 0.3,
        "tooltip": true
      },
      "encoding": {
        "x": {
          "field": "Mean Temperature"
        }
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "field": "Mean Temperature__highlight"
        },
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0
          },
          "value": 1
        }
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "City",
      "type": "nominal"
    },
    "x": {
      "type": "quantitative",
      "axis": {
        "title": "Mean Temperature"
      }
    }
  }
}

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

  • Объект data ссылается на набор данных "dataset" (строки 2–4).
    • Эта ссылка обязательна: она указывает, что нужно использовать данные визуала. Оставьте её без изменений.
    • Подробнее см. в разделе «Набор данных».
  • Представление layer накладывает элементы диаграммы друг на друга (строки 5–39). Оно содержит:
    • Один примитив bar для каждой точки данных (строки 6–17).
      • Его ширина (канал кодирования x) связана с мерой Mean Temperature (строки 13–15).
      • Для этого примитива включена подсказка tooltip (строка 10).
      • Он показывает исходные значения при перекрёстном выделении из другого визуала. Подробнее об этом ниже.
    • Один примитив bar для каждой точки данных, связанный в канале x со значениями перекрёстного выделения меры Mean Temperature (строки 18–38).
      • Его непрозрачность opacity зависит от специального поля __selected__, используемого для перекрёстной фильтрации (строки 27–36). Подробнее об этом ниже.
  • Кодирование верхнего уровня задаёт соответствия для всего визуала (строки 40–51):
    • City связан с осью y и имеет номинальный, то есть категориальный, тип (строки 41–44).
    • Ось x — количественная, с линейной шкалой (строки 45–49).

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

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

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

На вкладке Config пока находится пустой JSON-объект:

Созданная конфигурация
{}

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

Для Power BI, где размеры визуалов могут динамически меняться, полезна автоматическая настройка размеров простых одиночных представлений и представлений со слоями. Deneb применяет её автоматически: задавать её явно не нужно.

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

Начальная настройка оформления

Изменим конфигурацию так, чтобы оформление лучше сочеталось со стандартными визуалами Power BI. Замените JSON следующим кодом и нажмите Apply (▶️) либо Ctrl + Enter:

Обновлённая исходная конфигурация
{
  "view": { "stroke": "transparent" },
  "font": "Segoe UI, wf_segoe-ui_normal, helvetica, arial, sans-serif",
  "axis": {
    "domain": false,
    "labelColor": "#605E5C",
    "labelFontSize": 12,
    "ticks": false,
    "titleFont": "din",
    "titleColor": "#252423",
    "titleFontSize": 16,
    "titleFontWeight": "normal"
  },
  "axisX": {
    "gridColor": "#C8C6C4",
    "gridDash": [1, 5],
    "labelFlush": false,
    "labelPadding": 5,
    "tickCount": 3
  },
  "axisY": {
    "grid": false,
    "labelPadding": 10
  }
}

Визуал обновится:

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

Мы внесли следующие изменения:

  • Убрали рамку stroke вокруг области построения.
  • Выбрали основной шрифт Segoe UI и запасные варианты для устройств, на которых он недоступен.
  • Задали общие настройки обеих осей:
    • Убрали линию начала отсчёта domain.
    • Задали цвет и размер подписей.
    • Убрали отметки ticks.
    • Для заголовков выбрали шрифт DIN и соответствующее оформление.
  • Изменили оформление оси x:
    • Изменили цвет и штриховку линий сетки.
    • Изменили расстояние подписей от оси labelPadding и выравнивание крайних подписей: теперь они центрированы на своих линиях сетки, а не прижаты к ним.
    • Уменьшили плотность отметок, что влияет и на подписи.
  • Изменили оформление оси y:
    • Отключили линии сетки.
    • Увеличили расстояние между подписями и осью: оно немного больше, чем для оси x.

Дополнительное оформление столбцов

Сделаем ещё одно изменение, чтобы столбцы отличались от обычной столбчатой диаграммы. После закрывающей фигурной скобки в строке 24 добавьте:

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

Примените изменения. Столбцы получат другой цвет заливки и скруглённые углы:

Столбцы после изменения цвета и скругления углов

Обзор интерактивности

Некоторые свойства спецификации и настройки позволяют визуалу взаимодействовать с другими элементами отчёта. Интерактивность — более сложная тема; цель этого примера — показать доступные возможности. Полезно изучить особенности Power BI и способы, которыми Deneb с ними работает. Ниже — краткий обзор возможностей, используемых в примере.

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

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

Стандартная подсказка при наведении на столбец

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

Подсказка страницы отчёта, настроенная для поля City

Перекрёстное выделение

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

  • Первый примитив нашей диаграммы показывает исходные значения:

    Перекрёстное выделение: первый, менее непрозрачный примитив
    {
  "mark": {
    "type": "bar",
    "opacity": 0.3,
    "tooltip": true
  },
  "encoding": {
    "x": {
      "field": "Mean Temperature"
    }
  }
}

    Его непрозрачность равна 30%, и он находится под вторым примитивом.

  • Второй примитив показывает значения перекрёстного выделения:

    Перекрёстное выделение: второй, непрозрачный примитив
    {
  "mark": {
    "type": "bar",
    "tooltip": true
  },
  "encoding": {
    "x": {
      "field": "Mean Temperature__highlight"
    },
    ...
  }
}

    Если перекрёстного выделения нет, эти значения совпадают с исходными и второй примитив полностью закрывает первый. В кодировании используется та же мера с суффиксом __highlight: так Deneb предоставляет значение, которое нужно отобразить. Остальная часть encoding здесь опущена — она относится к следующему разделу.

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

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

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

Перекрёстная фильтрация: кодирование второго примитива
{
  "mark": { ... },
  "encoding": {
    ...
    "opacity": {
      "condition": {
        "test": {
          "field": "__selected__",
          "equal": "off"
        },
        "value": 0
      },
      "value": 1
    }
  }
}

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

Непрозрачность зависит от состояния выбора точки данных

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

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

Готовая диаграмма на холсте отчёта

Что дальше

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

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

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