Версия: 1.4

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

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

Нажмём на шаблон Simple 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).
    • Эта ссылка обязательна: она указывает, что нужно использовать данные визуала. Оставьте её без изменений.
    • Подробнее см. в разделе «Набор данных».
  • Представление layer накладывает элементы диаграммы друг на друга (строки 3–35). Оно содержит:
    • Один примитив bar для каждой точки данных (строки 4–13).
      • Его ширина (канал кодирования x) связана с мерой Mean Temperature (строка 11).
      • Для этого примитива включена подсказка tooltip (строка 8).
      • Он показывает исходные значения при перекрёстном выделении из другого визуала. Подробнее об этом ниже.
    • Один примитив bar для каждой точки данных, связанный в канале x со значениями перекрёстного выделения меры Mean Temperature (строки 14–34).
      • Его непрозрачность opacity зависит от специального поля __selected__, используемого для перекрёстной фильтрации (строки 23–32). Подробнее об этом ниже.
  • Кодирование верхнего уровня задаёт соответствия для всего визуала (строки 36–45):
    • City связан с осью y и имеет номинальный, то есть категориальный, тип (строки 37–40).
    • Ось x — количественная, с линейной шкалой (строки 41–44).

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

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

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

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

Созданная конфигурация
{
  "view": { "stroke": "transparent" },
  "font": "Segoe UI",
  "arc": {},
  "area": {
    "line": true,
    "opacity": 0.6
  },
  "bar": {},
  "line": {
    "strokeWidth": 3,
    "strokeCap": "round",
    "strokeJoin": "round"
  },
  "path": {},
  "point": { "filled": true, "size": 75 },
  "rect": {},
  "shape": {},
  "symbol": {
    "strokeWidth": 1.5,
    "size": 50
  },
  "text": {
    "font": "Segoe UI",
    "fontSize": 12,
    "fill": "#605E5C"
  },
  "axis": {
    "ticks": false,
    "grid": false,
    "domain": false,
    "labelColor": "#605E5C",
    "labelFontSize": 12,
    "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
    "titleColor": "#252423",
    "titleFontSize": 16,
    "titleFontWeight": "normal"
  },
  "axisQuantitative": {
    "tickCount": 3,
    "grid": true,
    "gridColor": "#C8C6C4",
    "gridDash": [1, 5],
    "labelFlush": false
  },
  "axisX": { "labelPadding": 5 },
  "axisY": { "labelPadding": 10 },
  "header": {
    "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
    "titleFontSize": 16,
    "titleColor": "#252423",
    "labelFont": "Segoe UI",
    "labelFontSize": 13.333333333333332,
    "labelColor": "#605E5C"
  },
  "legend": {
    "titleFont": "Segoe UI",
    "titleFontWeight": "bold",
    "titleColor": "#605E5C",
    "labelFont": "Segoe UI",
    "labelFontSize": 13.333333333333332,
    "labelColor": "#605E5C",
    "symbolType": "circle",
    "symbolSize": 75
  }
}

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

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

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

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

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

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

Если создать страницу подсказки, включающую один из столбцов визуала, 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, то есть скрываем второй примитив.

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

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

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

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

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

Команда Apply сохраняет изменения и обновляет спецификацию

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

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

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

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

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

Что дальше

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

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

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