From a05089a602b18153e1126b27ebca852cc219ee8f Mon Sep 17 00:00:00 2001
From: Stefan Binder <binder_stefan@outlook.com>
Date: Sun, 25 Feb 2024 17:01:56 +0100
Subject: [PATCH 1/2] Docs: Add another version of the 'Multiline Tooltip'
 exmaple which uses the standard tooltip

---
 .../multiline_tooltip.py                      |  7 +--
 .../multiline_tooltip_standard.py             | 52 +++++++++++++++++++
 .../multiline_tooltip.py                      |  7 +--
 .../multiline_tooltip_standard.py             | 52 +++++++++++++++++++
 4 files changed, 108 insertions(+), 10 deletions(-)
 create mode 100644 tests/examples_arguments_syntax/multiline_tooltip_standard.py
 create mode 100644 tests/examples_methods_syntax/multiline_tooltip_standard.py

diff --git a/tests/examples_arguments_syntax/multiline_tooltip.py b/tests/examples_arguments_syntax/multiline_tooltip.py
index 7bdefd61e..dec87b781 100644
--- a/tests/examples_arguments_syntax/multiline_tooltip.py
+++ b/tests/examples_arguments_syntax/multiline_tooltip.py
@@ -3,12 +3,9 @@
 ==================
 This example shows how you can use selections and layers to create a
 tooltip-like behavior tied to the x position of the cursor.
-If you are looking for more standard tooltips, it is recommended to use the
-tooltip encoding channel as shown in the
-`Scatter Plot With Tooltips <https://altair-viz.github.io/gallery/scatter_tooltips.html>`_
-example.
+If you are looking for more standard tooltips, see the :ref:`gallery_multiline_tooltip_standard` example.
 
-The following example employs a little trick to isolate the x-position of the
+In this example, we'll employ a little trick to isolate the x-position of the
 cursor: we add some transparent points with only an x encoding (no y encoding)
 and tie a *nearest* selection to these, tied to the "x" field.
 """
diff --git a/tests/examples_arguments_syntax/multiline_tooltip_standard.py b/tests/examples_arguments_syntax/multiline_tooltip_standard.py
new file mode 100644
index 000000000..956320bba
--- /dev/null
+++ b/tests/examples_arguments_syntax/multiline_tooltip_standard.py
@@ -0,0 +1,52 @@
+"""
+Multi-Line Tooltip (Standard)
+=============================
+This example shows how to add a standard tooltip to the same chart 
+as in :ref:`gallery_multiline_tooltip`. You can find another example
+using this approach in the documentation on the :ref:`user-guide-pivot-transform` transformation.
+"""
+# category: interactive charts
+import altair as alt
+import pandas as pd
+import numpy as np
+
+np.random.seed(42)
+columns = ["A", "B", "C"]
+source = pd.DataFrame(
+    np.cumsum(np.random.randn(100, 3), 0).round(2),
+    columns=columns,
+    index=pd.RangeIndex(100, name="x"),
+)
+source = source.reset_index().melt("x", var_name="category", value_name="y")
+
+# The basic line
+line = (
+    alt.Chart(source)
+    .mark_line(interpolate="basis")
+    .encode(x="x:Q", y="y:Q", color="category:N")
+)
+
+# Create a selection that chooses the nearest point & selects based on x-value
+nearest = alt.selection_point(nearest=True, on="mouseover", fields=["x"], empty=False)
+
+# Draw points on the line, and highlight based on selection
+points = line.mark_point().encode(
+    opacity=alt.condition(nearest, alt.value(1), alt.value(0))
+)
+
+# Draw a rule at the location of the selection
+rules = (
+    alt.Chart(source)
+    .transform_pivot("category", value="y", groupby=["x"])
+    .mark_rule(color="gray")
+    .encode(
+        x="x:Q",
+        opacity=alt.condition(nearest, alt.value(0.3), alt.value(0)),
+        tooltip=[alt.Tooltip(c, type="quantitative") for c in columns],
+    )
+    .add_params(nearest)
+)
+
+
+# Put the five layers into a chart and bind the data
+alt.layer(line, points, rules).properties(width=600, height=300)
\ No newline at end of file
diff --git a/tests/examples_methods_syntax/multiline_tooltip.py b/tests/examples_methods_syntax/multiline_tooltip.py
index d635c51ae..f9bef76a0 100644
--- a/tests/examples_methods_syntax/multiline_tooltip.py
+++ b/tests/examples_methods_syntax/multiline_tooltip.py
@@ -3,12 +3,9 @@
 ==================
 This example shows how you can use selections and layers to create a
 tooltip-like behavior tied to the x position of the cursor.
-If you are looking for more standard tooltips, it is recommended to use the
-tooltip encoding channel as shown in the
-`Scatter Plot With Tooltips <https://altair-viz.github.io/gallery/scatter_tooltips.html>`_
-example.
+If you are looking for more standard tooltips, see the :ref:`gallery_multiline_tooltip_standard` example.
 
-The following example employs a little trick to isolate the x-position of the
+In this example, we'll employ a little trick to isolate the x-position of the
 cursor: we add some transparent points with only an x encoding (no y encoding)
 and tie a *nearest* selection to these, tied to the "x" field.
 """
