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

В этом уроке мы создадим простую столбчатую диаграмму с помощью 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], чтобы начать с минимальной спецификации с привязанным набором данных, или использовать готовый шаблон.

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

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

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

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

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

Когда все заполнители назначены, кнопка 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 сможет её использовать. Для этого выберите подсказку страницы отчёта вместо стандартной:

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

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

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

{
  "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 («Назад к отчёту»), чтобы выйти из режима фокусировки. На холсте визуал займёт обычный размер благодаря автоматической настройке размеров одиночных представлений и представлений со слоями в Vega-Lite:

Что дальше

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

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

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