From d628817425f5abf5d1a05bb13cb2d1067571d181 Mon Sep 17 00:00:00 2001 From: Rob L Date: Mon, 25 Mar 2024 14:01:05 -0700 Subject: [PATCH 1/9] Update hover-text-and-formatting.md 1) added an example that formats the elements of custom_data in plotly express 2) fixed a bug in the "advanced hovertemplate" example which caused it to display the square root of population. Modified that example to follow the main dataframe is called "df" convention. Added a country name field to that example and comments about the usage of key parameters. 3) I did not remove the "Adding other data to the hover with customdata and a hovertemplate" example, but I believe it is now redundant and that the revised ### Advanced Hover Template example is more compliant with expectations like using meaningful data over random data. If you removed it, it would make sense to rename "Advanced Hover Template" to include the phrase: "Adding other data to the hover with customdata and a hovertemplate" --- doc/python/hover-text-and-formatting.md | 93 ++++++++++++++++++++----- 1 file changed, 77 insertions(+), 16 deletions(-) diff --git a/doc/python/hover-text-and-formatting.md b/doc/python/hover-text-and-formatting.md index 2d4ae985c19..d5cf8f8ca9c 100644 --- a/doc/python/hover-text-and-formatting.md +++ b/doc/python/hover-text-and-formatting.md @@ -252,6 +252,58 @@ print("user_defined hovertemplate:", fig.data[0].hovertemplate) fig.show() ``` +### Specifying the formatting and labeling of custom fields in a Plotly Express figure using a hovertemplate + +This example adds custom fields to a Plotly Express figure using the custom_data parameter and then adds a hover template that applies d3 formats to each element of the customdata[n] array and uses HTML to customize the fonts and spacing. + +``` +# %% +import plotly.graph_objects as go +import plotly.express as px +import pandas as pd +import math +import numpy as np + +data = px.data.gapminder() +df = data[data['year']==2007] +df = df.sort_values(['continent', 'country']) + +df.rename(columns={"gdpPercap":'GDP per capita', "lifeExp":'Life Expectancy (years)'}, inplace=True) + +fig=px.scatter(df, + x='GDP per capita', + y='Life Expectancy (years)', + color='continent', + size=np.sqrt(df['pop']), + # Specifying data to make availabe to the hovertemplate + # The px custom_data parameter has an underscore, whike the analogous graph objects customdata parameter has no underscore. + # The px custom_data parameter is a list of column names in the data frame, while the graph objects customdata parameter expects a data frame or a numpy array. + custom_data=['country', 'continent', 'pop'], +) + +# Plotly express does not have a hovertemplate paramter in the graph creation function, so we apply the template with update_traces +fig.update_traces( + hovertemplate = + "%{customdata[0]}
" + + "%{customdata[1]}

" + + "GDP per Capita: %{x:$,.0f}
" + + "Life Expectation: %{y:.0f}
" + + "Population: %{customdata[2]:,.0f}" + + "", + mode='markers', + marker={'sizemode':'area', + 'sizeref':10}, +) + +fig.update_layout( + xaxis={ + 'type':'log'}, + ) + +fig.show() +``` + + ### Hover Templates with Mixtures of Period data *New in v5.0* @@ -288,9 +340,8 @@ fig.show() ### Advanced Hover Template -The following example shows how to format a hover template. - -```python +This produces the same graphic as in "Specifying the formatting and labeling of custom fields in a Plotly Express figure using a hovertemplate" above, but does so with the `customdata` and `text` parameters of `graph_objects`. It shows how to specify columns from a dataframe to include in the customdata array using the df[["col_i", "col_j"]] subsetting notation. It then references those variables using e.g. %{customdata[0]} in the hovertemplate. It includes comments about major differences between the parameters used by `graph_objects` and `plotly.express`. +``` import plotly.graph_objects as go import plotly.express as px import pandas as pd @@ -312,21 +363,31 @@ continent_data = {continent:df_2007.query("continent == '%s'" %continent) fig = go.Figure() -for continent_name, continent in continent_data.items(): - fig.add_trace(go.Scatter( - x=continent['gdpPercap'], - y=continent['lifeExp'], - name=continent_name, - text=continent['continent'], - hovertemplate= - "%{text}