diff --git a/tests/examples_methods_syntax/multiline_tooltip_standard.py b/tests/examples_methods_syntax/multiline_tooltip_standard.py
new file mode 100644
index 000000000..956320bba
--- /dev/null
+++ b/tests/examples_methods_syntax/multiline_tooltip_standard.py
@@ -0,0 +1,52 @@
+"""
+Multi-Line Tooltip (Standard)
+=============================
+This example shows how to add a standard tooltip to the same chart 
+as in :ref:`gallery_multiline_tooltip`. You can find another example
+using this approach in the documentation on the :ref:`user-guide-pivot-transform` transformation.
+"""
+# category: interactive charts
+import altair as alt
+import pandas as pd
+import numpy as np
+
+np.random.seed(42)
+columns = ["A", "B", "C"]
+source = pd.DataFrame(
+    np.cumsum(np.random.randn(100, 3), 0).round(2),
+    columns=columns,
+    index=pd.RangeIndex(100, name="x"),
+)
+source = source.reset_index().melt("x", var_name="category", value_name="y")
+
+# The basic line
+line = (
+    alt.Chart(source)
+    .mark_line(interpolate="basis")
+    .encode(x="x:Q", y="y:Q", color="category:N")
+)
+
+# Create a selection that chooses the nearest point & selects based on x-value
+nearest = alt.selection_point(nearest=True, on="mouseover", fields=["x"], empty=False)
+
+# Draw points on the line, and highlight based on selection
+points = line.mark_point().encode(
+    opacity=alt.condition(nearest, alt.value(1), alt.value(0))
+)
+
+# Draw a rule at the location of the selection
+rules = (
+    alt.Chart(source)
+    .transform_pivot("category", value="y", groupby=["x"])
+    .mark_rule(color="gray")
+    .encode(
+        x="x:Q",
+        opacity=alt.condition(nearest, alt.value(0.3), alt.value(0)),
+        tooltip=[alt.Tooltip(c, type="quantitative") for c in columns],
+    )
+    .add_params(nearest)
+)
+
+
+# Put the five layers into a chart and bind the data
+alt.layer(line, points, rules).properties(width=600, height=300)
\ No newline at end of file

From 06fba10f9ffc0108f3b407f56d4ce5ad2a2e53bd Mon Sep 17 00:00:00 2001
From: Stefan Binder <binder_stefan@outlook.com>
Date: Thu, 29 Feb 2024 20:28:54 +0100
Subject: [PATCH 2/2] Harmonize code style

---
 .../multiline_tooltip.py                      | 31 +++++++------
 .../multiline_tooltip_standard.py             | 44 ++++++++++---------
 .../multiline_tooltip.py                      | 27 ++++++------
 .../multiline_tooltip_standard.py             | 44 ++++++++++---------
 4 files changed, 77 insertions(+), 69 deletions(-)

diff --git a/tests/examples_arguments_syntax/multiline_tooltip.py b/tests/examples_arguments_syntax/multiline_tooltip.py
index dec87b781..cd5767028 100644
--- a/tests/examples_arguments_syntax/multiline_tooltip.py
+++ b/tests/examples_arguments_syntax/multiline_tooltip.py
@@ -15,25 +15,28 @@
 import numpy as np
 
 np.random.seed(42)
-source = pd.DataFrame(np.cumsum(np.random.randn(100, 3), 0).round(2),
-                    columns=['A', 'B', 'C'], index=pd.RangeIndex(100, name='x'))
-source = source.reset_index().melt('x', var_name='category', value_name='y')
+columns = ["A", "B", "C"]
+source = pd.DataFrame(
+    np.cumsum(np.random.randn(100, 3), 0).round(2),
+    columns=columns, index=pd.RangeIndex(100, name="x")
+)
+source = source.reset_index().melt("x", var_name="category", value_name="y")
 
 # Create a selection that chooses the nearest point & selects based on x-value
