You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: doc/python/dropdowns.md
+8-5Lines changed: 8 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -446,7 +446,7 @@ fig.show()
446
446
447
447
### Creating several independent graphs and using Jinja to insert them into a JavaScript enabled webpage
448
448
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.
450
450
451
451
#### Python Code File
452
452
@@ -460,7 +460,9 @@ df = px.data.gapminder()
460
460
#create a dictionary with Plotly figures as values
461
461
fig_dict = {}
462
462
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
@@ -470,11 +472,12 @@ for continent in df['continent'].unique():
470
472
labels={'gdpPercap': 'GDP per Capita (USD)', 'lifeExp': 'Life Expectancy (Years)'},
471
473
hover_name='country',
472
474
)
475
+
#Standardizing the axes would make the graphs easier to compare
473
476
474
477
# 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.
0 commit comments