From 4b1e9cca7d478038ea27edb5b30138f980ce2c3d Mon Sep 17 00:00:00 2001 From: Joel Ostblom Date: Tue, 15 Nov 2022 12:56:30 -0800 Subject: [PATCH] Update docs styling based on the new pydata template (#2716) * Move logo to top left corner and add text * Fix warnings from short title underlines * Remove right navbar for examples No use for this since there are no headings and it cuts off some plots * Set language to silence build warning * Set icons and theme switcher as well as default white theme * Remove source links since this shows the right navbar * Remove right navbar on landing page * Fix broken gallery links from encoding page * Adjust icon size * Remove css specific to the old template * Fix indentation * Correct gallery reference --- altair/examples/annual_weather_heatmap.py | 2 +- altair/examples/connected_scatterplot.py | 2 +- altair/examples/errorbars_with_std.py | 2 +- altair/examples/histogram_heatmap.py | 2 +- altair/examples/histogram_scatterplot.py | 2 +- altair/examples/interactive_scatter_plot.py | 2 +- altair/examples/lasagna_plot.py | 2 +- altair/examples/mosaic_with_labels.py | 2 +- altair/examples/scatter_marginal_hist.py | 2 +- altair/examples/strip_plot_jitter.py | 10 +++- altair/sphinxext/altairgallery.py | 2 + doc/_static/custom.css | 63 ++------------------- doc/conf.py | 36 +++++++++--- doc/index.rst | 2 + doc/user_guide/encoding.rst | 6 +- 15 files changed, 57 insertions(+), 80 deletions(-) diff --git a/altair/examples/annual_weather_heatmap.py b/altair/examples/annual_weather_heatmap.py index 96862a710..972c42404 100644 --- a/altair/examples/annual_weather_heatmap.py +++ b/altair/examples/annual_weather_heatmap.py @@ -1,6 +1,6 @@ """ Annual Weather Heatmap ------------- +---------------------- """ # category: tables import altair as alt diff --git a/altair/examples/connected_scatterplot.py b/altair/examples/connected_scatterplot.py index c31d3abf1..8528fb86f 100644 --- a/altair/examples/connected_scatterplot.py +++ b/altair/examples/connected_scatterplot.py @@ -1,6 +1,6 @@ """ Connected Scatter Plot (Lines with Custom Paths) ------------------------------------------------ +------------------------------------------------ This example show how the order encoding can be used to draw a custom path. The dataset tracks miles driven per capita along with gas prices annually from 1956 to 2010. It is based on Hannah Fairfield's article 'Driving Shifts Into Reverse'. See https://archive.nytimes.com/www.nytimes.com/imagepages/2010/05/02/business/02metrics.html for the original. diff --git a/altair/examples/errorbars_with_std.py b/altair/examples/errorbars_with_std.py index 76776d733..167bc7283 100644 --- a/altair/examples/errorbars_with_std.py +++ b/altair/examples/errorbars_with_std.py @@ -1,6 +1,6 @@ """ Error Bars with Standard Deviation ---------------------------------- +---------------------------------- This example shows how to show error bars with standard deviation using crop yields data of different in the years of 1930s. """ diff --git a/altair/examples/histogram_heatmap.py b/altair/examples/histogram_heatmap.py index 186c78663..e284449f3 100644 --- a/altair/examples/histogram_heatmap.py +++ b/altair/examples/histogram_heatmap.py @@ -1,6 +1,6 @@ """ 2D Histogram Heatmap --------------- +-------------------- This example shows how to make a heatmap from binned quantitative data. """ # category: distributions diff --git a/altair/examples/histogram_scatterplot.py b/altair/examples/histogram_scatterplot.py index d46c6ff87..482eee760 100644 --- a/altair/examples/histogram_scatterplot.py +++ b/altair/examples/histogram_scatterplot.py @@ -1,6 +1,6 @@ """ 2D Histogram Scatter Plot ------------------- +------------------------- This example shows how to make a 2d histogram scatter plot. """ # category: distributions diff --git a/altair/examples/interactive_scatter_plot.py b/altair/examples/interactive_scatter_plot.py index 1d7f0be72..a6e7fc37f 100644 --- a/altair/examples/interactive_scatter_plot.py +++ b/altair/examples/interactive_scatter_plot.py @@ -1,6 +1,6 @@ """ Simple Interactive Colored Scatter Plot --------------------------------------- +--------------------------------------- This example shows how to make an interactive scatter plot. """ # category: interactive charts diff --git a/altair/examples/lasagna_plot.py b/altair/examples/lasagna_plot.py index 42c1128b6..6f603b8e1 100644 --- a/altair/examples/lasagna_plot.py +++ b/altair/examples/lasagna_plot.py @@ -1,6 +1,6 @@ """ Lasagna Plot (Dense Time-Series Heatmap) ------------- +---------------------------------------- """ # category: tables import altair as alt diff --git a/altair/examples/mosaic_with_labels.py b/altair/examples/mosaic_with_labels.py index 6fea981cf..2db0baff2 100644 --- a/altair/examples/mosaic_with_labels.py +++ b/altair/examples/mosaic_with_labels.py @@ -1,6 +1,6 @@ """ Mosaic Chart with Labels ------------- +------------------------ """ # category: tables diff --git a/altair/examples/scatter_marginal_hist.py b/altair/examples/scatter_marginal_hist.py index 17a1a70df..52455dcc0 100644 --- a/altair/examples/scatter_marginal_hist.py +++ b/altair/examples/scatter_marginal_hist.py @@ -1,6 +1,6 @@ """ Facetted Scatter Plot with Marginal Histograms ---------------------------------------------- +---------------------------------------------- This example demonstrates how to generate a facetted scatter plot, with marginal facetted histograms, and how to share their respective - x,some y-limits. diff --git a/altair/examples/strip_plot_jitter.py b/altair/examples/strip_plot_jitter.py index dd6b17b14..e0b7d1645 100644 --- a/altair/examples/strip_plot_jitter.py +++ b/altair/examples/strip_plot_jitter.py @@ -1,7 +1,13 @@ """ Strip Plot with Jitter ---------- -In this chart, we encode the ``Major_Genre`` column from the ``movies`` dataset in the ``y``-channel. In the default presentation of this data, it would be difficult to gauge the relative frequencies with which different values occur because there would be so much overlap. To address this, we use the ``yOffset`` channel to incorporate a random offset (jittering). The example is shown twice, on the left side using normally distributed and on the right side using uniformally distributed jitter. +---------------------- +In this chart, we encode the ``Major_Genre`` column from the ``movies`` dataset +in the ``y``-channel. In the default presentation of this data, it would be +difficult to gauge the relative frequencies with which different values occur +because there would be so much overlap. To address this, we use the ``yOffset`` +channel to incorporate a random offset (jittering). The example is shown twice, +on the left side using normally distributed and on the right side using +uniformally distributed jitter. """ # category: distributions import altair as alt diff --git a/altair/sphinxext/altairgallery.py b/altair/sphinxext/altairgallery.py index 749727bbc..eae1a3247 100644 --- a/altair/sphinxext/altairgallery.py +++ b/altair/sphinxext/altairgallery.py @@ -97,6 +97,8 @@ EXAMPLE_TEMPLATE = jinja2.Template( """ +:html_theme.sidebar_secondary.remove: + .. This document is auto-generated by the altair-gallery extension. Do not modify directly. .. _gallery_{{ name }}: diff --git a/doc/_static/custom.css b/doc/_static/custom.css index 36fe8f625..e5b8cc7c7 100644 --- a/doc/_static/custom.css +++ b/doc/_static/custom.css @@ -25,61 +25,8 @@ table.docutils td li { } -/* Everything below this comment is for the pydata sphinx theme*/ - -/* Blue topbar */ -.navbar-light { - background-color: #16A7F0 !important; -} -/* White text in topbar */ -.navbar-light a { - color: #fff !important; -} -/* White bold project title in topbar */ -.navbar-light p.title { - font-size: 26px !important; - font-weight: 800 !important; - color: #fff !important; - text-align: center; - width: 100%; -} -/* There is a small jump in the title positionin when the navbar transitions full */ -/* title to the collapse button. 27% width here makes that jump as discrete as possible */ -div#navbar-start { - width: 27%; - margin-left: 0px !important; -} -/* Adjust the title position for narrow screens, such as mobile phones. */ -/* This also prevents that the collapse button stacks under the title, */ -/* which would cover a bit of the logo. 719px makes the title */ -/* switch to narrow screen layout at the same time as the rest of the page. */ -@media only screen and (max-width: 719px) { - div#navbar-start { - width: 60%; - margin-left: 0px !important; - } - .navbar-light p.title { - text-align: right; - } -} - -/* Version number in the same darkblue color as other text */ -div.navbar-brand-box p#site-version.site-version { - color: #130654 !important; -} -/* The box that contains the logo and the version number */ -div.navbar-brand-box a { - width: 100% !important; - height: auto !important; - flex-direction: column !important; -} -/* The logo */ -div.navbar-brand-box img { - display: block !important; - height: auto !important; - width: auto !important; - max-height: 18vh !important; - max-width: 100% !important; - margin: 0 auto !important; - margin-top: -40px !important; -} +/* Use full page width without sidebars */ +/* .bd-content { */ +/* max-width: 100%; */ +/* flex-grow: 1; */ +/* } */ diff --git a/doc/conf.py b/doc/conf.py index 99a075d57..a8b6c57d9 100644 --- a/doc/conf.py +++ b/doc/conf.py @@ -66,9 +66,9 @@ master_doc = "index" # General information about the project. -project = "Altair" -copyright = "2016-{}, Altair Developers".format(datetime.now().year) -author = "Altair Developers" +project = "Vega-Altair" +copyright = "2016-{}, Vega-Altair Developers".format(datetime.now().year) +author = "Vega-Altair Developers" # The version info for the project you're documenting, acts as replacement for # |version| and |release|, also used in various other places throughout the @@ -84,7 +84,7 @@ # # This is also used if you do content translation via gettext catalogs. # Usually you set "language" from the command line for these cases. -language = None +language = 'en' # There are two options for replacing |today|: either, you set today to some # non-false value, then it is used: @@ -135,9 +135,28 @@ # further. For a list of options available for each theme, see the # documentation. html_theme_options = { - "navbar_start": ["navbar-project"], + "navbar_start": ["navbar-logo", "navbar-project"], "navbar_center": ["navbar-nav"], - "navbar_end": ["navbar-icon-links"], + "navbar_end": ["theme-switcher", "navbar-icon-links"], + "footer_items": [], + "icon_links": [ + { + "name": "GitHub", + "url": "https://github.com/altair-viz/altair", + "icon": "fab fa-github fa-lg", + "type": "fontawesome", + }, + { + "name": "StackOverflow", + "url": "https://stackoverflow.com/tags/altair", + "icon": "fab fa-stack-overflow fa-xl", + "type": "fontawesome", + }, + ] +} + +html_context = { + "default_mode": "light" } # Add any paths that contain custom themes here, relative to this directory. @@ -189,7 +208,8 @@ def setup(app): # Custom sidebar templates, maps document names to template names. html_sidebars = { - "**": ["sidebar-logo", "search-field", "sidebar-nav-bs", "sidebar-ethical-ads"], + "index": [], + "**": ["sidebar-nav-bs", "sidebar-ethical-ads"], } # Redirection of old page locations via the rediraffe sphinx-extension @@ -212,7 +232,7 @@ def setup(app): # html_split_index = False # If true, links to the reST sources are added to the pages. -# html_show_sourcelink = True +html_show_sourcelink = False # If true, "Created using Sphinx" is shown in the HTML footer. Default is True. # html_show_sphinx = True diff --git a/doc/index.rst b/doc/index.rst index 637b47e63..128b7e00c 100644 --- a/doc/index.rst +++ b/doc/index.rst @@ -1,3 +1,5 @@ +:html_theme.sidebar_secondary.remove: + Vega-Altair: Declarative Visualization in Python ================================================ .. role:: raw-html(raw) diff --git a/doc/user_guide/encoding.rst b/doc/user_guide/encoding.rst index 568cb6711..7ac79182c 100644 --- a/doc/user_guide/encoding.rst +++ b/doc/user_guide/encoding.rst @@ -50,8 +50,8 @@ x :class:`X` The x-axis value :ref:`galler y :class:`Y` The y-axis value :ref:`gallery_scatter_tooltips` x2 :class:`X2` Second x value for ranges :ref:`gallery_gantt_chart` y2 :class:`Y2` Second y value for ranges :ref:`gallery_candlestick_chart` -longitude :class:`Longitude` Longitude for geo charts :ref:`gallery_airports` -latitude :class:`Latitude` Latitude for geo charts :ref:`gallery_airports` +longitude :class:`Longitude` Longitude for geo charts :ref:`gallery_point_map` +latitude :class:`Latitude` Latitude for geo charts :ref:`gallery_point_map` longitude2 :class:`Longitude2` Second longitude value for ranges :ref:`gallery_airport_connections` latitude2 :class:`Latitude2` Second latitude value for ranges :ref:`gallery_airport_connections` xError :class:`XError` The x-axis error value N/A @@ -59,7 +59,7 @@ yError :class:`YError` The y-axis error value N/A xError2 :class:`XError2` The second x-axis error value N/A yError2 :class:`YError2` The second y-axis error value N/A xOffset :class:`XOffset` Offset to the x position :ref:`gallery_grouped_bar_chart2` -yOffset :class:`YOffset` Offset to the y position :ref:`gallery_jitter_chart` +yOffset :class:`YOffset` Offset to the y position :ref:`gallery_strip_plot_jitter` theta :class:`Theta` The start arc angle :ref:`gallery_radial_chart` theta2 :class:`Theta2` The end arc angle (radian) :ref:`gallery_pacman_chart` ========== =================== ================================= ===================================