Сохранение диаграмм Altair

У объектов диаграмм Altair есть метод Chart.save, позволяющий сохранять диаграммы в разных форматах.

Формат JSON

Основное представление диаграммы Altair — строка JSON. Метод Chart.to_json возвращает JSON со спецификацией диаграммы. Чтобы записать её в файл, передайте Chart.save имя с расширением .json.

Например, сохраним простую диаграмму рассеяния:

import altair as alt
from altair.datasets import data

chart = alt.Chart(data.cars.url).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color='Origin:N'
)

chart.save('chart.json')

Содержимое полученного файла выглядит примерно так:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "config": {
    "view": {
      "continuousHeight": 300,
      "continuousWidth": 300
    }
  },
  "data": {
    "url": "https://vega.github.io/vega-datasets/data/cars.json"
  },
  "encoding": {
    "color": {
      "field": "Origin",
      "type": "nominal"
    },
    "x": {
      "field": "Horsepower",
      "type": "quantitative"
    },
    "y": {
      "field": "Miles_per_Gallon",
      "type": "quantitative"
    }
  },
  "mark": {"type": "point"}
}

Этот JSON можно встроить в любую веб-страницу с помощью библиотеки Vega-Embed.

Формат HTML

Чтобы Altair сам подготовил встраивание, сохраните диаграмму непосредственно в HTML-файл:

chart.save('chart.html')

Будет создана простая HTML-страница, загружающая Vega, Vega-Lite и Vega-Embed. При открытии в браузере она отобразит диаграмму.

Например, сохранение предыдущей диаграммы рассеяния создаёт файл следующего содержания. Его можно открыть в любом современном браузере с поддержкой JavaScript:

<!DOCTYPE html>
<html>
<head>
  <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>
</head>
<body>
  <div id="vis"></div>
  <script type="text/javascript">
    var spec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
      "config": {
        "view": {
          "continuousHeight": 300,
          "continuousWidth": 300
        }
      },
      "data": {
        "url": "https://vega.github.io/vega-datasets/data/cars.json"
      },
      "encoding": {
        "color": {
          "field": "Origin",
          "type": "nominal"
        },
        "x": {
          "field": "Horsepower",
          "type": "quantitative"
        },
        "y": {
          "field": "Miles_per_Gallon",
          "type": "quantitative"
        }
      },
      "mark": {"type": "point"}
    };
    var opt = {"renderer": "canvas", "actions": false};
    vegaEmbed("#vis", spec, opt);
  </script>
</body>
</html>

Посмотреть результат — chart.html.

По умолчанию Vega-Embed отрисовывает визуализацию через canvas. Для переключения на svg задайте embed_options:

chart.save('chart.html', embed_options={'renderer':'svg'})

Если для дальнейшей обработки или собственного HTML-отчёта нужна строка HTML, используйте Chart.to_html:

html_string = chart.to_html()
# Use html_string in your custom HTML generation

Chart.to_html возвращает строку с HTML-представлением диаграммы. Её можно встроить в более крупный документ или обработать программно.

HTML без подключения к Интернету

По умолчанию HTML, созданный через chart.save('chart.html'), загружает нужные библиотеки JavaScript из CDN. Файл получается небольшим, но для отображения диаграммы нужен Интернет.

Аргумент inline=True позволяет включить все необходимые библиотеки JavaScript непосредственно в HTML. Размер файла увеличится, зато для отображения не потребуется подключение к Интернету:

chart.save('chart.html', inline=True)

Форматы PNG, SVG и PDF

Чтобы сохранить диаграмму Altair как изображение PNG, SVG или PDF, используйте:

chart.save('chart.png')
chart.save('chart.svg')
chart.save('chart.pdf')

altair_saver

Размер и разрешение PNG

При сохранении PNG через chart.save() разрешение по умолчанию составляет 72 пикселя на дюйм (ppi). Чтобы изменить разрешение, сохранив физический размер изображения, задайте ppi. Например, сохраним изображение с разрешением 200 пикселей на дюйм:

chart.save('chart.png', ppi=200)

Чтобы изменить физический размер, сохранив разрешение, используйте scale_factor. Например, удвоим стандартный размер при стандартном разрешении 72 ppi:

chart.save('chart.png', scale_factor=2)

Дополнительные зависимости

Для сохранения изображений и автономных HTML-файлов нужен пакет vl-convert:

conda install -c conda-forge vl-convert-python

или:

pip install vl-convert-python

У vl-convert нет внешних зависимостей. Дополнительные сведения и известные ограничения описаны в его документации.

Ссылка для обмена диаграммой

Метод Chart.to_url создаёт ссылку, открывающую спецификацию диаграммы в онлайн-редакторе Vega:

import altair as alt
from altair.datasets import data

chart = alt.Chart(data.cars.url).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color='Origin:N'
)

chart.to_url()