diff --git a/doc/python/dropdowns.md b/doc/python/dropdowns.md index 3944f1a2689..222b794e804 100644 --- a/doc/python/dropdowns.md +++ b/doc/python/dropdowns.md @@ -444,5 +444,104 @@ fig.update_layout(title_text="Yahoo") fig.show() ``` +### Graph Selection Dropdowns in Jinja + +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 dropdown 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. + + + +#### Python Code File + +```python +import plotly.express as px +from jinja2 import Template +import collections +# Load the gapminder dataset +df = px.data.gapminder() + +# Create a dictionary with Plotly figures as values +fig_dict = {} + +# we need to fill that dictionary with figures. this example assumes that each figure has a title and that +# we want to use the titles as descriptions in the drop down +# This example happens to fill the dictionary by creating a scatter plot for each continent using the 2007 Gapminder data +for continent in df['continent'].unique(): + # Filter data for the current continent + continent_data = df[(df['continent'] == continent) & (df['year'] == 2007)] + + fig_dict[continent] = px.scatter(continent_data, x='gdpPercap', y='lifeExp', + title=f'GDP vs Life Expectancy for {continent}', + labels={'gdpPercap': 'GDP per Capita (USD)', 'lifeExp': 'Life Expectancy (Years)'}, + hover_name='country',size="pop", size_max=55 + ) + #Standardizing the axes makes the graphs easier to compare + fig_dict[continent].update_xaxes(range=[0,50000]) + fig_dict[continent].update_yaxes(range=[25,90]) + + +# Create a dictionary, data_for_jinja with two entries: +# the value for the "dropdown_entries" key is a string containing a series of