use plotly as polymer element and bind pandas dataframe

[priscilluzza]

I am not sure this is the right place to describe my issue. I would like to use the plot.ly library with the declarativewidget and bind the plot with a pandas dataframe. I am not an expert of webcomponet and polymer but to proceed I have found the polymer elemet git://github.com/ginkgobioworks/plotly-plot.git that I believe is what I need. In order to reach my goal I installed bower and I have tried the following example

`%%html
<link rel='import' href='urth_components/plotly-plot/plotly-plot.html' 
        is='urth-core-import' package='git://github.com/ginkgobioworks/plotly-plot.git' debug ='true'>
    <p>Hard-coded plot example:</p>
    <plotly-plot id="first-plot"
      data='[
        {
          "x": [1, 2, 3, 4],
          "y": [10, 15, 13, 17],
          "mode": "markers",
          "type": "scatter"
        },
        {
          "x": [2, 3, 4, 5],
          "y": [16, 5, 11, 9],
          "mode": "lines",
          "type": "scatter"
        },
        {
          "x": [1, 2, 3, 4],
          "y": [12, 9, 15, 12],
          "mode": "lines+markers",
          "type": "scatter"
        }
      ]'
      layout='
        {
          "title":"Line and Scatter Plot",
          "height": 400,
          "width": 480
        }
      '
    >
    </plotly-plot>`

It does not work with the following error: iron-request.html:304 POST http://localhost:8888/urth_import 404 (Not Found) It seems to me that bower does not install the element and so the element is not found.

I tried than to install manually the polymer element with `bower install git://github.com/ginkgobioworks/plotly-plot.git --config.directory='C:\Users\Priscilluzza\Anaconda2\Lib\site-packages\declarativewidgets\static\urth_components'

but again the plot is not displayed.

Any help or input to proceed? For your information the following works:

%%html
<link rel='import' href='urth_components/paper-input/paper-input.html' 
        is='urth-core-import' package='PolymerElements/paper-input'>
<paper-input label="Input label"></paper-input>

[peller]

I think you'll need the http url. urth-core-import probably can't deal with git: urls.

I tried it and I get Plotly is not defined There may be some involvement here with requirejs/amd, which is loaded by Jupyter.

[peller]

Not a very satisfying answer: https://github.com/plotly/plotly.github.io/issues/74

[peller]

kludge: if you do window.define = undefined in JS before using a <plotly-plot> tag, it seems to work.

[priscilluzza]

Hello!! Thanks a lot! Now it works also for me but with two concerning:

• the plot lost the interactive capability. It is a static image and it is not as it is when I use iplot
• the output cell is empty when I reopen the notebook and re-run it. To get the output again I have to recreate a new notebook with the same content copy paste the single cell

Is it the same for you? Following the code I use

import declarativewidgets as declwidgets
declwidgets.init()

------

%%html
<link rel='import' href='urth_components/plotly-plot/plotly-plot.html' 
        is='urth-core-import' package='http://github.com/ginkgobioworks/plotly-plot.git'>
    <p>Hard-coded plot example:</p>
    <script>
        window.define = undefined
    </script>    
    <plotly-plot id="first-plot"
      data='[
        {
          "x": [1, 2, 3, 4],
          "y": [10, 15, 13, 17],
          "mode": "markers",
          "type": "scatter"
        },
        {
          "x": [2, 3, 4, 5],
          "y": [16, 5, 11, 9],
          "mode": "lines",
          "type": "scatter"
        },
        {
          "x": [1, 2, 3, 4],
          "y": [12, 9, 15, 12],
          "mode": "lines+markers",
          "type": "scatter"
        }
      ]'
      layout='
        {
          "title":"Line and Scatter Plot",
          "height": 400,
          "width": 480
        }
      '
    >
    </plotly-plot> 

[priscilluzza]

I can provide some more details on the second issue. Basically it occurs when I restart the notebook with the output cell already created.

Following the scenario to get the issue:

1. Open the notebook
2. cell->all output->clear
3. save the notebook
4. go to jupyter home page
5. select the notebook
6. shutdown
7. reopen the notebook
8. run all

-> the output is created as expected

repeat steps 3-8

->the output is not created and in the console the following errors are raised:

main.js:5 Uncaught TypeError: define is not a function(anonymous function) @ main.js:5
utils.js:36Loading extension: declarativewidgets/js/main
require.js?v=6da8be3…:900 TypeError: Cannot read property 'load_ipython_extension' of undefined(…)check @ require.js?v=6da8be3…:900
main.js:3 Uncaught TypeError: define is not a function(anonymous function) @ main.js:3
extension.js:1 Uncaught TypeError: define is not a function(anonymous function) @ extension.js:1
utils.js:36Loading extension: jupyter-js-widgets/extension
require.js?v=6da8be3…:900 TypeError: Cannot read property 'load_ipython_extension' of undefined(…)
Widgets are not available.  Please install widgetsnbextension or ipywidgets 4.0

I believe that this errors are due to

<script>
        window.define = undefined
</script>

[peller]

A better approach would be to try loading plotly with requirejs using a shim, perhaps by forking the plotly-plot repo. This is what we do with vega and handsontable As you'll see in urth-viz-vega, it means accounting for dependencies, like D3.

[lbustelo]

@priscilluzza I seems to me that this issue should be raised in ginkgobioworks/plotly-plot. This project treats polymer/webcomponent elements as blackboxes... we just try to load them. If there are any incompatibilities with the element and the Jupyter notebook, then those need to most likely be resolved on the element itself.