Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

D3 based plots in a pn.pane? #230

Closed
ea42gh opened this issue Feb 1, 2019 · 11 comments
Closed

D3 based plots in a pn.pane? #230

ea42gh opened this issue Feb 1, 2019 · 11 comments

Comments

@ea42gh
Copy link
Contributor

ea42gh commented Feb 1, 2019

Might there be a way to enable d3 based plots in a pane?
@jbednar
Copy link
Member

jbednar commented Feb 1, 2019

Maybe via https://github.com/areski/python-nvd3 ?

@philippjfr
Copy link
Member

I think @ea42gh was more interested in embedding his existing JS based d3 plots.

@ea42gh
Copy link
Contributor Author

ea42gh commented Feb 1, 2019

Could one take this further and have a pane for JS more generally?
Judging by @jbednar's reaction above, I surmise this would be rather involved?!

@jbednar
Copy link
Member

jbednar commented Feb 1, 2019

Trust @philippjfr on that and not me! Seems like communication between Python and JS will be the tricky bit, for arbitrary JS.

@ea42gh
Copy link
Contributor Author

ea42gh commented Feb 13, 2019

for that matter, p5.js might be interesting too....

@philippjfr
Copy link
Member

The HTML pane will support inclusion of arbitrary scripts once #326 is merged so you'll be able to render whatever plot you want.

@philippjfr
Copy link
Member

Does that address your needs @ea42gh? I don't think there is much else we can do to support d3 plots.

@philippjfr
Copy link
Member

Closing this, please reopen if you run into issues or have other suggestions.

@ea42gh
Copy link
Contributor Author

ea42gh commented Mar 23, 2019

I saw your new html panel: eager to try it out! Thank you!

@ea42gh
Copy link
Contributor Author

ea42gh commented Mar 25, 2019

Can't get the following to work:

import panel as pn
js_files = {'p5': 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js'}
pn.extension(js_files=js_files)

html='''
<div id="p5-panel" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
function setup() { var canvas=createCanvas(400,400); canvas.parent('p5-panel');}
function draw(){
  background(150); ellipse(random(width), random(height), 20, 20);
}
</script>
'''
pn.pane.HTML(html, height=1000, width=1000).save('/tmp/bah.html')

@ea42gh
Copy link
Contributor Author

ea42gh commented Mar 26, 2019

Found one way to get this working:

import panel as pn
pn.extension()

##############################################################33
# generate an html file that uses p5

some='''
<!DOCTYPE html><html lang="en">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
</head>
<body>
<div id="p5-panel" style="width: 500px; height: 500px"></div>
<script type="text/javascript">
function setup() { var canvas=createCanvas(400,400); canvas.parent('p5-panel'); }
function draw() { background(150); ellipse(random(width), random(height), 20, 20); }
</script>
</body>
'''
with open( '/tmp/p5.html', 'w') as f:
    f.write( some )

# --------------------------------------------------------------
# generate a pane that includes this html page
html='''
<object type="text/html" height=600 width=600 data="p5.html">
'''
p5 = pn.pane.HTML(html, height=600, width=600)

# --------------------------------------------------------------
# other panel elements
import numpy as np
import holoviews as hv
box = pn.panel( hv.BoxWhisker((np.random.randint(0, 10, 100), np.random.randn(100)), 'Group').opts(padding=.05).sort() )

# --------------------------------------------------------------
# combine and save to a file
pn.Row( box, p5 ).save('/tmp/toto.html')

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@philippjfr @jbednar @ea42gh