Adding text/lines outside charts

Community Support
1

In order to familiarize myself with Bokeh, tried to replicate this basic 538 visualization (http://i1.wp.com/espnfivethirtyeight.files.wordpress.com/2016/06/morris-finalsmvp-2.png?quality=90&strip=all&w=1150&ssl=1), with the target of eventually adding interactivity to the chart after recreating it.

While I was able to recreate most of it: My attempt(http://imgur.com/a/JZPZ7) , I’m facing some issues with adding things outside of the chart. Now, I know that it is easy to add these elements separately while embedding by adding a few HTML elements, but I want to know if there is a way to do the whole thing in Bokeh itself. Here is a summary of the problems I’m facing:

a) Is there a way to add subtitles to plots? If not, is there anyway I can put two figures in a column container and have one of them only contain text so that it can act as the main title? I tried doing it but irrespective of what sizing mode and width parameters I chose, the top figure kept getting cut off (as you can see in my attempt pic). Here is the code snippet I’m using. ‘q’ is the heading-only figure atop p, which contains everything else:

# Figure 'p''s dimensions are 600 X 500, so I put width for q = 500
q = figure(width=500, height=40, background_fill_color='#F0F0F0',
          title='Shaun Livingston, two-way dominator')
q.toolbar_location=None
q.title.text_font_size='20px'
q.title.offset=-50.0

l = column(q,p,sizing_mode='fixed')
show(l)

b) If you have a look at the original visualization, there is also some text content at the very bottom. Is it possible to add text outside chart area in Bokeh? In Matplotlib, there is figtext and in fact, just plt.text with data coordinates outside the main chart also works. In Bokeh though, that does not happen and the text does not appear if I try to place it outside chart area (Using Label/LabelSet). Is there a workaround?

c) Similarly, is it possible to add lines outside the chart area? Like matplotlib’s axhline, axvline.

d) What’s the ‘zorder’ like variable in Bokeh? If I want the span lines to appear below the circle glyphs, what alteration do I need to make to the code?

I really enjoyed creating the rest of the chart and the new annotation options were extremely helpful. Thanks!

2

NICE WORK - thanks for
sharing!

    a) and           b) have the same solution.

There’s an example here:

  • see how the caption is outside.
···

https://github.com/bokeh/bokeh/blob/master/examples/models/iris.py

You can add labels off canvas to an y
side of the plot.

                                  c) Not currently I'm

afraid

                d) Depends on how you                             made the span lines.

If you just used regular lines then just
make sure you declare them be fore you declare
the circles and they’ll be underneath .
If you used a Span annotation, then also declare
first, but ad d
level=‘glyph’ when you add them - I think
that’ll do it, but it might not. You
may have to use q.lin e and not a
span annotation. If that d oesn’t
make sense, share the code
of how y ou make your circles
and lines.

                                                                                      Hope

that helps.

                                          Bird

  On 8/10/16 8:33 AM, Harshit Khare

wrote:

    In order to familiarize myself with Bokeh, tried to

replicate this basic 538
visualization
(),
with the target of eventually adding interactivity to the chart
after recreating it.
While I was able to recreate most of it: ()
, I’m facing some issues with adding things outside of the
chart. Now, I know that it is easy to add these elements
separately while embedding by adding a few HTML elements, but I
want to know if there is a way to do the whole thing in Bokeh
itself. Here is a summary of the problems I’m facing:
a) Is there a way to add subtitles to plots? If not, is there
anyway I can put two figures in a column container and have one
of them only contain text so that it can act as the main title?
I tried doing it but irrespective of what sizing mode and width
parameters I chose, the top figure kept getting cut off (as you
can see in my attempt pic). Here is the code snippet I’m using.
‘q’ is the heading-only figure atop p, which contains everything
else:
# Figure ‘p’‘s dimensions are 600 X 500, so I put width for
q = 500
q = figure(width=500, height=40,
background_fill_color=’#F0F0F0’,
title=‘Shaun Livingston, two-way dominator’)
q.toolbar_location=None
q.title.text_font_size=‘20px’
q.title.offset=-50.0
l = column(q,p,sizing_mode=‘fixed’)
show(l)
b) If you have a look at the original visualization, there is
also some text content at the very bottom. Is it possible to add
text outside chart area in Bokeh? In Matplotlib, there is
figtext and in fact, just plt.text with data coordinates outside
the main chart also works. In Bokeh though, that does not happen
and the text does not appear if I try to place it outside chart
area (Using Label/LabelSet). Is there a workaround?
c) Similarly, is it possible to add lines outside the chart
area? Like matplotlib’s axhline, axvline. d) What’s the ‘zorder’ like variable in Bokeh? If I want the
span lines to appear below the circle glyphs, what alteration do
I need to make to the code?
I really enjoyed creating the rest of the chart and the new
annotation options were extremely helpful. Thanks!

–

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)

http://i1.wp.com/espnfivethirtyeight.files.wordpress.com/2016/06/morris-finalsmvp-2.png?quality=90&strip=all&w=1150&ssl=1

My attempthttp://imgur.com/a/JZPZ7

3

Thanks for the reply! So, first of all, span above glyph issue is fixed.
I specified level=‘glyph’ as you suggested, and it worked.

Now for the subtitle and text outside chart area bit, I did try adding them using this snippet:

msg = ‘Main Title’
caption = Title(text=msg, align=‘left’, text_font_size=‘12pt’)
caption.text_font_size=‘17px’
caption.offset=-50.0
caption.text_font_style=‘bold’
p.add_layout(caption, ‘above’)

msg3 = ‘Subtitle’
caption3 = Title(text=msg3, align=‘left’, text_font_size=‘12pt’)
p.add_layout(caption3, ‘above’)

But the problem is that both this are being placed ‘above’ and are overlapping. The offset option only moves them left/right since they are both placed above. Any workaround for this? Something like a y-offset or some other way that I’m missing?

Thanks again.

