Add example to illustrate label placement

This issue is a byproduct from issue #5353 [Extensions do not render when using bokeh.embed.components / bokeh.embed.file_html APIs]

The motivation for this issue is to include plot axis labels with (rendered) LaTeX labels, derived from the following example: http://bokeh.pydata.org/en/latest/docs/user_guide/extensions_gallery/latex.html

As mentioned in issue #5353, the placement of the labels is problematic, and I suspect there is a better way to place labels. Building on the example from issue #5353:

p = bokeh.plotting.figure(title="LaTeX Demonstration")

p.line(x, y)

equation = "f = \sum_{n=1}^\infty\\frac{-e^{i\pi}}{2^n}!"

horizLabel = LatexLabel(text=equation,
                        x=0.5, y=0.7, 
                        x_units='data', y_units='data',
                        render_mode='css', text_font_size='6pt',
                        angle=0) 
p.add_layout(horizLabel, "below")

vertLabel = LatexLabel(text=equation,
                       x=-0.3, y=2.0, 
                       x_units='data', y_units='data',
                       render_mode='css', text_font_size='6pt',
                       angle=90, angle_units="deg")
p.add_layout(vertLabel, "left")

l = bokeh.layouts.layout([[p]], sizing_mode='stretch_both')

with open("embedLatexLabelTest-file_html.html","w") as f:
    f.write(bokeh.embed.file_html(l, bokeh.resources.CDN, "Plot with LaTeX label"))

The latex labels move when panning the plot - also, the vertical label is too far from the plot and the horizontal label is not displayed, but those are moot points:

So I switched to “screen” units:

horizLabel = LatexLabel(text=equation,
                        x=500, y=0, 
                        x_units='screen', y_units='screen',
                        render_mode='css', text_font_size='6pt',
                        angle=0) 
p.add_layout(horizLabel, "below")

vertLabel = LatexLabel(text=equation,
                       x=50, y=500, 
                       x_units='screen', y_units='screen',
                       render_mode='css', text_font_size='6pt',
                       angle=90, angle_units="deg")
p.add_layout(vertLabel, "left")

However, now the vertical border / padding makes the label look awkward and the horizontal label is not shown until scrolling down the page:

These are extracts from the “real” program generating the plots. In that case, the data and labels are different, and the output is inconsistent - i.e., some labels look decent, while others are butted up against the axis, while others look like they require more padding (maybe via the `min_border_left/bottom’ attribute?). I can post examples of those if that would be helpful, but I’m hoping this provides enough information.

@bryevdv suggested I add this issue, requesting that an example be added to Bokeh so future users that encounter this type of issue have a reference.

Thanks for your help!

[bryevdv]

Wow, there is alot going on here. I am going to close this issue due to lengthy inactivity, but also because there are some other issues (e.g. #6031) that seem to overlap with it. I know this is an important topic to a specific class of users, I do hope we can make improvements in this area in time, but resources are spread extremely thin right now.

[StevenCHowell]

@arossi1 I will be able to return to this later this week. I will post my results.