-nearest = alt.selection_point(nearest=True, on='mouseover',
-                        fields=['x'], empty=False)
+nearest = alt.selection_point(nearest=True, on="mouseover",
+                              fields=["x"], empty=False)
 
 # The basic line
-line = alt.Chart(source).mark_line(interpolate='basis').encode(
-    x='x:Q',
-    y='y:Q',
-    color='category:N'
+line = alt.Chart(source).mark_line(interpolate="basis").encode(
+    x="x:Q",
+    y="y:Q",
+    color="category:N"
 )
 
 # Transparent selectors across the chart. This is what tells us
 # the x-value of the cursor
 selectors = alt.Chart(source).mark_point().encode(
-    x='x:Q',
+    x="x:Q",
     opacity=alt.value(0),
 ).add_params(
     nearest
@@ -45,13 +48,13 @@
 )
 
 # Draw text labels near the points, and highlight based on selection
-text = line.mark_text(align='left', dx=5, dy=-5).encode(
-    text=alt.condition(nearest, 'y:Q', alt.value(' '))
+text = line.mark_text(align="left", dx=5, dy=-5).encode(
+    text=alt.condition(nearest, "y:Q", alt.value(" "))
 )
 
 # Draw a rule at the location of the selection
-rules = alt.Chart(source).mark_rule(color='gray').encode(
-    x='x:Q',
+rules = alt.Chart(source).mark_rule(color="gray").encode(
+    x="x:Q",
 ).transform_filter(
     nearest
 )
diff --git a/tests/examples_arguments_syntax/multiline_tooltip_standard.py b/tests/examples_arguments_syntax/multiline_tooltip_standard.py
index 956320bba..b515d0312 100644
--- a/tests/examples_arguments_syntax/multiline_tooltip_standard.py
+++ b/tests/examples_arguments_syntax/multiline_tooltip_standard.py
@@ -14,39 +14,41 @@
 columns = ["A", "B", "C"]
 source = pd.DataFrame(
     np.cumsum(np.random.randn(100, 3), 0).round(2),
-    columns=columns,
-    index=pd.RangeIndex(100, name="x"),
+    columns=columns, index=pd.RangeIndex(100, name="x"),
 )
 source = source.reset_index().melt("x", var_name="category", value_name="y")
 
+# Create a selection that chooses the nearest point & selects based on x-value
+nearest = alt.selection_point(nearest=True, on="mouseover", 
+                              fields=["x"], empty=False)
+
 # The basic line
-line = (
-    alt.Chart(source)
-    .mark_line(interpolate="basis")
-    .encode(x="x:Q", y="y:Q", color="category:N")
+line = alt.Chart(source).mark_line(interpolate="basis").encode(
+    x="x:Q",
+    y="y:Q",
+    color="category:N"
 )
 
-# Create a selection that chooses the nearest point & selects based on x-value
-nearest = alt.selection_point(nearest=True, on="mouseover", fields=["x"], empty=False)
-
 # Draw points on the line, and highlight based on selection
 points = line.mark_point().encode(
     opacity=alt.condition(nearest, alt.value(1), alt.value(0))
 )
 
 # Draw a rule at the location of the selection
-rules = (
-    alt.Chart(source)
-    .transform_pivot("category", value="y", groupby=["x"])
-    .mark_rule(color="gray")
-    .encode(
-        x="x:Q",
-        opacity=alt.condition(nearest, alt.value(0.3), alt.value(0)),
-        tooltip=[alt.Tooltip(c, type="quantitative") for c in columns],
-    )
-    .add_params(nearest)
-)
+rules = alt.Chart(source).transform_pivot(
+    "category",
+    value="y",
+    groupby=["x"]
+).mark_rule(color="gray").encode(
+    x="x:Q",
+    opacity=alt.condition(nearest, alt.value(0.3), alt.value(0)),
+    tooltip=[alt.Tooltip(c, type="quantitative") for c in columns],
+).add_params(nearest)
 
 
 # Put the five layers into a chart and bind the data
-alt.layer(line, points, rules).properties(width=600, height=300)
\ No newline at end of file
+alt.layer(
+    line, points, rules
+).properties(
+    width=600, height=300
+)
\ No newline at end of file
diff --git a/tests/examples_methods_syntax/multiline_tooltip.py b/tests/examples_methods_syntax/multiline_tooltip.py
index f9bef76a0..cd5767028 100644
--- a/tests/examples_methods_syntax/multiline_tooltip.py
+++ b/tests/examples_methods_syntax/multiline_tooltip.py
@@ -15,27 +15,28 @@
 import numpy as np
 
 np.random.seed(42)
+columns = ["A", "B", "C"]
 source = pd.DataFrame(
     np.cumsum(np.random.randn(100, 3), 0).round(2),
-    columns=['A', 'B', 'C'], index=pd.RangeIndex(100, name='x')
+    columns=columns, index=pd.RangeIndex(100, name="x")
 )
-source = source.reset_index().melt('x', var_name='category', value_name='y')
+source = source.reset_index().melt("x", var_name="category", value_name="y")
 
 # Create a selection that chooses the nearest point & selects based on x-value
-nearest = alt.selection_point(nearest=True, on='mouseover',
-                        fields=['x'], empty=False)
+nearest = alt.selection_point(nearest=True, on="mouseover",
+                              fields=["x"], empty=False)
 
 # The basic line
-line = alt.Chart(source).mark_line(interpolate='basis').encode(
-    x='x:Q',
-    y='y:Q',
-    color='category:N'
+line = alt.Chart(source).mark_line(interpolate="basis").encode(
+    x="x:Q",
+    y="y:Q",
+    color="category:N"
 )
 
 # Transparent selectors across the chart. This is what tells us
 # the x-value of the cursor
 selectors = alt.Chart(source).mark_point().encode(
-    x='x:Q',
+    x="x:Q",
     opacity=alt.value(0),
 ).add_params(
     nearest
@@ -47,13 +48,13 @@
 )
 
 # Draw text labels near the points, and highlight based on selection
-text = line.mark_text(align='left', dx=5, dy=-5).encode(
-    text=alt.condition(nearest, 'y:Q', alt.value(' '))
+text = line.mark_text(align="left", dx=5, dy=-5).encode(
+    text=alt.condition(nearest, "y:Q", alt.value(" "))
 )
 
 # Draw a rule at the location of the selection
-rules = alt.Chart(source).mark_rule(color='gray').encode(
-    x='x:Q',
+rules = alt.Chart(source).mark_rule(color="gray").encode(
+    x="x:Q",
 ).transform_filter(
     nearest
 )
diff --git a/tests/examples_methods_syntax/multiline_tooltip_standard.py b/tests/examples_methods_syntax/multiline_tooltip_standard.py
index 956320bba..b515d0312 100644
--- a/tests/examples_methods_syntax/multiline_tooltip_standard.py
+++ b/tests/examples_methods_syntax/multiline_tooltip_standard.py
@@ -14,39 +14,41 @@
 columns = ["A", "B", "C"]
 source = pd.DataFrame(
     np.cumsum(np.random.randn(100, 3), 0).round(2),
-    columns=columns,
-    index=pd.RangeIndex(100, name="x"),
+    columns=columns, index=pd.RangeIndex(100, name="x"),
 )
 source = source.reset_index().melt("x", var_name="category", value_name="y")
 
+# Create a selection that chooses the nearest point & selects based on x-value
+nearest = alt.selection_point(nearest=True, on="mouseover", 
+                              fields=["x"], empty=False)
+
 # The basic line
-line = (
-    alt.Chart(source)
-    .mark_line(interpolate="basis")
-    .encode(x="x:Q", y="y:Q", color="category:N")
+line = alt.Chart(source).mark_line(interpolate="basis").encode(
+    x="x:Q",
+    y="y:Q",
+    color="category:N"
 )
 
-# Create a selection that chooses the nearest point & selects based on x-value
-nearest = alt.selection_point(nearest=True, on="mouseover", fields=["x"], empty=False)
-
 # Draw points on the line, and highlight based on selection
 points = line.mark_point().encode(
     opacity=alt.condition(nearest, alt.value(1), alt.value(0))
 )
 
 # Draw a rule at the location of the selection
-rules = (
-    alt.Chart(source)
-    .transform_pivot("category", value="y", groupby=["x"])
-    .mark_rule(color="gray")
-    .encode(
-        x="x:Q",
-        opacity=alt.condition(nearest, alt.value(0.3), alt.value(0)),
-        tooltip=[alt.Tooltip(c, type="quantitative") for c in columns],
-    )
-    .add_params(nearest)
-)
+rules = alt.Chart(source).transform_pivot(
+    "category",
+    value="y",
+    groupby=["x"]
+).mark_rule(color="gray").encode(
+    x="x:Q",
+    opacity=alt.condition(nearest, alt.value(0.3), alt.value(0)),
+    tooltip=[alt.Tooltip(c, type="quantitative") for c in columns],
+).add_params(nearest)
 
 
 # Put the five layers into a chart and bind the data
-alt.layer(line, points, rules).properties(width=600, height=300)
\ No newline at end of file
+alt.layer(
+    line, points, rules
+).properties(
+    width=600, height=300
+)
\ No newline at end of file