Skip to content

Commit

Permalink
Merge pull request #1887 from jakevdp/save-doc
Browse files Browse the repository at this point in the history
DOC: update saving docs
  • Loading branch information
jakevdp authored Dec 27, 2019
2 parents bccfad1 + df28a4a commit 2daac87
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 72 deletions.
12 changes: 6 additions & 6 deletions doc/_static/chart.html
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"config": {
"view": {
"height": 300,
"width": 400
"continuousHeight": 300,
"continuousWidth": 400
}
},
"data": {
Expand Down
132 changes: 66 additions & 66 deletions doc/user_guide/saving_charts.rst
Original file line number Diff line number Diff line change
Expand Up @@ -5,64 +5,7 @@
Saving Altair Charts
--------------------
Altair chart objects have a :meth:`Chart.save` method which allows charts
to be saved in a variety of formats.

.. _saving-png:

PNG and SVG format
~~~~~~~~~~~~~~~~~~
To save an Altair chart object as a PNG or SVG image, you can use

.. code-block:: python
chart.save('chart.png')
chart.save('chart.svg')
However, saving these images requires some additional dependencies to run the
javascript code necessary to interpret the Vega-Lite specification and output
it in the form of an image.

Altair is set up to do this conversion using selenium and headless Chrome or
Firefox, which requires the following:

- the Selenium_ python package. This can be installed using::

$ conda install selenium

or::

$ pip install selenium

- a recent version of `Google Chrome`_ or `Mozilla Firefox`_. Please see the
Chrome or Firefox installation page for installation details for your own
operating system.

- `Chrome Driver`_ or `Gecko Driver`_, which allows Chrome or Firefox
respectively to be run in a *headless* state (i.e. to execute Javascript
code without opening an actual browser window).
If you use homebrew on OSX, this can be installed with::

$ brew cask install chromedriver
$ brew install geckodriver

See the ``chromedriver`` or ``geckodriver`` documentation for details on
installation.

Once those dependencies are installed, you should be able to save charts as
``png`` or ``svg``. Altair defaults to using chromedriver. If you'd like to use geckodriver::

chart.save('chart.png', webdriver='firefox')

Figure Size/Resolution
^^^^^^^^^^^^^^^^^^^^^^
When using ``chart.save()`` above, the resolution of the resulting PNG is
controlled by the resolution of your screen. The easiest way to produce a
higher-resolution PNG image is to scale the image to make it larger, and thus
to contain more pixels at a given resolution.

This can be done with the ``scale_factor`` argument, which defaults to 1.0::

chart.save('chart.png', scale_factor=2.0)
to be saved in a variety of formats.

.. saving-json:
Expand Down Expand Up @@ -94,11 +37,11 @@ The contents of the resulting file will look something like this:
.. code-block:: json
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"config": {
"view": {
"height": 300,
"width": 400
"continuousHeight": 300,
"continuousWidth": 400
}
},
"data": {
Expand Down Expand Up @@ -147,18 +90,18 @@ javascript-enabled web browser:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"config": {
"view": {
"height": 300,
"width": 400
"continuousHeight": 300,
"continuousWidth": 400
}
},
"data": {
Expand Down Expand Up @@ -201,6 +144,63 @@ change to ``svg`` rendering, use the ``embed_options`` as such:
This is not the same as ``alt.renderers.enable('svg')``, what renders a
static ``svg`` image.

.. _saving-png:

PNG and SVG format
~~~~~~~~~~~~~~~~~~
To save an Altair chart object as a PNG or SVG image, you can use

.. code-block:: python
chart.save('chart.png')
chart.save('chart.svg')
However, saving these images requires some additional dependencies to run the
javascript code necessary to interpret the Vega-Lite specification and output
it in the form of an image.

Altair is set up to do this conversion using selenium and headless Chrome or
Firefox, which requires the following:

- the Selenium_ python package. This can be installed using::

$ conda install selenium

or::

$ pip install selenium

- a recent version of `Google Chrome`_ or `Mozilla Firefox`_. Please see the
Chrome or Firefox installation page for installation details for your own
operating system.

- `Chrome Driver`_ or `Gecko Driver`_, which allows Chrome or Firefox
respectively to be run in a *headless* state (i.e. to execute Javascript
code without opening an actual browser window).
If you use homebrew on OSX, this can be installed with::

$ brew cask install chromedriver
$ brew install geckodriver

See the ``chromedriver`` or ``geckodriver`` documentation for details on
installation.

Once those dependencies are installed, you should be able to save charts as
``png`` or ``svg``. Altair defaults to using chromedriver. If you'd like to use geckodriver::

chart.save('chart.png', webdriver='firefox')

Figure Size/Resolution
^^^^^^^^^^^^^^^^^^^^^^
When using ``chart.save()`` above, the resolution of the resulting PNG is
controlled by the resolution of your screen. The easiest way to produce a
higher-resolution PNG image is to scale the image to make it larger, and thus
to contain more pixels at a given resolution.

This can be done with the ``scale_factor`` argument, which defaults to 1.0::

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


.. _Selenium: http://selenium-python.readthedocs.io/
.. _Google Chrome: https://www.google.com/chrome/
Expand Down

0 comments on commit 2daac87

Please sign in to comment.