matplotlib · story645 · Jun 15, 2023 · Jun 11, 2023 · Jun 11, 2023 · Jun 11, 2023
diff --git a/doc/_static/image-rotator.js b/doc/_static/image-rotator.js
@@ -0,0 +1,46 @@
+// accessible JavaScript tab switcher
+// modified from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
+
+function getRandomInt(max) {
+  return Math.floor(Math.random() * max);
+}
+
+var images_rotate = [
+    {"image": "sphx_glr_plot_001_2_00x.png", "caption": "plot(x, y)", "link": "plot_types/basic/plot.html"},
+    {"image": "sphx_glr_step_001_2_00x.png", "caption": "step(x, y)", "link": "plot_types/basic/step.html"},
+    {"image": "sphx_glr_scatter_plot_001_2_00x.png", "caption": "scatter(x, y)", "link": "plot_types/basic/scatter_plot.html"},
+    {"image": "sphx_glr_pcolormesh_001_2_00x.png", "caption": "pcolormesh(X, Y, Z)", "link": "plot_types/arrays/pcolormesh.html"},
+    {"image": "sphx_glr_contourf_001_2_00x.png", "caption": "contourf(X, Y, Z)", "link": "plot_types/arrays/contourf.html"},
+    {"image": "sphx_glr_step_001_2_00x.png", "caption": "step(x, y)", "link": "plot_types/basic/step.html"},
+    {"image": "sphx_glr_streamplot_001_2_00x.png", "caption": "streamplot(X, Y, U, V)", "link": "plot_types/arrays/streamplot.html"},
+    {"image": "sphx_glr_bar_001_2_00x.png", "caption": "bar(x, height) / barh(y, width)", "link": "plot_types/basic/bar.html"},
+    {"image": "sphx_glr_hist_plot_001_2_00x.png", "caption": "hist(x)", "link": "plot_types/stats/hist_plot.html"},
+    {"image": "sphx_glr_imshow_001_2_00x.png", "caption": "imshow(Z)", "link": "plot_types/arrays/imshow.html"},
+];
+
+document.addEventListener("DOMContentLoaded", function(event) {
+  ///////////////////////////////////////
+  // rotate images in images-rotate directory:
+  var ind = getRandomInt(images_rotate.length);
+  var info = images_rotate[ind];
+  var img_src = "../_images/" + info.image;
+  var caption = info.caption;
+  var link = "https://matplotlib.org/stable/" + info.link;
+  var html = '<a href="' + link + '">' +
+    '<img class="imrot-img" src="' + img_src + '" aria-labelledby="sample-plot-caption"/>' +
+    '<div class="imrot-cap" id="sample-plot-caption">' + caption + '</div>' +
+    '</a>';
+document.getElementById('image_rotator').innerHTML = html;
+
+  ind = getRandomInt(images_rotate.length);
+  info = images_rotate[ind];
+  img_src = "../_images/" + info.image;
+  caption = info.caption;
+  link = "https://matplotlib.org/stable/" + info.link;
+  html = '<a href="' + link + '">' +
+  '<img class="imrot-img" src="' + img_src + '" aria-labelledby="sample-plot-caption"/>' +
+  '<div class="imrot-cap" id="sample-plot-caption">' + caption + '</div>' +
+  '</a>';
+document.getElementById('image_rotator2').innerHTML = html;
+
+});
diff --git a/doc/_static/mpl.css b/doc/_static/mpl.css
@@ -120,3 +120,16 @@ div.wide-table table th.stub {
     left: 0;
     position: sticky;
 }
+
+.imrot-img {
+    display: flex;
+    margin: auto;
+    max-width:15em;
+    align-self: center;
+  }
+
+  .imrot-cap {
+    text-align: center;
+    font-style: italic;
+    font-size:  large;
+  }
diff --git a/doc/conf.py b/doc/conf.py
@@ -772,4 +772,5 @@ def setup(app):
         bld_type = 'rel'
     app.add_config_value('skip_sub_dirs', 0, '')
     app.add_config_value('releaselevel', bld_type, 'env')