" + - "GDP per Capita: %{x:$,.0f}
" + - "Life Expectation: %{y:.0%}
" + - "Population: %{marker.size:,}" + - "", - marker_size=continent['size'], +for continent_name, df in continent_data.items(): + fig.add_trace( + go.Scatter( + x=df['gdpPercap'], + y=df['lifeExp'], + marker_size=df['size'], + name=continent_name, + + # The next three parameters specify the hover text + # Text supports just one customized field per trace, but is simple to implement + text=df['continent'], + # Custom data supports multiple fields through numeric indices in the hovertemplate + # If I were not looking for an opportunity to demonstrate the text parameter, + # I would likely just add continent as a third customdata field. + customdata=df[['country','pop']], + hovertemplate= + "%{customdata[0]}
" + + "%{text}

" + + "GDP per Capita: %{x:$,.0f}
" + + "Life Expectancy: %{y:.0f}
" + + "Population: %{customdata[1]:,.0f}" + + "", )) + fig.update_traces( mode='markers', marker={'sizemode':'area', From 1e63ed46a39e5cc865a3a0573bada777b50e9f06 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Mon, 22 Apr 2024 11:36:57 -0400 Subject: [PATCH 2/9] Update doc/python/hover-text-and-formatting.md Co-authored-by: Adam --- doc/python/hover-text-and-formatting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/hover-text-and-formatting.md b/doc/python/hover-text-and-formatting.md index d5cf8f8ca9c..7cae455a638 100644 --- a/doc/python/hover-text-and-formatting.md +++ b/doc/python/hover-text-and-formatting.md @@ -275,7 +275,7 @@ fig=px.scatter(df, y='Life Expectancy (years)', color='continent', size=np.sqrt(df['pop']), - # Specifying data to make availabe to the hovertemplate + # Specifying data to make available to the hovertemplate # The px custom_data parameter has an underscore, whike the analogous graph objects customdata parameter has no underscore. # The px custom_data parameter is a list of column names in the data frame, while the graph objects customdata parameter expects a data frame or a numpy array. custom_data=['country', 'continent', 'pop'], From 70655ea7515640630dc12a7b75b16a4318c56629 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Mon, 22 Apr 2024 11:37:19 -0400 Subject: [PATCH 3/9] Update doc/python/hover-text-and-formatting.md --- doc/python/hover-text-and-formatting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/hover-text-and-formatting.md b/doc/python/hover-text-and-formatting.md index 7cae455a638..b4bc755c148 100644 --- a/doc/python/hover-text-and-formatting.md +++ b/doc/python/hover-text-and-formatting.md @@ -254,7 +254,7 @@ fig.show() ### Specifying the formatting and labeling of custom fields in a Plotly Express figure using a hovertemplate -This example adds custom fields to a Plotly Express figure using the custom_data parameter and then adds a hover template that applies d3 formats to each element of the customdata[n] array and uses HTML to customize the fonts and spacing. +This example adds custom fields to a Plotly Express figure using the custom_data parameter and then adds a hover template that applies d3 formats to each element of the customdata[n] array and uses HTML to customize the fonts and spacing. ``` # %% From 02cf1b105ef6b7ada26b6c6c1f870f21a9af5dc1 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Mon, 22 Apr 2024 11:37:29 -0400 Subject: [PATCH 4/9] Update doc/python/hover-text-and-formatting.md Co-authored-by: Adam --- doc/python/hover-text-and-formatting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/hover-text-and-formatting.md b/doc/python/hover-text-and-formatting.md index b4bc755c148..4394774c86a 100644 --- a/doc/python/hover-text-and-formatting.md +++ b/doc/python/hover-text-and-formatting.md @@ -276,7 +276,7 @@ fig=px.scatter(df, color='continent', size=np.sqrt(df['pop']), # Specifying data to make available to the hovertemplate - # The px custom_data parameter has an underscore, whike the analogous graph objects customdata parameter has no underscore. + # The px custom_data parameter has an underscore, while the analogous graph objects customdata parameter has no underscore. # The px custom_data parameter is a list of column names in the data frame, while the graph objects customdata parameter expects a data frame or a numpy array. custom_data=['country', 'continent', 'pop'], ) From 7c4b95474a5c96f015665623e05a6ecb5c35d30a Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Mon, 22 Apr 2024 11:37:42 -0400 Subject: [PATCH 5/9] Update doc/python/hover-text-and-formatting.md Co-authored-by: Adam --- doc/python/hover-text-and-formatting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/hover-text-and-formatting.md b/doc/python/hover-text-and-formatting.md index 4394774c86a..74ec119a1f8 100644 --- a/doc/python/hover-text-and-formatting.md +++ b/doc/python/hover-text-and-formatting.md @@ -281,7 +281,7 @@ fig=px.scatter(df, custom_data=['country', 'continent', 'pop'], ) -# Plotly express does not have a hovertemplate paramter in the graph creation function, so we apply the template with update_traces +# Plotly express does not have a hovertemplate parameter in the graph creation function, so we apply the template with update_traces fig.update_traces( hovertemplate = "%{customdata[0]}
" + From fb060bda825d638291c690645002ed0d911cb9cb Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Mon, 22 Apr 2024 12:31:51 -0400 Subject: [PATCH 6/9] Update doc/python/hover-text-and-formatting.md --- doc/python/hover-text-and-formatting.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/python/hover-text-and-formatting.md b/doc/python/hover-text-and-formatting.md index 74ec119a1f8..79e673bb56c 100644 --- a/doc/python/hover-text-and-formatting.md +++ b/doc/python/hover-text-and-formatting.md @@ -372,8 +372,8 @@ for continent_name, df in continent_data.items(): name=continent_name, # The next three parameters specify the hover text - # Text supports just one customized field per trace, but is simple to implement - text=df['continent'], + # Text supports just one customized field per trace + # and is implemented here with text=df['continent'], # Custom data supports multiple fields through numeric indices in the hovertemplate # If I were not looking for an opportunity to demonstrate the text parameter, # I would likely just add continent as a third customdata field. From b06b80b31e5ad9db4d4ed19d0e449b4286253bf6 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Mon, 22 Apr 2024 12:32:02 -0400 Subject: [PATCH 7/9] Update doc/python/hover-text-and-formatting.md --- doc/python/hover-text-and-formatting.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/python/hover-text-and-formatting.md b/doc/python/hover-text-and-formatting.md index 79e673bb56c..a8da71a3a92 100644 --- a/doc/python/hover-text-and-formatting.md +++ b/doc/python/hover-text-and-formatting.md @@ -375,8 +375,8 @@ for continent_name, df in continent_data.items(): # Text supports just one customized field per trace # and is implemented here with text=df['continent'], # Custom data supports multiple fields through numeric indices in the hovertemplate - # If I were not looking for an opportunity to demonstrate the text parameter, - # I would likely just add continent as a third customdata field. + # In we weren't using the text parameter in our example, + # we could instead add continent as a third customdata field. customdata=df[['country','pop']], hovertemplate= "%{customdata[0]}
" + From eba6910ea7f6069e977f1f02b83d701b08da7ad2 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 23 Apr 2024 16:16:45 -0400 Subject: [PATCH 8/9] Update doc/python/hover-text-and-formatting.md --- doc/python/hover-text-and-formatting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/hover-text-and-formatting.md b/doc/python/hover-text-and-formatting.md index d97545222c9..a6fa39bacd4 100644 --- a/doc/python/hover-text-and-formatting.md +++ b/doc/python/hover-text-and-formatting.md @@ -287,7 +287,7 @@ fig.show() This example adds custom fields to a Plotly Express figure using the custom_data parameter and then adds a hover template that applies d3 formats to each element of the customdata[n] array and uses HTML to customize the fonts and spacing. -``` +```python # %% import plotly.graph_objects as go import plotly.express as px From 217ed661dbdbd97107083ede081b251f09f76e4a Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Wed, 24 Apr 2024 09:51:59 -0400 Subject: [PATCH 9/9] Update doc/python/hover-text-and-formatting.md --- doc/python/hover-text-and-formatting.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/doc/python/hover-text-and-formatting.md b/doc/python/hover-text-and-formatting.md index a6fa39bacd4..50befc860f0 100644 --- a/doc/python/hover-text-and-formatting.md +++ b/doc/python/hover-text-and-formatting.md @@ -372,7 +372,8 @@ fig.show() ### Advanced Hover Template This produces the same graphic as in "Specifying the formatting and labeling of custom fields in a Plotly Express figure using a hovertemplate" above, but does so with the `customdata` and `text` parameters of `graph_objects`. It shows how to specify columns from a dataframe to include in the customdata array using the df[["col_i", "col_j"]] subsetting notation. It then references those variables using e.g. %{customdata[0]} in the hovertemplate. It includes comments about major differences between the parameters used by `graph_objects` and `plotly.express`. -``` + +```python import plotly.graph_objects as go import plotly.express as px import pandas as pd