HTML save() with bokeh discards colors, labels

[hobzcalvin]

Consider the bokeh Chord example notebook: https://github.com/ioam/holoviews/blob/master/examples/reference/elements/bokeh/Chord.ipynb

But replace the last line: hv.Chord((links, nodes)).select(value=(5, None)) with a save() like so:

obj = hv.Chord((links, nodes)).select(value=(5, None))
hv.renderer('bokeh').save(obj,'out') # copied from http://holoviews.org/user_guide/Deploying_Bokeh_Apps.html

Colors and labels show up just fine when rendered to the notebook:

but the output HTML is missing these:

I tried something like this in case this plot needs a running server (though I don't know why it would; does this use DynamicMap??):

server = renderer.app(dmap, show=True, new_window=True)

Didn't seem to help.

[hobzcalvin]

Inlining the server doesn't work either:

not sure if it's relevant, but I see these errors in the JS console when inlining:

[philippjfr]

The magic only supports display in the notebook, we've been planning to convert examples to use the more explicit .options syntax but unfortunately that's a fairly big job.

[hobzcalvin]

Are you saying the .options syntax will persist these features properly?

On Tue, Oct 9, 2018 at 18:24 Philipp Rudiger notifications@github.com wrote:

The magic only supports display in the notebook, we've been planning to convert examples to use the more explicit .options syntax but unfortunately that's a fairly big job.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ioam/holoviews/issues/3067#issuecomment-428406167, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFBWXFUilgmKBTd7fhWvmEqwI3cTjgkks5ujUw2gaJpZM4XTxcs .

[philippjfr]

Yes, that's right, alternatively you can also display the object normally in one cell and then save it in another. The magics work by customizing the objects as they are being displayed in the notebook so without displaying them first the customization is not applied.

So your options are:

options = dict(label_index='name' color_index='index' edge_color_index='source',
    cmap='Category20' edge_cmap='Category20')
chord = hv.Chord((links, nodes)).select(value=(5, None)).options(**options)
hv.renderer('bokeh').save(chord, 'chord.html')

Or display it in one cell:

%%opts Chord [label_index='name' color_index='index' edge_color_index='source'] 
%%opts Chord (cmap='Category20' edge_cmap='Category20')
chord = hv.Chord((links, nodes)).select(value=(5, None))
chord

and save in the next:

hv.renderer('bokeh').save(chord, 'chord.html')

[hobzcalvin]

That works, thanks @philippjfr! It looks like the Chord docs page http://holoviews.org/reference/elements/bokeh/Chord.html is auto-generated from a notebook file https://github.com/ioam/holoviews/blob/master/examples/reference/elements/bokeh/Chord.ipynb so how does the Holoviews web site render the interactive charts properly?

I ask because I need to embed several charts amongst other HTML so I'm concerned about namespace conflicts etc. if I try to just paste multiple saved HTML blobs into a single document. It looks like the docs are just rendering a notebook in full, which could work too I suppose...unfortunately this is all inside Wordpress...

[philippjfr]

It is true that most of our docs are generated directly from the notebook, which is done using a sphinx extension. We also have a project explicitly to build a website from notebooks called nbsite but if you're simply embedding plots that's probably not that useful to you.

I ask because I need to embed several charts amongst other HTML so I'm concerned about namespace conflicts etc. if I try to just paste multiple saved HTML blobs into a single document.

I've done this in the past without issues. I also had an approach that exported pure JS files which can then be loaded in a script tag, which I made use of here: http://blog.holoviews.org/release_1.5.html which was generated from https://github.com/pyviz/blog/blob/master/content/gv_release_1.5.ipynb The basics of that approach involve putting a div tag with the correct id in your html template and then loading the script.