Как я могу получить данные от выбранных точек в автономной записной книжке Python Jupyter?

Question

Пример кода:

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')

[]

Как получить копию данных x, y или индексов из выбора?

Answer 1

Итак, если вы хотите использовать javascript в записных книжках Jupyter, у вас есть два варианта.

Использование метода display(HTML()) для рендеринга html внутри записной книжки jupyter, этот метод продемонстрирован в следующем примере кода!

Другой способ - использовать IPython Magic, подробнее здесь , код будет выглядеть примерно так:

%% html
% html [--isolated] Визуализация ячейки как блока HTML

необязательные аргументы: --isolated Аннотировать ячейку как «изолированную».Изолированные ячейки отображаются внутри их собственного тега

%%html
<span> naren</span>

Вы также можете использовать этот метод выше для визуализации HTML.

Пожалуйста, проверьте код ниже, где я взял коддля select event из сюжетных событий javascript docs и заставил его работать на 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))