vega · dangotbanned · Oct 17, 2024 · Oct 3, 2024 · Oct 4, 2024 · Oct 4, 2024
diff --git a/doc/_static/vega-altair_theme_test.html b/doc/_static/vega-altair_theme_test.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    #header {
+        padding: 10px 0 20px;
+        height: 20px;
+    }
+    #vis.vega-embed {
+      width: 100%;
+      display: flex;
+    }
+    #vis.vega-embed details,
+    #vis.vega-embed details summary {
+      position: relative;
+    }
+  </style>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
+</head>
+<body>
+  <div id="header">
+    Theme:
+    <select id="themes">
+      <option value="default">default</option>
+      <option value="excel">excel</option>
+      <option value="ggplot2">ggplot2</option>
+      <option value="quartz">quartz</option>
+      <option value="vox">vox</option>
+      <option value="dark">dark</option>
+      <option value="fivethirtyeight">fivethirtyeight</option>
+      <option value="latimes">latimes</option>
+      <option value="urbaninstitute">urbaninstitute</option>
+      <option value="googlecharts">googlecharts</option>
+      <option value="powerbi">powerbi</option>
+      <optgroup label="Carbon">
+        <option value="carbonwhite">carbonwhite</option>
+        <option value="carbong10">carbong10</option>
+        <option value="carbong90">carbong90</option>
+        <option value="carbong100">carbong100</option>
+      </optgroup>
+    </select>
+    <br />
+  </div>
+  <div id="vis"></div>
+  <script>
+    // Vega Theme Test - But single view, no renderer option
+    var spec = {"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}}, "vconcat": [{"hconcat": [{"mark": {"type": "bar"}, "encoding": {"tooltip": {"field": "Value", "type": "quantitative"}, "x": {"axis": {"offset": 1}, "field": "Index", "type": "ordinal"}, "y": {"field": "Value", "type": "quantitative"}}, "height": 150, "title": "Bar", "width": 480}, {"mark": {"type": "line"}, "encoding": {"color": {"field": "Category", "legend": null, "type": "nominal"}, "tooltip": [{"field": "Index", "type": "ordinal"}, {"field": "Value", "type": "quantitative"}, {"field": "Position", "type": "ordinal"}, {"field": "Category", "type": "nominal"}], "x": {"axis": {"grid": false}, "field": "Position", "type": "ordinal"}, "y": {"axis": {"grid": false}, "field": "Value", "type": "quantitative"}}, "height": 150, "title": "Line", "width": 240}], "data": {"name": "data-350e01a51910ca71199fd9a93e2cbdb2"}}, {"hconcat": [{"data": {"name": "data-350e01a51910ca71199fd9a93e2cbdb2"}, "mark": {"type": "point"}, "encoding": {"color": {"field": "Category", "legend": null, "type": "nominal"}, "shape": {"field": "Category", "legend": null, "type": "nominal"}, "tooltip": [{"field": "Index", "type": "ordinal"}, {"field": "Value", "type": "quantitative"}, {"field": "Position", "type": "ordinal"}, {"field": "Category", "type": "nominal"}], "x": {"axis": {"grid": false}, "field": "Position", "type": "ordinal"}, "y": {"axis": {"grid": false}, "field": "Value", "type": "quantitative"}}, "height": 200, "title": "Point (Shape)", "width": 200}, {"data": {"url": "https://cdn.jsdelivr.net/npm/[email protected]/data/barley.json"}, "mark": {"type": "bar", "tooltip": true}, "encoding": {"color": {"field": "site", "type": "nominal"}, "column": {"field": "year", "type": "ordinal"}, "x": {"field": "yield", "type": "quantitative"}, "y": {"field": "variety", "type": "nominal"}}, "title": {"text": "Bar (Facet)", "anchor": "middle"}, "width": 220}], "resolve": {"scale": {"color": "independent"}}}, {"hconcat": [{"data": {"url": "https://cdn.jsdelivr.net/npm/[email protected]/data/movies.json"}, "mark": {"type": "point", "tooltip": true}, "encoding": {"color": {"field": "Rating_Delta", "scale": {"domainMid": 0}, "title": "Rating Delta", "type": "quantitative"}, "x": {"field": "Release_Date", "title": "Release Date", "type": "temporal"}, "y": {"field": "Rating_Delta", "title": "Rating Delta", "type": "quantitative"}}, "height": 250, "title": "Point", "transform": [{"filter": "(datum['IMDB_Rating'] !== null)"}, {"filter": {"field": "Release_Date", "range": [null, 2019], "timeUnit": "year"}}, {"joinaggregate": [{"op": "mean", "field": "IMDB_Rating", "as": "Average_Rating"}]}, {"calculate": "(datum['IMDB_Rating'] - datum.Average_Rating)", "as": "Rating_Delta"}], "width": 250}, {"data": {"url": "https://cdn.jsdelivr.net/npm/[email protected]/data/iowa-electricity.csv"}, "mark": {"type": "area", "tooltip": true}, "encoding": {"color": {"field": "source", "title": "Electricity source", "type": "nominal"}, "x": {"field": "year", "title": "Year", "type": "temporal"}, "y": {"axis": {"format": ".0%"}, "field": "net_generation", "stack": "normalize", "title": "Share of net generation", "type": "quantitative"}}, "height": 250, "title": "Area", "width": 250}]}, {"data": {"url": "https://cdn.jsdelivr.net/npm/[email protected]/data/seattle-weather.csv"}, "mark": {"type": "rect"}, "encoding": {"color": {"aggregate": "max", "field": "temp_max", "title": null, "type": "quantitative"}, "tooltip": [{"field": "date", "timeUnit": "monthdate", "title": "Date", "type": "ordinal"}, {"aggregate": "max", "field": "temp_max", "title": "Max Temp", "type": "quantitative"}], "x": {"axis": {"format": "%e", "labelAngle": 0}, "field": "date", "timeUnit": "date", "title": "Day", "type": "ordinal"}, "y": {"field": "date", "timeUnit": "month", "title": "Month", "type": "ordinal"}}, "height": 200, "title": {"text": "Rect (Heatmap)", "subtitle": "Daily Max Temperatures (C) in Seattle, WA"}}, {"data": {"url": "https://cdn.jsdelivr.net/npm/[email protected]/data/us-10m.json", "format": {"feature": "counties", "type": "topojson"}}, "mark": {"type": "geoshape", "tooltip": true}, "encoding": {"color": {"field": "rate", "type": "quantitative"}}, "height": 300, "projection": {"type": "albersUsa"}, "title": {"text": "Geoshape", "subtitle": "Unemployment rate per county"}, "transform": [{"lookup": "id", "from": {"data": {"url": "https://cdn.jsdelivr.net/npm/[email protected]/data/unemployment.tsv"}, "key": "id", "fields": ["rate"]}}], "width": 500}], "title": {"text": "Vega-Altair Theme Test", "fontSize": 20, "offset": 16, "subtitle": "Adapted from https://vega.github.io/vega-themes/"}, "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json", "datasets": {"data-350e01a51910ca71199fd9a93e2cbdb2": [{"Index": 1, "Value": 28, "Position": 1, "Category": "A"}, {"Index": 2, "Value": 55, "Position": 2, "Category": "A"}, {"Index": 3, "Value": 43, "Position": 3, "Category": "A"}, {"Index": 4, "Value": 91, "Position": 4, "Category": "A"}, {"Index": 5, "Value": 81, "Position": 5, "Category": "A"}, {"Index": 6, "Value": 53, "Position": 6, "Category": "A"}, {"Index": 7, "Value": 19, "Position": 1, "Category": "B"}, {"Index": 8, "Value": 87, "Position": 2, "Category": "B"}, {"Index": 9, "Value": 52, "Position": 3, "Category": "B"}, {"Index": 10, "Value": 48, "Position": 4, "Category": "B"}, {"Index": 11, "Value": 24, "Position": 5, "Category": "B"}, {"Index": 12, "Value": 49, "Position": 6, "Category": "B"}, {"Index": 13, "Value": 87, "Position": 1, "Category": "C"}, {"Index": 14, "Value": 66, "Position": 2, "Category": "C"}, {"Index": 15, "Value": 17, "Position": 3, "Category": "C"}, {"Index": 16, "Value": 27, "Position": 4, "Category": "C"}, {"Index": 17, "Value": 68, "Position": 5, "Category": "C"}, {"Index": 18, "Value": 16, "Position": 6, "Category": "C"}]}};
+    var container = document.querySelector("#vis");
+    var themes = document.querySelector("#themes");
+    var currentLocation = window.location;
+    var url = new URL(currentLocation);
+
+    themes.addEventListener("change", function () {
+      theme = themes.options[themes.selectedIndex].value;
+      url.searchParams.set("theme", `${themes.options[themes.selectedIndex].value}`);
+      window.history.replaceState(null, null, url);
+      refresh();
+    });
+
+    function refresh() {
+      const themeName = themes.options[themes.selectedIndex].value;
+      container.innerHTML = "";
+      var el = document.createElement("div");
+      el.setAttribute("class", "view");
+      container.appendChild(el);
+      vegaEmbed(el, spec, {
+          theme: themeName,
+          defaultStyle: true,
+          mode: "vega-lite"
+      });
+    }
+
+    // Mostly the standard template
+    // - Need to adapt these two ideas into one
+    (function(vegaEmbed) {
+      var embedOpt = { mode: "vega-lite" };
+
+      function showError(el, error){
+          el.innerHTML = ('<div style="color:red;">'
+                          + '<p>JavaScript Error: ' + error.message + '</p>'
+                          + "<p>This usually means there's a typo in your chart specification. "
+                          + "See the javascript console for the full traceback.</p>"
+                          + '</div>');
+          throw error;
+      }
+      const el = document.getElementById('vis');
+      vegaEmbed("#vis", spec, embedOpt)
+        .catch(error => showError(el, error));
+    })(vegaEmbed);
+
+  </script>
+</body>
+</html>
diff --git a/doc/conf.py b/doc/conf.py
@@ -39,6 +39,7 @@
     "sphinxext_altair.altairplot",
     "sphinxext.altairgallery",
     "sphinxext.schematable",
+    "sphinxext.code_ref",
     "sphinx_copybutton",
     "sphinx_design",
 ]

