Vega-Lite в Markdown: статистические графики текстом

Диаграммы Mermaid у нас давно, но у них слабо со статистикой: гистограммы, регрессии, боксы, хитмапы — не их жанр. Для этого появился новый fence — vega: описываем график декларативным JSON (спека Vega-Lite), а рендерит его браузер. Никаких картинок — только текст, как мы любим.

Как это устроено

```vega
{
  "width": "container",
  "data": {"values": [{"x": 1, "y": 5}]},
  "mark": "bar"
}
```

Что происходит под капотом:

• фенс кладёт спеку в <script type="application/json"> внутри контейнера;
• клиентский скрипт лениво грузит vega + vega-lite + vega-embed с CDN — только если на странице есть хоть один график;
• при переключении светлой/тёмной темы блога график перерисовывается сам;
• при наведении на график появляется кнопка «Развернуть» — фуллскрин, где интерактивность полностью сохраняется;
• невалидный JSON не роняет страницу, а показывается красным блоком с исходником.

Столбчатая диаграмма

Цены за 1000 токенов из обзора моделей Yandex Cloud:

Наведите курсор на столбцы — тултипы работают без единой строчки нашего JS.

Гистограмма без кнопки зума

Распределение времён ответа (мс). На этом графике висит класс .zoom-0 — кнопки «Развернуть» у него нет:

.zoom-0 — общий класс отказа от нашего зума: он действует и на картинки, и на mermaid-схемы (можно вешать на обёртку — например, на весь box).

Точечный график с регрессией

Вот это уже чистый seaborn-жанр: облако точек плюс линия регрессии одним трансформом regression:

Зум осей из коробки

Параметр bind: "scales" даёт нативный pan/zoom прямо в статье: тащите мышью — двигается график, крутите колесо — зум, двойной клик — сброс:

В развёрнутом виде (кнопка справа вверху) с ним особенно удобно.

Классы работают как у всех фенсов

attr_list на открывающей строке попадает на контейнер:

```vega {: .h-scroll-narrow}
{"...": "..."}
```

— широкий график получит горизонтальный скролл на телефоне, а на десктопе будет вести себя как обычный блок.

Где брать спеки

• Галерея примеров: vega.github.io/vega-lite/examples — сотни готовых спек от баров до карт и кроссфильтров;
• Онлайн-редактор: vega.github.io/editor — покрутили, получили JSON, вставили в статью.