+    app.add_js_file('image-rotator.js')
     app.connect('html-page-context', add_html_cache_busting, priority=1000)
diff --git a/doc/users/index.rst b/doc/users/index.rst
@@ -2,40 +2,86 @@
 
 .. redirect-from:: /contents
 
-
 ##########
 User guide
 ##########
 
-General
-#######
+.. grid:: 1 1 2 2
+
+   .. grid-item-card:: Starting information
+      :padding: 2
+
+      .. plot::
+
+         rng = np.random.default_rng(seed=19680808)
+         x = np.linspace(0, 4, 1000)  # Sample data.
+         y = rng.normal(size=len(x)) * 1.5 + x**2 + np.cumsum(rng.normal(size=len(x))) / 6
+         x = x[::10]
+         y = y[::10]
+         fig, ax = plt.subplots(figsize=(5, 2.7), layout='constrained')
+
+         ax.plot(x, x**2, label='underlying data', linewidth=4, alpha=0.6, color='k')
+         ax.scatter(x, y, s=13 * rng.random(size=len(x)), c=rng.normal(size=len(x)),
+               label='noisy data')
+         # p = np.polyfit(x, y, deg=1)
+         # print(p)
+         p = np.array([ 3.81283983, -2.00111268])
+         out = np.polyval(p, x)
+         ax.plot(x, out, label='linear fit')  # Plot some data on the axes.
+         # p = np.polyfit(x, y, deg=2)
+         # print(p)
+         p = np.array([ 1.18076933, -0.86768725,  1.05989268])
+         out = np.polyval(p, x)
+         ax.plot(x, out, label='quadratic fit')
+         ax.set_xlabel('x label')
+         ax.set_ylabel('y label')
+         ax.set_title("Simple plot")
+         ax.legend()
+
+
+      .. toctree::
+         :maxdepth: 1
+
+         getting_started/index.rst
+         installing/index.rst
+         FAQ: How-to and troubleshooting <faq/index.rst>
+
+   .. grid-item-card:: Users guide
+      :padding: 2
+
+      .. toctree::
+         :maxdepth: 2
+
+         explain/index.rst
+
+   .. grid-item-card:: Tutorials and examples
+      :padding: 2
+
+      .. toctree::
+         :maxdepth: 1
+
+         ../plot_types/index.rst
+         ../gallery/index.rst
+         ../tutorials/index.rst
+         resources/index.rst
+
 
-.. toctree::
-   :maxdepth: 2
+      .. raw:: html
 
-   getting_started/index.rst
-   installing/index.rst
-   explain/index.rst
-   faq/index.rst
-   resources/index.rst
+         <div class="grid__intro" id="image_rotator"></div>
 
-Tutorials and examples
-######################
 
-.. toctree::
-   :maxdepth: 1
+   .. grid-item-card:: More information
+      :padding: 2
 
-   ../plot_types/index.rst
-   ../tutorials/index.rst
-   ../gallery/index.rst
+      .. toctree::
+         :maxdepth: 1
 
-Reference
-#########
+         Reference <../api/index.rst>
+         Contribute <../devel/index.rst>
+         Releases <release_notes.rst>
 
-.. toctree::
-   :maxdepth: 2
+      .. toctree::
+         :maxdepth: 2
 
-   ../api/index.rst
-   ../devel/index.rst
-   project/index.rst
-   release_notes.rst
+         project/index.rst
diff --git a/galleries/users_explain/index.rst b/galleries/users_explain/index.rst
@@ -3,6 +3,8 @@
 
 .. redirect-from:: /users/explain
 
+
+
 Using Matplotlib
 ----------------
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,6 +3,8 @@

		.. redirect-from:: /users/explain



		Using Matplotlib
		----------------

Expand Down