How do I get data from selected points in an offline plotly python jupyter notebook?

Question

Example code:

from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot

import plotly.graph_objs as go

import numpy as np

N = 30
random_x = np.random.randn(N)
random_y = np.random.randn(N)

# Create a trace
trace = go.Scatter(
    x = random_x,
    y = random_y,
    mode = 'markers'
)

data = [trace]

# Plot and embed in ipython notebook!
iplot(data, filename='basic-scatter')

[]

How do I get a copy of the x,y data, or the indices from the selection?

Answer 1

So if you want to use javascript in Jupyter notebooks you have two options.

Using the display(HTML()) method for rendering html inside jupyter notebook, this method is demonstrated in the below sample code!

Another method is to use IPython Magic, read more here, the code will go something like this.

%%html
%html [--isolated] Render the cell as a block of HTML

optional arguments: --isolated Annotate the cell as ‘isolated’. Isolated cells are rendered inside their own tag

%%html
<span> naren</span>

You can also use this above method to render the HTML.

Please check the below code, where I have taken the code for select event from the plotly javascript events docs and made it work for jupyter!

from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
import plotly.graph_objs as go
from plotly import tools
import pandas as pd
import numpy as np
from datetime import datetime
init_notebook_mode(connected=True)
from IPython.core.display import display, HTML


N = 30
random_x = np.random.randn(N)
random_y = np.random.randn(N)

# Create a trace
trace = go.Scatter(
    x = random_x,
    y = random_y,
    mode = 'markers'
)

data = [trace]

# Plot and embed in ipython notebook!
plot = plot(data, filename='basic-scatter', include_plotlyjs=False, output_type='div')
divId=plot.split("id=\"",1)[1].split('"',1)[0]
plot = plot.replace("Plotly.newPlot", "var graph = Plotly.newPlot")
plot = plot.replace("</script>", """
var graph = document.getElementById('"""+divId+"""');
var color1 = '#7b3294';
var color1Light = '#c2a5cf';
var colorX = '#ffa7b5';
var colorY = '#fdae61';
;graph.on('plotly_selected', function(eventData) {
  var x = [];
  var y = [];

  var colors = [];
  for(var i = 0; i < N; i++) colors.push(color1Light);

  eventData.points.forEach(function(pt) {
    x.push(pt.x);
    y.push(pt.y);
    colors[pt.pointNumber] = color1;
  });


  Plotly.restyle(graph, 'marker.color', [colors], [0]);
});
""")
display(HTML(plot))