···

On Friday, August 12, 2016 at 3:51:01 PM UTC+5:30, Sarah Bird wrote:

    NICE WORK - thanks for

sharing!

    a) and           b) have the same solution.

There’s an example here:
https://github.com/bokeh/bokeh/blob/master/examples/models/iris.py
- see how the caption is outside.

      You can add labels off canvas to an                y

side of the plot.

                                  c) Not currently I'm

afraid

                d) Depends on how you                             made the span lines.

If you just used regular lines then just
make sure you declare them be fore you declare
the circles and they’ll be underneath .
If you used a Span annotation, then also declare
first, but ad d
level=‘glyph’ when you add them - I think
that’ll do it, but it might not. You
may have to use q.lin e and not a
span annotation. If that d oesn’t
make sense, share the code
of how y ou make your circles
and lines.

                                                                                      Hope

that helps.

                                          Bird




  On 8/10/16 8:33 AM, Harshit Khare > wrote:

    In order to familiarize myself with Bokeh, tried to

replicate this basic 538
visualization
(http://i1.wp.com/espnfivethirtyeight.files.wordpress.com/2016/06/morris-finalsmvp-2.png?quality=90&strip=all&w=1150&ssl=1 ),
with the target of eventually adding interactivity to the chart
after recreating it.

    While I was able to recreate most of it: [My attempt](http://imgur.com/a/JZPZ7)([http://imgur.com/a/JZPZ7](http://imgur.com/a/JZPZ7)        )

, I’m facing some issues with adding things outside of the
chart. Now, I know that it is easy to add these elements
separately while embedding by adding a few HTML elements, but I
want to know if there is a way to do the whole thing in Bokeh
itself. Here is a summary of the problems I’m facing:

    a) Is there a way to add subtitles to plots? If not, is there

anyway I can put two figures in a column container and have one
of them only contain text so that it can act as the main title?
I tried doing it but irrespective of what sizing mode and width
parameters I chose, the top figure kept getting cut off (as you
can see in my attempt pic). Here is the code snippet I’m using.
‘q’ is the heading-only figure atop p, which contains everything
else:

        # Figure 'p''s dimensions are 600 X 500, so I put width for

q = 500

        q = figure(width=500, height=40,

background_fill_color=‘#F0F0F0’,

                  title='Shaun Livingston, two-way dominator')

        q.toolbar_location=None

        q.title.text_font_size='20px'

        q.title.offset=-50.0

       

        l = column(q,p,sizing_mode='fixed')

        show(l)



    b) If you have a look at the original visualization, there is

also some text content at the very bottom. Is it possible to add
text outside chart area in Bokeh? In Matplotlib, there is
figtext and in fact, just plt.text with data coordinates outside
the main chart also works. In Bokeh though, that does not happen
and the text does not appear if I try to place it outside chart
area (Using Label/LabelSet). Is there a workaround?

    c) Similarly, is it possible to add lines outside the chart

area? Like matplotlib’s axhline, axvline.

    d) What's the 'zorder' like variable in Bokeh? If I want the

span lines to appear below the circle glyphs, what alteration do
I need to make to the code?

    I really enjoyed creating the rest of the chart and the new

annotation options were extremely helpful. Thanks!

–

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

    [
      <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" height="30px" width="150px">
    ](http://continuum.io)
4

Can you provide a
picture so I can see what’s
happening.

What you’ ve put there looks like it should
work, and they should not overlap.

Having said that, try Label not Title. It’s much more flexible. I t has a
location property that you can use to be really
precise about positions.

                                      Also, as

a punt, what if you put both
your title and subtitle in
‘below’ pos ition

  • do they work then?

Best,

Bird

···

On 8/12/16 5:36 AM, Harshit Khare
wrote:

    Thanks for the reply! So, first of all, span above

glyph issue is fixed. I specified level=‘glyph’ as you
suggested, and it worked.

    Now for the subtitle and text outside chart area bit, I did try

adding them using this snippet:

    msg = 'Main Title'

    caption = Title(text=msg, align='left', text_font_size='12pt')

    caption.text_font_size='17px'

    caption.offset=-50.0

    caption.text_font_style='bold'

    p.add_layout(caption, 'above')



    msg3 = 'Subtitle'

    caption3 = Title(text=msg3, align='left', text_font_size='12pt')

    p.add_layout(caption3, 'above')



    But the problem is that both this are being placed 'above' and

are overlapping. The offset option only moves them left/right
since they are both placed above. Any workaround for this?
Something like a y-offset or some other way that I’m missing?

    Thanks again.

    On Friday, August 12, 2016 at 3:51:01 PM UTC+5:30, Sarah Bird

wrote:

NICE WORK - thanks for sharing!

            a) and                   b) have the same

solution. There’s an example here: https://github.com/bokeh/bokeh/blob/master/examples/models/iris.py
- see how the caption is outside.

                                  You can add labels off

canvas to any side of the plot.

                                                  c) Not currently

I’m afraid

                        d) Depends on how you                                     made the span

lines. If you just used regular
lines then just make sure you decl are them
be fore
you declare the circles and they’ll
be underneath .
If you used a Span annotation, then also
declare first, but ad d
level=‘glyph’ when you
add them - I think that’ll do
it, but it might not. You may
have to use q.lin e and
not a span annotat ion.
If that d oesn’t
make sense, share the
code of how y ou make your
circles and lines.

                                                                                                      Hope that

helps.

                                                  Bird

On 8/10/16 8:33 AM, Harshit Khare wrote:

            In order to familiarize myself with Bokeh,

