Встраивание Vega-Lite

Чтобы быстро опубликовать визуализацию Vega-Lite в интернете, можно создать свою копию шаблона Vega-Lite Block на bl.ocks.org.

Самый простой способ разместить Vega-Lite на своей веб-странице — использовать Vega-Embed. Эта библиотека создана, чтобы максимально упростить встраивание визуализаций.

Получение Vega-Lite и других зависимостей

Для встраивания спецификации Vega-Lite сначала загрузите необходимые библиотеки. Vega, Vega-Lite и Vega-Embed можно подключить через CDN, установить с помощью npm или скачать вручную.

CDN

Для рабочего сайта обычно стоит размещать файлы на своём сервере или использовать сеть доставки содержимого (CDN). Выпуски Vega-Lite доступны на jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/vega@6.2.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@6.4.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@7.1.0"></script>

Чтобы автоматически получать новые версии Vega-Lite, Vega и Vega-Embed в пределах одной основной версии, укажите только её номер:

<script src="https://cdn.jsdelivr.net/npm/vega@6"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@6"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@7"></script>

NPM

Если вы предпочитаете размещать зависимости самостоятельно, установите Vega, Vega-Lite и Vega-Embed через npm. Так вы получите последние стабильные версии. Установка выполняется так же, как для любого другого модуля npm:

npm install vega
npm install vega-lite
npm install vega-embed

Подробнее о npm можно прочитать в его официальной документации.

Скачивание

Другой вариант — скачать последний выпуск Vega-Lite и добавить его в проект вручную. В этом случае также понадобятся Vega и Vega-Embed.

Начало работы с Vega-Lite и Vega-Embed

После подключения библиотек создайте элемент DOM, в который будет помещена визуализация:

<div id="vis"></div>

Затем вызовите функцию Vega-Embed и передайте ей свою спецификацию:

// Подробнее об аргументах: https://github.com/vega/vega-embed
vegaEmbed('#vis', yourVlSpec);

Vega-Embed автоматически добавляет ссылки для экспорта изображения, просмотра исходной спецификации и открытия её в онлайн-редакторе. Каждую из этих ссылок можно отключить отдельно. Подробности описаны в документации Vega-Embed.

Ниже приведён полный HTML-файл для самого простого способа встраивания Vega-Lite — с подключением через CDN. Посмотрите результат в браузере.

<!doctype html>
<html>
  <head>
    <title>Встраивание Vega-Lite</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@6.2.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@6.4.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@7.1.0"></script>
  </head>
  <body>
    <div id="vis"></div>

    <script type="text/javascript">
      var yourVlSpec = {
        $schema: 'https://vega.github.io/schema/vega-lite/v6.json',
        description: 'Простая столбчатая диаграмма со встроенными данными.',
        data: {
          values: [
            {a: 'A', b: 28},
            {a: 'B', b: 55},
            {a: 'C', b: 43},
            {a: 'D', b: 91},
            {a: 'E', b: 81},
            {a: 'F', b: 53},
            {a: 'G', b: 19},
            {a: 'H', b: 87},
            {a: 'I', b: 52},
          ],
        },
        mark: 'bar',
        encoding: {
          x: {field: 'a', type: 'ordinal'},
          y: {field: 'b', type: 'quantitative'},
        },
      };
      vegaEmbed('#vis', yourVlSpec);
    </script>
  </body>
</html>