diff --git a/doc/user_guide/customization.rst b/doc/user_guide/customization.rst
@@ -790,8 +790,16 @@ If you would like to use any theme just for a single chart, you can use the
 Currently Altair does not offer many built-in themes, but we plan to add
 more options in the future.
 
+..
+    _comment: Keeping both (temporary) to compare. `altair` version is a lot slower.
+
 See `Vega Theme Test`_ for an interactive demo of themes inherited from `Vega Themes`_.
 
+See `Vega-Altair Theme Test`_ for an interactive demo of themes inherited from `Vega Themes`_.
+
+.. altair-theme:: tests.altair_theme_test.alt_theme_test
+    :fold:
+
 Defining a Custom Theme
 ~~~~~~~~~~~~~~~~~~~~~~~
 The theme registry also allows defining and registering custom themes.
@@ -843,6 +851,13 @@ If you want to restore the default theme, use:
 
    alt.themes.enable('default')
 
+When experimenting with your theme, you can use the code below to see how 
+it translates across a range of charts/marks:
+
+.. altair-code-ref:: tests.altair_theme_test.alt_theme_test
+    :fold:
+    :summary: Show Vega-Altair Theme Test code
+
 
 For more ideas on themes, see the `Vega Themes`_ repository.
 
@@ -890,4 +905,5 @@ The configured localization settings persist upon saving.
 
 .. _Vega Themes: https://github.com/vega/vega-themes/
 .. _`D3's localization support`: https://d3-wiki.readthedocs.io/zh-cn/master/Localization/
-.. _Vega Theme Test: https://vega.github.io/vega-themes/?renderer=canvas
+.. _Vega Theme Test: https://vega.github.io/vega-themes/?renderer=canvas
+.. _Vega-Altair Theme Test: ../_static/vega-altair_theme_test.html