tried to replicate this basic 538 visualization
(http://i1.wp.com/espnfivethirtyeight.files.wordpress.com/2016/06/morris-finalsmvp-2.png?quality=90&strip=all&w=1150&ssl=1 ),
with the target of eventually adding interactivity to
the chart after recreating it.

            While I was able to recreate most of it: [My attempt](http://imgur.com/a/JZPZ7)([http://imgur.com/a/JZPZ7](http://imgur.com/a/JZPZ7)                ) , I'm facing

some issues with adding things outside of the chart.
Now, I know that it is easy to add these elements
separately while embedding by adding a few HTML
elements, but I want to know if there is a way to do the
whole thing in Bokeh itself. Here is a summary of the
problems I’m facing:

            a) Is there a way to add subtitles to plots? If not, is

there anyway I can put two figures in a column container
and have one of them only contain text so that it can
act as the main title? I tried doing it but irrespective
of what sizing mode and width parameters I chose, the
top figure kept getting cut off (as you can see in my
attempt pic). Here is the code snippet I’m using. ‘q’ is
the heading-only figure atop p, which contains
everything else:

                # Figure 'p''s dimensions are 600 X 500, so I put

width for q = 500

                q = figure(width=500, height=40,

background_fill_color=‘#F0F0F0’,

                          title='Shaun Livingston, two-way

dominator’)

                q.toolbar_location=None

                q.title.text_font_size='20px'

                q.title.offset=-50.0

               

                l = column(q,p,sizing_mode='fixed')

                show(l)



            b) If you have a look at the original visualization,

there is also some text content at the very bottom. Is
it possible to add text outside chart area in Bokeh? In
Matplotlib, there is figtext and in fact, just plt.text
with data coordinates outside the main chart also works.
In Bokeh though, that does not happen and the text does
not appear if I try to place it outside chart area
(Using Label/LabelSet). Is there a workaround?

            c) Similarly, is it possible to add lines outside the

chart area? Like matplotlib’s axhline, axvline.

            d) What's the 'zorder' like variable in Bokeh? If I want

the span lines to appear below the circle glyphs, what
alteration do I need to make to the code?

            I really enjoyed creating the rest of the chart and the

new annotation options were extremely helpful. Thanks!

–

          You received this message because you are subscribed to

the Google Groups “Bokeh Discussion - Public” group.

          To unsubscribe from this group and stop receiving emails

from it, send an email to [email protected].

          To post to this group, send email to [email protected].

          To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io?utm_medium=email&utm_source=footer).

          For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

            [ ![Continuum
                Analytics](https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000) ](http://continuum.io)

–

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/5df25c90-9ffc-43d8-98f5-fb9f5191584b%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/5df25c90-9ffc-43d8-98f5-fb9f5191584b%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)
5

Attaching code and pictures.

I changed all titles to labels. I tried using all combinations of x, y, x_units, y_units for labels but every time I try adding the labels, the whole plot collapses.In attachments, Figure1 is without labels, so all good. As soon as I add the snippet below and re-run, everything collapses. (as in Figure 2). My full code is attached as well.

msg1 = ‘Subtitle1’
caption1 = Label(text=msg1)
p.add_layout(caption1, ‘below’)

msg2 = ‘Subtitle2’
caption2 = Label(text=msg2)
p.add_layout(caption2, ‘above’)

msg3 = ‘Subtitle3’
caption3 = Label(text=msg3)
p.add_layout(caption3, ‘above’)

Figure2.png685×823 6.28 KB

Figure1.png683×823 41.2 KB

bokehtry.py (4.97 KB)

···

On Tuesday, August 16, 2016 at 3:54:27 AM UTC+5:30, Sarah Bird wrote:

      Can you provide a

picture so I can see what’s
happening.

What you’ ve put there looks like it should
work, and they should not overlap.

Having said that, try Label not Title. It’s much more flexible. I t has a
location property that you can use to be really
precise about positions.

                                      Also, as

a punt, what if you put both
your title and subtitle in
‘below’ pos ition

  • do they work then?

Best,

Bird

  On 8/12/16 5:36 AM, Harshit Khare > wrote:

    Thanks for the reply! So, first of all, span above

glyph issue is fixed. I specified level=‘glyph’ as you
suggested, and it worked.

    Now for the subtitle and text outside chart area bit, I did try

adding them using this snippet:

    msg = 'Main Title'

    caption = Title(text=msg, align='left', text_font_size='12pt')

    caption.text_font_size='17px'

    caption.offset=-50.0

    caption.text_font_style='bold'

    p.add_layout(caption, 'above')



    msg3 = 'Subtitle'

    caption3 = Title(text=msg3, align='left', text_font_size='12pt')

    p.add_layout(caption3, 'above')



    But the problem is that both this are being placed 'above' and

are overlapping. The offset option only moves them left/right
since they are both placed above. Any workaround for this?
Something like a y-offset or some other way that I’m missing?

    Thanks again.

    On Friday, August 12, 2016 at 3:51:01 PM UTC+5:30, Sarah Bird > > wrote:

NICE WORK - thanks for sharing!

            a) and                   b) have the same

solution. There’s an example here: https://github.com/bokeh/bokeh/blob/master/examples/models/iris.py
- see how the caption is outside.

                                  You can add labels off

canvas to any side of the plot.

                                                  c) Not currently

I’m afraid

                        d) Depends on how you                                     made the span

lines. If you just used regular
lines then just make sure you decl are them
be fore
you declare the circles and they’ll
be underneath .
If you used a Span annotation, then also
declare first, but ad d
level=‘glyph’ when you
add them - I think that’ll do
it, but it might not. You may
have to use q.lin e and
not a span annotat ion.
If that d oesn’t
make sense, share the
code of how y ou make your
circles and lines.

                                                                                                      Hope that

helps.

                                                  Bird

On 8/10/16 8:33 AM, Harshit Khare wrote:

            In order to familiarize myself with Bokeh,

