Skip to content

Commit 7b0e444

Browse files
minor cleanup of proposed new example in Update dropdowns.md
1 parent 05e8485 commit 7b0e444

File tree

1 file changed

+8
-5
lines changed

1 file changed

+8
-5
lines changed

doc/python/dropdowns.md

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -446,7 +446,7 @@ fig.show()
446446

447447
### Creating several independent graphs and using Jinja to insert them into a JavaScript enabled webpage
448448

449-
It is often easier to create each potential view as a separate graph and then use Jinja to insert each potential view into a div on a JavaScript enabled webpage with a drop down that chooses which div to display. This approach produces code that requires little customization or updating as you e.g. add, drop, or reorder views or traces, so it is particularly compelling for prototyping and rapid iteration. This requires both a Python program and a Jinja template file. You may want to consult the documentation on [using Jinja templates with Plotly](https://plotly.com/python/interactive-html-export/#inserting-plotly-output-into-html-using-a-jinja2-template).
449+
It is straight forward to create each potential view as a separate graph and then use Jinja to insert each potential view into a div on a JavaScript enabled webpage with a drop down that chooses which div to display. This approach produces code that requires little customization or updating as you e.g. add, drop, or reorder views or traces, so it is particularly compelling for prototyping and rapid iteration. It produces web pages that are larger than the webpages produced through the built in method which is a consideration for very large figures with hundreds or thousands of data points in traces that appear in multiple selections. This approach requires both a Python program and a Jinja template file. The documentation on [using Jinja templates with Plotly](https://plotly.com/python/interactive-html-export/#inserting-plotly-output-into-html-using-a-jinja2-template) is relevant background.
450450

451451
#### Python Code File
452452

@@ -460,7 +460,9 @@ df = px.data.gapminder()
460460
#create a dictionary with Plotly figures as values
461461
fig_dict = {}
462462
463-
# Loop through each unique continent and create a scatter plot using the 2007 data
463+
# we need to fill that dictionary with figures. this example assumes that each figure has a title and that
464+
# we want to use the titles as descriptions in the drop down
465+
# This example happens to fill the dictionary by creating a scatter plot for each continent using the 2007 Gapminder data
464466
for continent in df['continent'].unique():
465467
# Filter data for the current continent
466468
continent_data = df[(df['continent'] == continent) & (df['year'] == 2007)]
@@ -470,11 +472,12 @@ for continent in df['continent'].unique():
470472
labels={'gdpPercap': 'GDP per Capita (USD)', 'lifeExp': 'Life Expectancy (Years)'},
471473
hover_name='country',
472474
)
475+
#Standardizing the axes would make the graphs easier to compare
473476
474477
# Create a dictionary, data_for_jinja with two entries:
475-
# the value for the "dropdown_entries" key contains string containing a series of <option> tags, one for each item in the drop down
476-
# the value for the "divs" key contains a string with a series of <div> tags, each containing the content that appears only when the user selects the corresponding item from the dropdown
477-
# in this example, that content is a figure and descriptive text.
478+
# the value for the "dropdown_entries" key is a string containing a series of <option> tags, one tag for each item in the drop down
479+
# the value for the "divs" key is a string with a series of <div> tags, each containing the content that appears only when the user selects the corresponding item from the dropdown
480+
# in this example, the content of each div is a figure and descriptive text.
478481
data_for_jinja= collections.defaultdict(str)
479482
text_dict = {}
480483
for n, figname in enumerate(fig_dict.keys()):

0 commit comments

Comments
 (0)