adding a JavaScript/Jinja example to dropdowns.md

[rl-utility-man]

Documentation PR

• [ X] I've seen the doc/README.md file
• [ X] This change runs in the current version of Plotly on PyPI and targets the doc-prod branch OR it targets the master branch
• [ X] If this PR modifies the first example in a page or adds a new one, it is a px example if at all possible
• [ X] Every new/modified example has a descriptive title and motivating sentence or paragraph
• [ X] Every new/modified example is independently runnable
• [ X] Every new/modified example is optimized for short line count and focuses on the Plotly/visualization-related aspects of the example rather than the computation required to produce the data being visualized
• [ X] Meaningful/relatable datasets are used for all new examples instead of randomly-generated data where possible
• [ N/A] The random seed is set if using randomly-generated data in new/modified examples
• [ N/A] New/modified remote datasets are loaded from https://plotly.github.io/datasets and added to https://github.com/plotly/datasets
• [ X] Large computations are avoided in the new/modified examples in favour of loading remote datasets that represent the output of such computations
• [ X] Imports are plotly.graph_objects as go / plotly.express as px / plotly.io as pio
• [ We need 2 DFs] Data frames are always called df
• [ X] fig = <something> call is high up in each new/modified example (either px.<something> or make_subplots or go.Figure)
• [ N/A] Liberal use is made of fig.add_* and fig.update_* rather than go.Figure(data=..., layout=...) in every new/modified example
• [ N/A] Specific adders and updaters like fig.add_shape and fig.update_xaxes are used instead of big fig.update_layout calls in every new/modified example
• [ No. The whole point is to illustrate an alternative to fig.show. We may want to integrate the result with the documentation in either a manual or automated way. Let me know if I should drop it in] fig.show() is at the end of each new/modified example
• [ X] plotly.plot() and plotly.iplot() are not used in any new/modified example
• [ X] Hex codes for colors are not used in any new/modified example in favour of these nice ones

I appreciate the Plotly community and hope this is helpful!

Code PR

• I have read through the contributing notes and understand the structure of the package. In particular, if my PR modifies code of plotly.graph_objects, my modifications concern the codegen files and not generated files.
• I have added tests (if submitting a new feature or correcting a bug) or
  modified existing tests.
• For a new feature, I have added documentation examples in an existing or
  new tutorial notebook (please see the doc checklist as well).
• I have added a CHANGELOG entry if fixing/changing/adding anything substantial.
• For a new feature or a change in behaviour, I have updated the relevant docstrings in the code to describe the feature or behaviour (please see the doc checklist as well).

-->

[rl-utility-man]

@LiamConnors Is there anything I can do to assist the Plotly team in reviewing this PR? I think most of the build failures are not in my new code, since I have two pretty different documentation PRs open (this one and #4873) and the builds both fail in similar ways -- often complaining about facets like heatmaps that are in the existing page, but not in my PR.

I'm honored to be a member of the productive and supportive Plotly community and appreciate the way you make my contributions better. Thanks!

[LiamConnors]

Thanks very much for this PR @rl-utility-man! and sorry for the delay on this. Just looking at the build failures now, but yeah, I don't think they're related to this PR in any way.

[LiamConnors]

Suggested change

	### Creating several independent graphs and using Jinja to insert them into a JavaScript enabled webpage
	### Embedding Multiple Graphs in a Webpage using Jinja

We can shorten this if possible, so it takes up less space on the left sidebar

[rl-utility-man]

Good suggestion. What would you think of "Using a Dropdown to Select a Graph Using Jinja" as a short title?

[LiamConnors]

I think this needs to be marked as a python block.
Right now it's rendering as text:

[rl-utility-man]

agreed! Thanks!

[LiamConnors]

This probably actually needs the same <!-- #region --> blocks as well as being marked as Python, as in:

https://github.com/plotly/plotly.py/blob/doc-prod/doc/python/interactive-html-export.md?plain=1#L59-L102

[rl-utility-man]

Added in commit 5; there's something funky with the preview screen -- neither the example -- which demonstrably renders correctly when live -- nor my new commit convert e.g. > to > in preview mode. I hope I've done everything right, but it's difficult to tell.

[LiamConnors]

I'm not certain why, but this renders like this in the generated page. We probably want to mark it as txt. Do you edit the files in a Jupyter notebook or the md file directly

[rl-utility-man]

Thanks for all these good edits. I edited the .md directly. There's an example of embedding HTML into the .md here: https://plotly.com/python/interactive-html-export/

The gist of it is to use e.g. lt; rather than <:

<!-- #region -->

[three backticks]
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;

I can make the requisite edits in the next day or two

[rl-utility-man]

I just committed changes that resolve this problem. The preview now looks good to me. Thank you for flagging this!

[LiamConnors]

This looks really good @rl-utility-man. I tried it out the code with a template and it's working well for me.

[rl-utility-man]

Thank you for all the suggestions! I've incorporated them or slight variations on them. Everything looks good to me. Let me know if there's anything more I can do to help!

(also: is there a good forum to post short articles and get feedback on frontier or challenging visualizations? For example, I'm interested in layered or combinatorial legends for maps or scatterplots that might e.g. use shape to denote the type of school, fill or hollow to denote grade levels served, and color to denote test scores. I've got the code, but there's a bunch of subtlety about e.g. what design choices to make and how much information is too much. I can find almost nothing on how to do this thoughtfully online and it feels simultaneously powerful and tricky -- so I'd love to find the right place to advance the conversation -- and the Plotly docs and forums and Medium.com all seem to be not quite the right place to do it. Is there e.g. a blog/blogger that would take guest posts or coauthor?)

[LiamConnors]

Sorry for the delay @rl-utility-man. Just was trying to figure out the failing build-doc. Once I merge #4938 I'll be able to take one last look at this and get it merged.

Good question about the forum. I don't know of anything, unfortunatley, but maybe @Coding-with-Adam would?