tried to replicate this basic 538 visualization
(http://i1.wp.com/espnfivethirtyeight.files.wordpress.com/2016/06/morris-finalsmvp-2.png?quality=90&strip=all&w=1150&ssl=1 ),
with the target of eventually adding interactivity to
the chart after recreating it.

            While I was able to recreate most of it: [My attempt](http://imgur.com/a/JZPZ7)([http://imgur.com/a/JZPZ7](http://imgur.com/a/JZPZ7)                ) , I'm facing

some issues with adding things outside of the chart.
Now, I know that it is easy to add these elements
separately while embedding by adding a few HTML
elements, but I want to know if there is a way to do the
whole thing in Bokeh itself. Here is a summary of the
problems I’m facing:

            a) Is there a way to add subtitles to plots? If not, is

there anyway I can put two figures in a column container
and have one of them only contain text so that it can
act as the main title? I tried doing it but irrespective
of what sizing mode and width parameters I chose, the
top figure kept getting cut off (as you can see in my
attempt pic). Here is the code snippet I’m using. ‘q’ is
the heading-only figure atop p, which contains
everything else:

                # Figure 'p''s dimensions are 600 X 500, so I put

width for q = 500

                q = figure(width=500, height=40,

background_fill_color=‘#F0F0F0’,

                          title='Shaun Livingston, two-way

dominator’)

                q.toolbar_location=None

                q.title.text_font_size='20px'

                q.title.offset=-50.0

               

                l = column(q,p,sizing_mode='fixed')

                show(l)



            b) If you have a look at the original visualization,

there is also some text content at the very bottom. Is
it possible to add text outside chart area in Bokeh? In
Matplotlib, there is figtext and in fact, just plt.text
with data coordinates outside the main chart also works.
In Bokeh though, that does not happen and the text does
not appear if I try to place it outside chart area
(Using Label/LabelSet). Is there a workaround?

            c) Similarly, is it possible to add lines outside the

chart area? Like matplotlib’s axhline, axvline.

            d) What's the 'zorder' like variable in Bokeh? If I want

the span lines to appear below the circle glyphs, what
alteration do I need to make to the code?

            I really enjoyed creating the rest of the chart and the

new annotation options were extremely helpful. Thanks!

–

          You received this message because you are subscribed to

the Google Groups “Bokeh Discussion - Public” group.

          To unsubscribe from this group and stop receiving emails

from it, send an email to [email protected].

          To post to this group, send email to [email protected].

          To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io?utm_medium=email&utm_source=footer).

          For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

            [ <img alt="Continuum
                Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" height="30px" width="150px"> ](http://continuum.io)

–

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/5df25c90-9ffc-43d8-98f5-fb9f5191584b%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/5df25c90-9ffc-43d8-98f5-fb9f5191584b%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

    [
      <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" style="width:150px;min-height:30px" height="30px" width="150px">
    ](http://continuum.io)
6

The collapsing thing is a known bug, but I thought we had an open
issue and I can’t find it - can you open an issue?

To solve it, set `title=None` on Plot.

After that you just need to position your off-canvas Labels

correctly.

`label_opts = dict(``

``    x=0, y=0,``

``    x_units='screen', y_units='screen'``

``)``

``

``msg1 = 'Subtitle1'``

``caption1 = Label(text=msg1, **label_opts)``

``p.add_layout(caption1, 'below')``

``

``msg2 = 'Subtitle2'``

``caption2 = Label(text=msg2, **label_opts)``

``p.add_layout(caption2, 'above')``

``

``msg3 = 'Subtitle3'``

``caption3 = Label(text=msg3, **label_opts)``

``p.add_layout(caption3, 'above')``

`
See attached for the final result.

This label positioning is definitely a little cumbersome, and we

want to create a nice API for it, which is why we haven’t documented
it in the user guide. I had to dig out the selenium test that tests
this feature to remember how to set this up correctly.

Congrats for all your hard work making a beautiful bokeh plot!

Screen Shot 2016-08-16 at 1.17.47 PM.png1044×1238 78.7 KB

···

On 8/16/16 6:54 AM, Harshit Khare
wrote:

Attaching code and pictures.

    I changed all titles to labels. I tried using all combinations

of x, y, x_units, y_units for labels but every time I try adding
the labels, the whole plot collapses.In attachments, Figure1 is
without labels, so all good. As soon as I add the snippet below
and re-run, everything collapses. (as in Figure 2). My full code
is attached as well.

    msg1 = 'Subtitle1'

    caption1 = Label(text=msg1)

    p.add_layout(caption1, 'below')



    msg2 = 'Subtitle2'

    caption2 = Label(text=msg2)

    p.add_layout(caption2, 'above')



    msg3 = 'Subtitle3'

    caption3 = Label(text=msg3)

    p.add_layout(caption3, 'above')



    On Tuesday, August 16, 2016 at 3:54:27 AM UTC+5:30, Sarah Bird

wrote:

              Can you

provide a picture so I can
see what’s happening.

                  What

you’ ve put there looks
like it should work , and they should not
overlap.

Having said that, try Label not
Title. It’s much more fl exible.
I t
has a location property that
you can use to
be really precise about positions.

                                              Also,

as a punt, what if you
put both your
title and subtitle in ‘below’
pos ition - do
they work then?

Best,

Bird

On 8/12/16 5:36 AM, Harshit Khare wrote:

            Thanks for the reply! So, first of all,

span above glyph issue is fixed. I specified
level=‘glyph’ as you suggested, and it worked.

            Now for the subtitle and text outside chart area bit, I

did try adding them using this snippet:

            msg = 'Main Title'

            caption = Title(text=msg, align='left',

text_font_size=‘12pt’)

            caption.text_font_size='17px'

            caption.offset=-50.0

            caption.text_font_style='bold'

            p.add_layout(caption, 'above')



            msg3 = 'Subtitle'

            caption3 = Title(text=msg3, align='left',

text_font_size=‘12pt’)

            p.add_layout(caption3, 'above')



            But the problem is that both this are being placed

‘above’ and are overlapping. The offset option only
moves them left/right since they are both placed above.
Any workaround for this? Something like a y-offset or
some other way that I’m missing?

            Thanks again.

            On Friday, August 12, 2016 at 3:51:01 PM UTC+5:30, Sarah

Bird wrote:

                    NICE WORK -

thanks for sharing!

                    a) and                           b) have the

