From df28a4aba310bbd9d2d21c1502f64f4b36ada2f5 Mon Sep 17 00:00:00 2001
From: Jake VanderPlas <jakevdp@google.com>
Date: Thu, 26 Dec 2019 16:02:53 -0800
Subject: [PATCH] DOC: update saving docs

---
 doc/_static/chart.html           |  12 +--
 doc/user_guide/saving_charts.rst | 132 +++++++++++++++----------------
 2 files changed, 72 insertions(+), 72 deletions(-)
diff --git a/doc/_static/chart.html b/doc/_static/chart.html
index 2295fcc18..fbd768d60 100644
--- a/doc/_static/chart.html
+++ b/doc/_static/chart.html
@@ -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": {
diff --git a/doc/user_guide/saving_charts.rst b/doc/user_guide/saving_charts.rst
index 7379d5711..5e63f3965 100644
--- a/doc/user_guide/saving_charts.rst
+++ b/doc/user_guide/saving_charts.rst
@@ -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:
 
@@ -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": {
@@ -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": {
@@ -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/
