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