same solution. There’s an example here: https://github.com/bokeh/bokeh/blob/master/examples/models/iris.py
- see how the caption is outside.

                                                  You can add labels

off canvas to
an y side of
the plot.

                                                                  c) Not

currently I’m afraid

                                                                      d)

Depends
on how you made
the span lines. If you just
used regular lines then just
make sure you decl are
them be fore
you declare the
circles and they’ll be underneath .
If you used a Span
annotation, then
also declare first, but ad d
level=‘glyph’ when
you add them - I think
that’ll do it, but it
might not. You may
have to use q.lin e and not a
span annotat ion. If that
d oesn’t
make sense,
share the code
of how you make your circles and lines.

                                                                                                                Hope

that helps.

                                                      Bird

On 8/10/16 8:33 AM, Harshit Khare wrote:

                    In order to familiarize myself with

Bokeh, tried to replicate this basic 538 visualization (http://i1.wp.com/espnfivethirtyeight.files.wordpress.com/2016/06/morris-finalsmvp-2.png?quality=90&strip=all&w=1150&ssl=1 ),
with the target of eventually adding
interactivity to the chart after recreating it.

                    While I was able to recreate most of it: [My attempt](http://imgur.com/a/JZPZ7)([http://imgur.com/a/JZPZ7](http://imgur.com/a/JZPZ7)                        ) ,

I’m facing some issues with adding things
outside of the chart. Now, I know that it is
easy to add these elements separately while
embedding by adding a few HTML elements, but I
want to know if there is a way to do the whole
thing in Bokeh itself. Here is a summary of the
problems I’m facing:

                    a) Is there a way to add subtitles to plots? If

not, is there anyway I can put two figures in a
column container and have one of them only
contain text so that it can act as the main
title? I tried doing it but irrespective of what
sizing mode and width parameters I chose, the
top figure kept getting cut off (as you can see
in my attempt pic). Here is the code snippet I’m
using. ‘q’ is the heading-only figure atop p,
which contains everything else:

                        # Figure 'p''s dimensions are 600 X 500, so

I put width for q = 500

                        q = figure(width=500, height=40,

background_fill_color=‘#F0F0F0’,

                                  title='Shaun Livingston, two-way

dominator’)

                        q.toolbar_location=None

                        q.title.text_font_size='20px'

                        q.title.offset=-50.0

                       

                        l = column(q,p,sizing_mode='fixed')

                        show(l)



                    b) If you have a look at the original

visualization, there is also some text content
at the very bottom. Is it possible to add text
outside chart area in Bokeh? In Matplotlib,
there is figtext and in fact, just plt.text with
data coordinates outside the main chart also
works. In Bokeh though, that does not happen and
the text does not appear if I try to place it
outside chart area (Using Label/LabelSet). Is
there a workaround?

                    c) Similarly, is it possible to add lines

outside the chart area? Like matplotlib’s
axhline, axvline.

                    d) What's the 'zorder' like variable in Bokeh?

If I want the span lines to appear below the
circle glyphs, what alteration do I need to make
to the code?

                    I really enjoyed creating the rest of the chart

and the new annotation options were extremely
helpful. Thanks!

–

                  You received this message because you are

subscribed to the Google Groups "Bokeh Discussion

  • Public" group.

                    To unsubscribe from this group and stop receiving

emails from it, send an email to [email protected].

                  To post to this group, send email to [email protected].

                  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io?utm_medium=email&utm_source=footer).

                  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

                    [ ![Continuum Analytics](https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000) ](http://continuum.io)

–

          You received this message because you are subscribed to

the Google Groups “Bokeh Discussion - Public” group.

          To unsubscribe from this group and stop receiving emails

from it, send an email to [email protected].

          To post to this group, send email to [email protected].

          To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/5df25c90-9ffc-43d8-98f5-fb9f5191584b%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/5df25c90-9ffc-43d8-98f5-fb9f5191584b%40continuum.io?utm_medium=email&utm_source=footer).

          For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

            [ ![Continuum
                Analytics](https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000) ](http://continuum.io)

–

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/edfb4eea-cafd-4b8d-a4c7-64349dce8b75%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/edfb4eea-cafd-4b8d-a4c7-64349dce8b75%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)
7

Yes, that did it. Thanks! Also, I managed to find a workaround for adding a line above the footer by enclosing it in a border. Attaching the final and original image.

A couple of things:

  1. Is there a way to add padding inside or outside a label? That would be helpful in neatly placing labels adjacently. I tried using the offset options but the the adjacent labels tend to overlap in that case. If I added offset to both labels, then one of them would move outside the figure.

  2. Can a list passed to the LabelSet x/y_offset parameter? In cases when data point labels tend to overlap, passing a list would be helpful to individually define an offset for the data points. One could devise a function then to avoid overlaps or manually make adjustments.

That’s all. No more questions for the time being. :slight_smile: Overall, this was a nice exercise to get started with Bokeh. Really enjoyed working with it. Next, I’ll add some interactions and start playing around with the hover/select tools. Thanks again!

bokeh_542.png627×825 31.1 KB

realthing.png1150×1366 41.4 KB

···

On Wednesday, August 17, 2016 at 1:51:22 AM UTC+5:30, Sarah Bird wrote:

The collapsing thing is a known bug, but I thought we had an open

issue and I can’t find it - can you open an issue?

To solve it, set `title=None` on Plot.



After that you just need to position your off-canvas Labels

correctly.

`label_opts = dict(``

``    x=0, y=0,``

``    x_units='screen', y_units='screen'``

``)``

``

``msg1 = 'Subtitle1'``

``caption1 = Label(text=msg1, **label_opts)``

``p.add_layout(caption1, 'below')``

``

``msg2 = 'Subtitle2'``

``caption2 = Label(text=msg2, **label_opts)``

``p.add_layout(caption2, 'above')``

``

``msg3 = 'Subtitle3'``

``caption3 = Label(text=msg3, **label_opts)``

``p.add_layout(caption3, 'above')``

`

