From bfaf23d998afc672101e3724ff287b1d5e05aad3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmahdis-z=E2=80=9D?= <“maahhddiiss@gmail.com”> Date: Wed, 23 Oct 2019 17:16:51 -0400 Subject: [PATCH 1/8] hovertext.py --- python/hovertemplate.md | 131 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 python/hovertemplate.md diff --git a/python/hovertemplate.md b/python/hovertemplate.md new file mode 100644 index 000000000..b2d01ede0 --- /dev/null +++ b/python/hovertemplate.md @@ -0,0 +1,131 @@ +--- +jupyter: + jupytext: + notebook_metadata_filter: all + text_representation: + extension: .md + format_name: markdown + format_version: '1.1' + jupytext_version: 1.2.1 + kernelspec: + display_name: Python 3 + language: python + name: python3 + language_info: + codemirror_mode: + name: ipython + version: 3 + file_extension: .py + mimetype: text/x-python + name: python + nbconvert_exporter: python + pygments_lexer: ipython3 + version: 3.7.3 + plotly: + description: How to use hover template in Python with Plotly. + display_as: file_settings + has_thumbnail: true + ipynb: ~notebook_demo/60 + language: python + layout: base + name: Hover Template + order: 40 + page_type: u-guide + permalink: python/hovertemplate/ + thumbnail: thumbnail/hovertemplate.jpg + title: Hover Template and Formatting| plotly + v4upgrade: true +--- + +### Add Hover Template to Pie Chart + +To customize the tooltip on your graph you can use [hovertemplate](https://plot.ly/python/reference/#pie-hovertemplate), which is a template string used for rendering the information that appear on hoverbox. + +```python +import plotly.graph_objects as go + +fig = go.Figure(go.Pie( + name = "", + values = [2, 5, 3, 2.5], + labels = ["R", "Python", "Java Script", "Matlab"], + text = ["textA", "TextB", "TextC", "TextD"], + hovertemplate = "%{label}:
Popularity: %{percent}
%{text}" +)) + +fig.show() +``` + +### Format Hover Template + +```python +import plotly.io as pio +import pandas as pd + +df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv") +A = [] +B = [] + +for i in range(5): + A = {'target': df['continent'][[i]].unique()} + B.append(A) + +data = [{ + 'type': 'scatter', + 'mode': 'markers', + 'x': df['lifeExp'], + 'y': df['gdpPercap'], + 'text': df['continent'], + 'hovertemplate': + "%{text}

" + + "GDP per Capita: %{y:$,.0f}
" + + "Life Expectation: %{x:.0%}
" + + "Population: %{marker.size:,}" + + "", + 'marker': { + 'size': df['pop'], + 'sizemode': 'area', + 'sizeref': 200000 + }, + 'transforms': [{ + 'type': 'filter', + 'target': df['year'], + 'orientation': '=', + 'value': 2002 + },{ + 'type': 'groupby', + 'groups': df['continent'], + 'styles': B + }] +}] + +layout = {'yaxis': {'type': 'log'}} + +pio.show({'data': data, 'layout': layout}, validate=False) +``` + +### Set Hover Template to Mapbox + +```python +import plotly.graph_objects as go + +token = open(".mapbox_token").read() # you need your own token + +fig = go.Figure(go.Scattermapbox( + name = "", + mode = "markers+text+lines", + lon = [-75, -80, -50], + lat = [45, 20, -20], + marker = {'size': 20, 'symbol': ["bus", "harbor", "airport"]}, + hovertemplate = + "%{marker.symbol}

" + + "longitude: %{lon}
" + + "latitude: %{lat}
" )) + +fig.update_layout( + mapbox = { + 'accesstoken': token, + 'style': "outdoors", 'zoom': 1}, + showlegend = False) + +fig.show() +``` From 234fb0a5a8ade1295eaa338ddc9faeb13b4ac240 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmahdis-z=E2=80=9D?= <“maahhddiiss@gmail.com”> Date: Thu, 24 Oct 2019 12:36:39 -0400 Subject: [PATCH 2/8] minor revisions --- python/hovertemplate.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/python/hovertemplate.md b/python/hovertemplate.md index b2d01ede0..52b8147d9 100644 --- a/python/hovertemplate.md +++ b/python/hovertemplate.md @@ -37,9 +37,11 @@ jupyter: v4upgrade: true --- -### Add Hover Template to Pie Chart +### Customize tooltip text with a hovertemplate To customize the tooltip on your graph you can use [hovertemplate](https://plot.ly/python/reference/#pie-hovertemplate), which is a template string used for rendering the information that appear on hoverbox. +This template string can include `variables` in %{variable} format, `numbers` in [d3-format's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_forma), and `date` in [d3-time-fomrat's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format). +Hovertemplate customize the tooltip text vs. [texttemplate](https://plot.ly/python/reference/#pie-texttemplate) which customizes the text that appears on your chart. ```python import plotly.graph_objects as go @@ -59,9 +61,9 @@ fig.show() ```python import plotly.io as pio -import pandas as pd +import plotly.express as px -df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv") +df = px.data.gapminder() A = [] B = [] @@ -129,3 +131,7 @@ fig.update_layout( fig.show() ``` + +```python + +``` From f072031c1aad2ee8aa70d352d4b9f254aa1c226e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmahdis-z=E2=80=9D?= <“maahhddiiss@gmail.com”> Date: Thu, 24 Oct 2019 17:16:38 -0400 Subject: [PATCH 3/8] hovertemplate were added to the current hover-text file --- python/hover-text-and-formatting.md | 96 ++++++++++++++++++++++++++++- 1 file changed, 95 insertions(+), 1 deletion(-) diff --git a/python/hover-text-and-formatting.md b/python/hover-text-and-formatting.md index f73fd7d14..303b7caeb 100644 --- a/python/hover-text-and-formatting.md +++ b/python/hover-text-and-formatting.md @@ -104,5 +104,99 @@ fig.update_yaxes(hoverformat=".2f") fig.show() ``` +### Customize tooltip text with a hovertemplate + +To customize the tooltip on your graph you can use [hovertemplate](https://plot.ly/python/reference/#pie-hovertemplate), which is a template string used for rendering the information that appear on hoverbox. +This template string can include `variables` in %{variable} format, `numbers` in [d3-format's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_forma), and `date` in [d3-time-fomrat's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format). +Hovertemplate customize the tooltip text vs. [texttemplate](https://plot.ly/python/reference/#pie-texttemplate) which customizes the text that appears on your chart. + +```python +import plotly.graph_objects as go + +fig = go.Figure(go.Pie( + name = "", + values = [2, 5, 3, 2.5], + labels = ["R", "Python", "Java Script", "Matlab"], + text = ["textA", "TextB", "TextC", "TextD"], + hovertemplate = "%{label}:
Popularity: %{percent}
%{text}" +)) + +fig.show() +``` + +### Format Hover Template + +```python +import plotly.io as pio +import plotly.express as px + +df = px.data.gapminder() +A = [] +B = [] + +for i in range(5): + A = {'target': df['continent'][[i]].unique()} + B.append(A) + +data = [{ + 'type': 'scatter', + 'mode': 'markers', + 'x': df['lifeExp'], + 'y': df['gdpPercap'], + 'text': df['continent'], + 'hovertemplate': + "%{text}

" + + "GDP per Capita: %{y:$,.0f}
" + + "Life Expectation: %{x:.0%}
" + + "Population: %{marker.size:,}" + + "", + 'marker': { + 'size': df['pop'], + 'sizemode': 'area', + 'sizeref': 200000 + }, + 'transforms': [{ + 'type': 'filter', + 'target': df['year'], + 'orientation': '=', + 'value': 2002 + },{ + 'type': 'groupby', + 'groups': df['continent'], + 'styles': B + }] +}] + +layout = {'yaxis': {'type': 'log'}} + +pio.show({'data': data, 'layout': layout}, validate=False) +``` + +### Set Hover Template in Mapbox +```python +import plotly.graph_objects as go + +token = open(".mapbox_token").read() # you need your own token + +fig = go.Figure(go.Scattermapbox( + name = "", + mode = "markers+text+lines", + lon = [-75, -80, -50], + lat = [45, 20, -20], + marker = {'size': 20, 'symbol': ["bus", "harbor", "airport"]}, + hovertemplate = + "%{marker.symbol}

" + + "longitude: %{lon}
" + + "latitude: %{lat}
" )) + +fig.update_layout( + mapbox = { + 'accesstoken': token, + 'style': "outdoors", 'zoom': 1}, + showlegend = False) + +fig.show() +``` + #### Reference -See https://plot.ly/python/reference/ for more information and chart attribute options! +See https://plot.ly/python/reference/ for more information and chart attribute options! \ No newline at end of file From 18ea22e2692ea0ae1e099e26eb5e18b170abd3b4 Mon Sep 17 00:00:00 2001 From: Mahdis-z <47799189+Mahdis-z@users.noreply.github.com> Date: Thu, 24 Oct 2019 17:18:23 -0400 Subject: [PATCH 4/8] Delete hovertemplate.md --- python/hovertemplate.md | 137 ---------------------------------------- 1 file changed, 137 deletions(-) delete mode 100644 python/hovertemplate.md diff --git a/python/hovertemplate.md b/python/hovertemplate.md deleted file mode 100644 index 52b8147d9..000000000 --- a/python/hovertemplate.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -jupyter: - jupytext: - notebook_metadata_filter: all - text_representation: - extension: .md - format_name: markdown - format_version: '1.1' - jupytext_version: 1.2.1 - kernelspec: - display_name: Python 3 - language: python - name: python3 - language_info: - codemirror_mode: - name: ipython - version: 3 - file_extension: .py - mimetype: text/x-python - name: python - nbconvert_exporter: python - pygments_lexer: ipython3 - version: 3.7.3 - plotly: - description: How to use hover template in Python with Plotly. - display_as: file_settings - has_thumbnail: true - ipynb: ~notebook_demo/60 - language: python - layout: base - name: Hover Template - order: 40 - page_type: u-guide - permalink: python/hovertemplate/ - thumbnail: thumbnail/hovertemplate.jpg - title: Hover Template and Formatting| plotly - v4upgrade: true ---- - -### Customize tooltip text with a hovertemplate - -To customize the tooltip on your graph you can use [hovertemplate](https://plot.ly/python/reference/#pie-hovertemplate), which is a template string used for rendering the information that appear on hoverbox. -This template string can include `variables` in %{variable} format, `numbers` in [d3-format's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_forma), and `date` in [d3-time-fomrat's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format). -Hovertemplate customize the tooltip text vs. [texttemplate](https://plot.ly/python/reference/#pie-texttemplate) which customizes the text that appears on your chart. - -```python -import plotly.graph_objects as go - -fig = go.Figure(go.Pie( - name = "", - values = [2, 5, 3, 2.5], - labels = ["R", "Python", "Java Script", "Matlab"], - text = ["textA", "TextB", "TextC", "TextD"], - hovertemplate = "%{label}:
Popularity: %{percent}
%{text}" -)) - -fig.show() -``` - -### Format Hover Template - -```python -import plotly.io as pio -import plotly.express as px - -df = px.data.gapminder() -A = [] -B = [] - -for i in range(5): - A = {'target': df['continent'][[i]].unique()} - B.append(A) - -data = [{ - 'type': 'scatter', - 'mode': 'markers', - 'x': df['lifeExp'], - 'y': df['gdpPercap'], - 'text': df['continent'], - 'hovertemplate': - "%{text}

" + - "GDP per Capita: %{y:$,.0f}
" + - "Life Expectation: %{x:.0%}
" + - "Population: %{marker.size:,}" + - "", - 'marker': { - 'size': df['pop'], - 'sizemode': 'area', - 'sizeref': 200000 - }, - 'transforms': [{ - 'type': 'filter', - 'target': df['year'], - 'orientation': '=', - 'value': 2002 - },{ - 'type': 'groupby', - 'groups': df['continent'], - 'styles': B - }] -}] - -layout = {'yaxis': {'type': 'log'}} - -pio.show({'data': data, 'layout': layout}, validate=False) -``` - -### Set Hover Template to Mapbox - -```python -import plotly.graph_objects as go - -token = open(".mapbox_token").read() # you need your own token - -fig = go.Figure(go.Scattermapbox( - name = "", - mode = "markers+text+lines", - lon = [-75, -80, -50], - lat = [45, 20, -20], - marker = {'size': 20, 'symbol': ["bus", "harbor", "airport"]}, - hovertemplate = - "%{marker.symbol}

" + - "longitude: %{lon}
" + - "latitude: %{lat}
" )) - -fig.update_layout( - mapbox = { - 'accesstoken': token, - 'style': "outdoors", 'zoom': 1}, - showlegend = False) - -fig.show() -``` - -```python - -``` From 85a47a73f6df8fc02c4b200df49eaf67bd3b5201 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmahdis-z=E2=80=9D?= <“maahhddiiss@gmail.com”> Date: Fri, 1 Nov 2019 10:56:03 -0400 Subject: [PATCH 5/8] replacing transform example --- python/hover-text-and-formatting.md | 93 +++++++++++++++-------------- 1 file changed, 49 insertions(+), 44 deletions(-) diff --git a/python/hover-text-and-formatting.md b/python/hover-text-and-formatting.md index 303b7caeb..7df03828b 100644 --- a/python/hover-text-and-formatting.md +++ b/python/hover-text-and-formatting.md @@ -6,7 +6,7 @@ jupyter: extension: .md format_name: markdown format_version: '1.1' - jupytext_version: 1.1.7 + jupytext_version: 1.2.1 kernelspec: display_name: Python 3 language: python @@ -20,7 +20,7 @@ jupyter: name: python nbconvert_exporter: python pygments_lexer: ipython3 - version: 3.6.5 + version: 3.7.3 plotly: description: How to use hover text and formatting in Python with Plotly. display_as: file_settings @@ -127,49 +127,54 @@ fig.show() ### Format Hover Template ```python -import plotly.io as pio +import plotly.graph_objects as go import plotly.express as px +import pandas as pd +import math + +data = px.data.gapminder() +df_2007 = data[data['year']==2007] +df_2007 = df_2007.sort_values(['continent', 'country']) + +bubble_size = [] -df = px.data.gapminder() -A = [] -B = [] - -for i in range(5): - A = {'target': df['continent'][[i]].unique()} - B.append(A) - -data = [{ - 'type': 'scatter', - 'mode': 'markers', - 'x': df['lifeExp'], - 'y': df['gdpPercap'], - 'text': df['continent'], - 'hovertemplate': - "%{text}

" + - "GDP per Capita: %{y:$,.0f}
" + - "Life Expectation: %{x:.0%}
" + - "Population: %{marker.size:,}" + - "", - 'marker': { - 'size': df['pop'], - 'sizemode': 'area', - 'sizeref': 200000 - }, - 'transforms': [{ - 'type': 'filter', - 'target': df['year'], - 'orientation': '=', - 'value': 2002 - },{ - 'type': 'groupby', - 'groups': df['continent'], - 'styles': B - }] -}] - -layout = {'yaxis': {'type': 'log'}} - -pio.show({'data': data, 'layout': layout}, validate=False) +for index, row in df_2007.iterrows(): + bubble_size.append(math.sqrt(row['pop'])) + +df_2007['size'] = bubble_size +continent_names = ['Africa', 'Americas', 'Asia', 'Europe', 'Oceania'] +continent_data = {continent:df_2007.query("continent == '%s'" %continent) + for continent in continent_names} + +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=df_2007['continent'], + hovertemplate= + "%{text}

" + + "GDP per Capita: %{y:$,.0f}
" + + "Life Expectation: %{x:.0%}
" + + "Population: %{marker.size:,}" + + "", + marker_size=continent['size'], + )) + +fig.update_traces( + mode='markers', + marker={'sizemode':'area', + 'sizeref':10}) + +fig.update_layout( + xaxis={ + 'title':'GDP per capita', + 'type':'log'}, + yaxis={'title':'Life Expectancy (years)'}) + +fig.show() ``` ### Set Hover Template in Mapbox @@ -199,4 +204,4 @@ fig.show() ``` #### Reference -See https://plot.ly/python/reference/ for more information and chart attribute options! \ No newline at end of file +See https://plot.ly/python/reference/ for more information and chart attribute options! From 1e623717e67661010efa2b46029169cf0090d7e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmahdis-z=E2=80=9D?= <“maahhddiiss@gmail.com”> Date: Fri, 1 Nov 2019 13:25:21 -0400 Subject: [PATCH 6/8] added an example from v3 --- python/hover-text-and-formatting.md | 31 ++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/python/hover-text-and-formatting.md b/python/hover-text-and-formatting.md index 7df03828b..1460d5b8e 100644 --- a/python/hover-text-and-formatting.md +++ b/python/hover-text-and-formatting.md @@ -110,6 +110,33 @@ To customize the tooltip on your graph you can use [hovertemplate](https://plot. This template string can include `variables` in %{variable} format, `numbers` in [d3-format's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_forma), and `date` in [d3-time-fomrat's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format). Hovertemplate customize the tooltip text vs. [texttemplate](https://plot.ly/python/reference/#pie-texttemplate) which customizes the text that appears on your chart. +```python +import plotly.graph_objs as go +import plotly.io as pio + +fig = go.Figure(go.Scatter( + x = [1,2,3,4,5], + y = [2.02825,1.63728,6.83839,4.8485,4.73463], + hovertemplate = + 'Price: $%{y:.2f}'+ + '
X: %{x}
'+ + '%{text}', + text = ['Custom text {}'.format(i + 1) for i in range(5)], + showlegend = False)) + +fig.add_trace(go.Scatter( + x = [1,2,3,4,5], + y = [3.02825,2.63728,4.83839,3.8485,1.73463], + hovertemplate = 'Price: %{y:$.2f}', + showlegend = False)) + +fig.update_layout( + title = "Set hover text with hovertemplate", + template = pio.templates['plotly']) + +fig.show() +``` + ```python import plotly.graph_objects as go @@ -124,7 +151,9 @@ fig = go.Figure(go.Pie( fig.show() ``` -### Format Hover Template +### Advanced Hover Template +### Advanced Hover Template +The following example shows how to format hover template. [Here](https://plot.ly/python/v3/hover-text-and-formatting/#dash-example) is an example to see how to format hovetemplate in Dash. ```python import plotly.graph_objects as go From b9700e6e5a190d6af432052568678653bf0b7903 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmahdis-z=E2=80=9D?= <“maahhddiiss@gmail.com”> Date: Fri, 1 Nov 2019 13:30:10 -0400 Subject: [PATCH 7/8] changing title --- python/hover-text-and-formatting.md | 1 - 1 file changed, 1 deletion(-) diff --git a/python/hover-text-and-formatting.md b/python/hover-text-and-formatting.md index 1460d5b8e..73be29435 100644 --- a/python/hover-text-and-formatting.md +++ b/python/hover-text-and-formatting.md @@ -151,7 +151,6 @@ fig = go.Figure(go.Pie( fig.show() ``` -### Advanced Hover Template ### Advanced Hover Template The following example shows how to format hover template. [Here](https://plot.ly/python/v3/hover-text-and-formatting/#dash-example) is an example to see how to format hovetemplate in Dash. From ceeaf7ba5814787c79d92bf3104c31efbccc6855 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmahdis-z=E2=80=9D?= <“maahhddiiss@gmail.com”> Date: Fri, 1 Nov 2019 14:57:25 -0400 Subject: [PATCH 8/8] final revision --- python/hover-text-and-formatting.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/python/hover-text-and-formatting.md b/python/hover-text-and-formatting.md index 73be29435..d5972edc1 100644 --- a/python/hover-text-and-formatting.md +++ b/python/hover-text-and-formatting.md @@ -111,8 +111,7 @@ This template string can include `variables` in %{variable} format, `numbers` in Hovertemplate customize the tooltip text vs. [texttemplate](https://plot.ly/python/reference/#pie-texttemplate) which customizes the text that appears on your chart. ```python -import plotly.graph_objs as go -import plotly.io as pio +import plotly.graph_objects as go fig = go.Figure(go.Scatter( x = [1,2,3,4,5], @@ -130,9 +129,7 @@ fig.add_trace(go.Scatter( hovertemplate = 'Price: %{y:$.2f}', showlegend = False)) -fig.update_layout( - title = "Set hover text with hovertemplate", - template = pio.templates['plotly']) +fig.update_layout(title = "Set hover text with hovertemplate") fig.show() ``` @@ -152,7 +149,7 @@ fig.show() ``` ### Advanced Hover Template -The following example shows how to format hover template. [Here](https://plot.ly/python/v3/hover-text-and-formatting/#dash-example) is an example to see how to format hovetemplate in Dash. +The following example shows how to format hover template. [Here](https://plot.ly/python/v3/hover-text-and-formatting/#dash-example) is an example to see how to format hovertemplate in Dash. ```python import plotly.graph_objects as go