Change default chart width from 400 to 300 (#2785)

* Change default chart width to 300 * Update documentation * Update vega-lite v4 reference to v5 * Revert changes made in commit 7093ca6 to v3 and v4 files
vega · Jan 8, 2023 · 178e9d7 · 178e9d7
1 parent 4ddd4e9
commit 178e9d7
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 15 deletions.
diff --git a/altair/vegalite/v5/theme.py b/altair/vegalite/v5/theme.py
@@ -22,7 +22,7 @@ def __init__(self, theme):
     def __call__(self):
         return {
             "usermeta": {"embedOptions": {"theme": self.theme}},
-            "config": {"view": {"continuousWidth": 400, "continuousHeight": 300}},
+            "config": {"view": {"continuousWidth": 300, "continuousHeight": 300}},
         }
 
     def __repr__(self):
@@ -37,14 +37,14 @@ def __repr__(self):
 
 themes.register(
     "default",
-    lambda: {"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}},
+    lambda: {"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}}},
 )
 themes.register(
     "opaque",
     lambda: {
         "config": {
             "background": "white",
-            "view": {"continuousWidth": 400, "continuousHeight": 300},
+            "view": {"continuousWidth": 300, "continuousHeight": 300},
         }
     },
 )

diff --git a/doc/user_guide/customization.rst b/doc/user_guide/customization.rst
@@ -582,7 +582,7 @@ For example, the default theme configures the default size of a single chart:
     >>> import altair as alt
     >>> default = alt.themes.get()
     >>> default()
-    {'config': {'view': {'continuousWidth': 400, 'continuousHeight': 300}}}
+    {'config': {'view': {'continuousWidth': 300, 'continuousHeight': 300}}}
 
 You can see that any chart you create will have this theme applied, and these configurations
 added to its specification:
@@ -673,7 +673,7 @@ fill unless otherwise specified:
             'config': {
                 'view': {
                     'height': 300,
-                    'width': 400,
+                    'width': 300,
                 },
                 'mark': {
                     'color': 'black',

diff --git a/doc/user_guide/internals.rst b/doc/user_guide/internals.rst
@@ -38,7 +38,7 @@ from which we can output the JSON representation:
         color='Origin:N',
     ).configure_view(
         continuousHeight=300,
-        continuousWidth=400,
+        continuousWidth=300,
     )
 
     print(chart.to_json(indent=2))
@@ -98,7 +98,7 @@ the above chart using these low-level object types directly:
         config=alt.Config(
             view=alt.ViewConfig(
                 continuousHeight=300,
-                continuousWidth=400
+                continuousWidth=300
             )
         )
     )

diff --git a/doc/user_guide/large_datasets.rst b/doc/user_guide/large_datasets.rst
@@ -54,7 +54,7 @@ simple chart made from a dataframe with three rows of data:
 .. code-block:: none
 
     {'$schema': 'https://vega.github.io/schema/vega-lite/v2.4.1.json',
-     'config': {'view': {'height': 300, 'width': 400}},
+     'config': {'view': {'height': 300, 'width': 300}},
      'data': {'values': [{'x': 1, 'y': 2}, {'x': 2, 'y': 1}, {'x': 3, 'y': 2}]},
      'encoding': {'x': {'field': 'x', 'type': 'quantitative'},
                   'y': {'field': 'y', 'type': 'quantitative'}},
@@ -119,7 +119,7 @@ You can also persist the data to disk and then pass the path to Altair:
 .. code-block:: none
 
     {'$schema': 'https://vega.github.io/schema/vega-lite/v2.4.1.json',
-     'config': {'view': {'height': 300, 'width': 400}},
+     'config': {'view': {'height': 300, 'width': 300}},
      'data': {'url': 'data.json'},
      'encoding': {'x': {'field': 'x', 'type': 'quantitative'},
                   'y': {'field': 'y', 'type': 'quantitative'}},

diff --git a/doc/user_guide/saving_charts.rst b/doc/user_guide/saving_charts.rst
@@ -41,7 +41,7 @@ The contents of the resulting file will look something like this:
       "config": {
         "view": {
           "continuousHeight": 300,
-          "continuousWidth": 400
+          "continuousWidth": 300
         }
       },
       "data": {
@@ -90,7 +90,7 @@ 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@4"></script>
+      <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
       <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
     </head>
     <body>
@@ -101,7 +101,7 @@ javascript-enabled web browser:
           "config": {
             "view": {
               "continuousHeight": 300,
-              "continuousWidth": 400
+              "continuousWidth": 300
             }
           },
           "data": {

diff --git a/tests/vegalite/v5/tests/test_api.py b/tests/vegalite/v5/tests/test_api.py
@@ -704,13 +704,13 @@ def test_themes():
 
     with alt.themes.enable("default"):
         assert chart.to_dict()["config"] == {
-            "view": {"continuousWidth": 400, "continuousHeight": 300}
+            "view": {"continuousWidth": 300, "continuousHeight": 300}
         }
 
     with alt.themes.enable("opaque"):
         assert chart.to_dict()["config"] == {
             "background": "white",
-            "view": {"continuousWidth": 400, "continuousHeight": 300},
+            "view": {"continuousWidth": 300, "continuousHeight": 300},
         }
 
     with alt.themes.enable("none"):

diff --git a/tests/vegalite/v5/tests/test_theme.py b/tests/vegalite/v5/tests/test_theme.py
@@ -15,5 +15,5 @@ def test_vega_themes(chart):
             dct = chart.to_dict()
         assert dct["usermeta"] == {"embedOptions": {"theme": theme}}
         assert dct["config"] == {
-            "view": {"continuousWidth": 400, "continuousHeight": 300}
+            "view": {"continuousWidth": 300, "continuousHeight": 300}
         }