See attached for the final result.



This label positioning is definitely a little cumbersome, and we

want to create a nice API for it, which is why we haven’t documented
it in the user guide. I had to dig out the selenium test that tests
this feature to remember how to set this up correctly.

Congrats for all your hard work making a beautiful bokeh plot!










  On 8/16/16 6:54 AM, Harshit Khare > > wrote:

Attaching code and pictures.

    I changed all titles to labels. I tried using all combinations

of x, y, x_units, y_units for labels but every time I try adding
the labels, the whole plot collapses.In attachments, Figure1 is
without labels, so all good. As soon as I add the snippet below
and re-run, everything collapses. (as in Figure 2). My full code
is attached as well.

    msg1 = 'Subtitle1'

    caption1 = Label(text=msg1)

    p.add_layout(caption1, 'below')



    msg2 = 'Subtitle2'

    caption2 = Label(text=msg2)

    p.add_layout(caption2, 'above')



    msg3 = 'Subtitle3'

    caption3 = Label(text=msg3)

    p.add_layout(caption3, 'above')



    On Tuesday, August 16, 2016 at 3:54:27 AM UTC+5:30, Sarah Bird > > > wrote:

              Can you

provide a picture so I can
see what’s happening.

                  What

you’ ve put there looks
like it should work , and they should not
overlap.

Having said that, try Label not
Title. It’s much more fl exible.
I t
has a location property that
you can use to
be really precise about positions.

                                              Also,

as a punt, what if you
put both your
title and subtitle in ‘below’
pos ition - do
they work then?

Best,

Bird

On 8/12/16 5:36 AM, Harshit Khare wrote:

            Thanks for the reply! So, first of all,

span above glyph issue is fixed. I specified
level=‘glyph’ as you suggested, and it worked.

            Now for the subtitle and text outside chart area bit, I

did try adding them using this snippet:

            msg = 'Main Title'

            caption = Title(text=msg, align='left',

text_font_size=‘12pt’)

            caption.text_font_size='17px'

            caption.offset=-50.0

            caption.text_font_style='bold'

            p.add_layout(caption, 'above')



            msg3 = 'Subtitle'

            caption3 = Title(text=msg3, align='left',

text_font_size=‘12pt’)

            p.add_layout(caption3, 'above')



            But the problem is that both this are being placed

‘above’ and are overlapping. The offset option only
moves them left/right since they are both placed above.
Any workaround for this? Something like a y-offset or
some other way that I’m missing?

            Thanks again.

            On Friday, August 12, 2016 at 3:51:01 PM UTC+5:30, Sarah > > > > > Bird wrote:

                    NICE WORK -

thanks for sharing!

                    a) and                           b) have the

same solution. There’s an example here: https://github.com/bokeh/bokeh/blob/master/examples/models/iris.py
- see how the caption is outside.

                                                  You can add labels

off canvas to
an y side of
the plot.

                                                                  c) Not

currently I’m afraid

                                                                      d)

Depends
on how you made
the span lines. If you just
used regular lines then just
make sure you decl are
them be fore
you declare the
circles and they’ll be underneath .
If you used a Span
annotation, then
also declare first, but ad d
level=‘glyph’ when
you add them - I think
that’ll do it, but it
might not. You may
have to use q.lin e and not a
span annotat ion. If that
d oesn’t
make sense,
share the code
of how you make your circles and lines.

                                                                                                                Hope

that helps.

                                                      Bird

On 8/10/16 8:33 AM, Harshit Khare wrote:

                    In order to familiarize myself with

Bokeh, tried to replicate this basic 538 visualization (http://i1.wp.com/espnfivethirtyeight.files.wordpress.com/2016/06/morris-finalsmvp-2.png?quality=90&strip=all&w=1150&ssl=1 ),
with the target of eventually adding
interactivity to the chart after recreating it.

                    While I was able to recreate most of it: [My attempt](http://imgur.com/a/JZPZ7)([http://imgur.com/a/JZPZ7](http://imgur.com/a/JZPZ7)                        ) ,

I’m facing some issues with adding things
outside of the chart. Now, I know that it is
easy to add these elements separately while
embedding by adding a few HTML elements, but I
want to know if there is a way to do the whole
thing in Bokeh itself. Here is a summary of the
problems I’m facing:

                    a) Is there a way to add subtitles to plots? If

not, is there anyway I can put two figures in a
column container and have one of them only
contain text so that it can act as the main
title? I tried doing it but irrespective of what
sizing mode and width parameters I chose, the
top figure kept getting cut off (as you can see
in my attempt pic). Here is the code snippet I’m
using. ‘q’ is the heading-only figure atop p,
which contains everything else:

                        # Figure 'p''s dimensions are 600 X 500, so

I put width for q = 500

                        q = figure(width=500, height=40,

background_fill_color=‘#F0F0F0’,

                                  title='Shaun Livingston, two-way

dominator’)

                        q.toolbar_location=None

                        q.title.text_font_size='20px'

                        q.title.offset=-50.0

                       

                        l = column(q,p,sizing_mode='fixed')

                        show(l)



                    b) If you have a look at the original

visualization, there is also some text content
at the very bottom. Is it possible to add text
outside chart area in Bokeh? In Matplotlib,
there is figtext and in fact, just plt.text with
data coordinates outside the main chart also
works. In Bokeh though, that does not happen and
the text does not appear if I try to place it
outside chart area (Using Label/LabelSet). Is
there a workaround?

                    c) Similarly, is it possible to add lines

outside the chart area? Like matplotlib’s
axhline, axvline.

                    d) What's the 'zorder' like variable in Bokeh?

If I want the span lines to appear below the
circle glyphs, what alteration do I need to make
to the code?

                    I really enjoyed creating the rest of the chart

and the new annotation options were extremely
helpful. Thanks!

–

                  You received this message because you are

subscribed to the Google Groups "Bokeh Discussion

  • Public" group.

                    To unsubscribe from this group and stop receiving

emails from it, send an email to [email protected].

                  To post to this group, send email to [email protected].

                  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io?utm_medium=email&utm_source=footer).

                  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

                    [ <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" height="30px" width="150px"> ](http://continuum.io)

–

          You received this message because you are subscribed to

the Google Groups “Bokeh Discussion - Public” group.

          To unsubscribe from this group and stop receiving emails

from it, send an email to [email protected].

          To post to this group, send email to [email protected].

          To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/5df25c90-9ffc-43d8-98f5-fb9f5191584b%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/5df25c90-9ffc-43d8-98f5-fb9f5191584b%40continuum.io?utm_medium=email&utm_source=footer).

          For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

            [ <img alt="Continuum
                Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" style="width:150px;min-height:30px" height="30px" width="150px"> ](http://continuum.io)

–

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/edfb4eea-cafd-4b8d-a4c7-64349dce8b75%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/edfb4eea-cafd-4b8d-a4c7-64349dce8b75%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

    [
      <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" style="width:150px;min-height:30px" height="30px" width="150px">
    ](http://continuum.io)
8

BRILLIANT.

I’ve answered your questions below.

  As an additional thought, Peter Wang (I believe) commented to me

offline that this graphic would actually be better with the y-axis
reversed (I know you were coping the fivethirtyeight graphic, but
you can still make improvements!) - that way better is up and to
the right which is the most intuitive location I would say.

  1) Is there a way to add padding inside or outside a label? That

would be helpful in neatly placing labels adjacently. I tried
using the offset options but the the adjacent labels tend to
overlap in that case. If I added offset to both labels, then one
of them would move outside the figure.

   Not at the moment - there is an issue:

  • feel free to comment
    on it.

    2) Can a list passed to the LabelSet x/y_offset parameter? In

cases when data point labels tend to overlap, passing a list would
be helpful to individually define an offset for the data points.
One could devise a function then to avoid overlaps or manually
make adjustments.

  Also a great feature request. I don't remember seeing an issue -

please do open one. I think an auto-dodge would be very helpful
though. I opened a related issue a while ago:

Keep sharing your progress.

···

https://github.com/bokeh/bokeh/issues/4416
https://github.com/bokeh/bokeh/issues/2981
On 8/17/16 6:38 AM, Harshit Khare
wrote:

    Yes, that did it. Thanks! Also, I managed to find a

workaround for adding a line above the footer by enclosing it in
a border. Attaching the final and original image.

    A couple of things:



    1) Is there a way to add padding inside or outside a label? That

would be helpful in neatly placing labels adjacently. I tried
using the offset options but the the adjacent labels tend to
overlap in that case. If I added offset to both labels, then one
of them would move outside the figure.

    2) Can a list passed to the LabelSet x/y_offset parameter? In

cases when data point labels tend to overlap, passing a list
would be helpful to individually define an offset for the data
points. One could devise a function then to avoid overlaps or
manually make adjustments.

    That's all. No more questions for the time being. :) Overall,

this was a nice exercise to get started with Bokeh. Really
enjoyed working with it. Next, I’ll add some interactions and
start playing around with the hover/select tools. Thanks again!

        On Wednesday, August 17, 2016 at 1:51:22 AM

UTC+5:30, Sarah Bird wrote:

            The collapsing

thing is a known bug, but I thought we had an open issue
and I can’t find it - can you open an issue?

            To solve it, set `title=None` on Plot.



            After that you just need to position your off-canvas

Labels correctly.

            `label_opts = dict(``

            ``    x=0, y=0,``

            ``    x_units='screen', y_units='screen'``

            ``)``

            ``

            ``msg1 = 'Subtitle1'``

            ``caption1 = Label(text=msg1, **label_opts)``

            ``p.add_layout(caption1, 'below')``

            ``

            ``msg2 = 'Subtitle2'``

            ``caption2 = Label(text=msg2, **label_opts)``

            ``p.add_layout(caption2, 'above')``

            ``

            ``msg3 = 'Subtitle3'``

            ``caption3 = Label(text=msg3, **label_opts)``

            ``p.add_layout(caption3, 'above')``

            `

            See attached for the final result.



            This label positioning is definitely a little

cumbersome, and we want to create a nice API for it,
which is why we haven’t documented it in the user guide.
I had to dig out the selenium test that tests this
feature to remember how to set this up correctly.

            Congrats for all your hard work making a beautiful bokeh

plot!

On 8/16/16 6:54 AM, Harshit Khare wrote:

Attaching code and pictures.

                I changed all titles to labels. I tried using all

combinations of x, y, x_units, y_units for labels
but every time I try adding the labels, the whole
plot collapses.In attachments, Figure1 is without
labels, so all good. As soon as I add the snippet
below and re-run, everything collapses. (as in
Figure 2). My full code is attached as well.

                msg1 = 'Subtitle1'

                caption1 = Label(text=msg1)

                p.add_layout(caption1, 'below')



                msg2 = 'Subtitle2'

                caption2 = Label(text=msg2)

                p.add_layout(caption2, 'above')



                msg3 = 'Subtitle3'

                caption3 = Label(text=msg3)

                p.add_layout(caption3, 'above')



                On Tuesday, August 16, 2016 at 3:54:27 AM UTC+5:30,

Sarah Bird wrote:

                          Can

you provide a picture so I can see what’s happening.

What you’ ve put there
looks like it should work , and they
should not overlap.

Having said
that,
try Label not Title.
It’s m uch
more flexible. I t has a
location
property that
you can use to be really precise about positions.

                                                      Also, as

a punt, what
if you put both your title and subtitle in
‘below’ position - do they work then?

Best,

Bird

On 8/12/16 5:36 AM, Harshit Khare wrote:

                        Thanks for the reply! So, first

of all, span above glyph issue is fixed. I
specified level=‘glyph’ as you suggested,
and it worked.

                        Now for the subtitle and text outside chart

area bit, I did try adding them using this
snippet:

                        msg = 'Main Title'

                        caption = Title(text=msg, align='left',

text_font_size=‘12pt’)

                        caption.text_font_size='17px'

                        caption.offset=-50.0

                        caption.text_font_style='bold'

                        p.add_layout(caption, 'above')



                        msg3 = 'Subtitle'

                        caption3 = Title(text=msg3, align='left',

text_font_size=‘12pt’)

                        p.add_layout(caption3, 'above')



                        But the problem is that both this are being

placed ‘above’ and are overlapping. The
offset option only moves them left/right
since they are both placed above. Any
workaround for this? Something like a
y-offset or some other way that I’m missing?

                        Thanks again.

                        On Friday, August 12, 2016 at 3:51:01 PM

UTC+5:30, Sarah Bird wrote:

                                NICE

WORK - thanks for sharing!

                                a) and                                       b)

have the same solution. There’s an
example here: https://github.com/bokeh/bokeh/blob/master/examples/models/iris.py
- see how the caption is outside.

                                                                          You

can add labels off canvas to an y side
of the plot.

                                                                                          c) Not currently

I’m afraid

                                            d) Depends on how you                                                         made the

span lines. If
you just used
regular lines
then just make
sure you declare them be fore you
declare the
circles and they’ll be underneath . If
you used a Span
annotation, then also declare first, but ad d
level=‘glyph’
when you
add them - I
think that’ll
do it, but it
might not. You
may have to
use q.line and not a span annotat ion. If
that d oesn’t
make sense,
share the code
of how you make your circles and lines.

                                                                                                                Hope

that helps.

                                                      Bird




                              On 8/10/16 8:33 AM, Harshit Khare

wrote:

                                In order to familiarize

myself with Bokeh, tried to
replicate this basic 538 visualization (http://i1.wp.com/espnfivethirtyeight.files.wordpress.com/2016/06/morris-finalsmvp-2.png?quality=90&strip=all&w=1150&ssl=1 ),
with the target of eventually adding
interactivity to the chart after
recreating it.

                                While I was able to recreate most of

it: My attempt(http://imgur.com/a/JZPZ7 )
, I’m facing some issues with adding
things outside of the chart. Now, I
know that it is easy to add these
elements separately while embedding
by adding a few HTML elements, but I
want to know if there is a way to do
the whole thing in Bokeh itself.
Here is a summary of the problems
I’m facing:

                                a) Is there a way to add subtitles

to plots? If not, is there anyway I
can put two figures in a column
container and have one of them only
contain text so that it can act as
the main title? I tried doing it but
irrespective of what sizing mode and
width parameters I chose, the top
figure kept getting cut off (as you
can see in my attempt pic). Here is
the code snippet I’m using. ‘q’ is
the heading-only figure atop p,
which contains everything else:

                                    # Figure 'p''s dimensions are

600 X 500, so I put width for q =
500

                                    q = figure(width=500, height=40,

background_fill_color=‘#F0F0F0’,

                                              title='Shaun

Livingston, two-way dominator’)

                                    q.toolbar_location=None

                                    q.title.text_font_size='20px'

                                    q.title.offset=-50.0

                                   

                                    l =

column(q,p,sizing_mode=‘fixed’)

                                    show(l)



                                b) If you have a look at the

original visualization, there is
also some text content at the very
bottom. Is it possible to add text
outside chart area in Bokeh? In
Matplotlib, there is figtext and in
fact, just plt.text with data
coordinates outside the main chart
also works. In Bokeh though, that
does not happen and the text does
not appear if I try to place it
outside chart area (Using
Label/LabelSet). Is there a
workaround?

                                c) Similarly, is it possible to add

lines outside the chart area? Like
matplotlib’s axhline, axvline.

                                d) What's the 'zorder' like variable

in Bokeh? If I want the span lines
to appear below the circle glyphs,
what alteration do I need to make to
the code?

                                I really enjoyed creating the rest

of the chart and the new annotation
options were extremely helpful.
Thanks!

–

                              You received this message because you

are subscribed to the Google Groups
“Bokeh Discussion - Public” group.

                              To unsubscribe from this group and

stop receiving emails from it, send an
email to [email protected].

                              To post to this group, send email to [email protected].

                              To view this discussion on the web

visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/38e9d243-3a3e-45de-b352-c5fa3192d311%40continuum.io.

                              For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
*** Developer,
Bokeh***

                                [ ![Continuum Analytics](https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000) ](http://continuum.io)

–

                      You received this message because you are

subscribed to the Google Groups “Bokeh
Discussion - Public” group.

                      To unsubscribe from this group and stop

receiving emails from it, send an email to [email protected].

                      To post to this group, send email to [email protected].

                      To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/5df25c90-9ffc-43d8-98f5-fb9f5191584b%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/5df25c90-9ffc-43d8-98f5-fb9f5191584b%40continuum.io?utm_medium=email&utm_source=footer).

                      For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

                        [ ![Continuum Analytics](https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000) ](http://continuum.io)

–

              You received this message because you are subscribed

to the Google Groups “Bokeh Discussion - Public”
group.

              To unsubscribe from this group and stop receiving

emails from it, send an email to [email protected].

              To post to this group, send email to [email protected].

              To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/edfb4eea-cafd-4b8d-a4c7-64349dce8b75%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/edfb4eea-cafd-4b8d-a4c7-64349dce8b75%40continuum.io?utm_medium=email&utm_source=footer).

              For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

                [ ![Continuum Analytics](https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000) ](http://continuum.io)

–

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/6e9d8380-c2b0-476e-b878-70483f171529%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/6e9d8380-c2b0-476e-b878-70483f171529%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)