如何在Jupyter笔记本中使用破折号？

Question

是否可以在Jupyter笔记本中安装破折号应用程序，而不是在浏览器中提供和查看？

我的目的是链接Jupter笔记本中的图形，以便将鼠标悬停在一个图形上生成另一个图形所需的输入。

Answer 1

这个问题已经有了很好的答案，但是这种贡献将直接着眼于：

1。。如何在Jupyterlab 和

中使用Dash

2。。如何 将鼠标悬停在另一个图形上 来选择图形输入

---

执行以下步骤将直接在JupyterLab中释放Plotly Dash：

1。。安装最新的Plotly版本

2。。使用conda install -c plotly jupyterlab-dash

安装JupyterLab Dash

3。。使用该代码段进一步启动了Dash应用程序，该应用程序包含建立在熊猫数据框上并每秒扩展的动画。

JupyterLab中的Dash屏幕截图（下面的代码段中的代码）

此图片显示了JupyterLab内部发射的达世币（ literally ）。突出显示的四个部分是：

1-单元格。您可能已经非常熟悉的.ipynb中的单元格

2-破折号。一个“实时”破折号应用程序，以随机数扩展所有三个迹线，并每秒显示更新的图形。

3-控制台。一个控制台，您可以在其中使用例如fig.show

来检查脚本中的可用元素。

4-mode。：这显示了一些真正的魔法所在：

app.run_server(mode='jupyterlab', port = 8090, dev_tools_ui=True, #debug=True,
              dev_tools_hot_reload =True, threaded=True)

您可以选择在以下位置启动仪表板应用程序

：

1. Jupyterlab，如带有mode='jupyterlab'的屏幕截图中一样，
2. 或在单元格中，使用mode='inline'：

1. 或在您的默认浏览器中使用mode='external'

代码1：

import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

# code and plot setup
# settings
pd.options.plotting.backend = "plotly"

# sample dataframe of a wide format
np.random.seed(4); cols = list('abc')
X = np.random.randn(50,len(cols))  
df=pd.DataFrame(X, columns=cols)
df.iloc[0]=0;

# plotly figure
fig = df.plot(template = 'plotly_dark')

app = JupyterDash(__name__)
app.layout = html.Div([
    html.H1("Random datastream"),
            dcc.Interval(
            id='interval-component',
            interval=1*1000, # in milliseconds
            n_intervals=0
        ),
    dcc.Graph(id='graph'),
])

# Define callback to update graph
@app.callback(
    Output('graph', 'figure'),
    [Input('interval-component', "n_intervals")]
)
def streamFig(value):
    
    global df
    
    Y = np.random.randn(1,len(cols))  
    df2 = pd.DataFrame(Y, columns = cols)
    df = df.append(df2, ignore_index=True)#.reset_index()
    df.tail()
    df3=df.copy()
    df3 = df3.cumsum()
    fig = df3.plot(template = 'plotly_dark')
    #fig.show()
    return(fig)

app.run_server(mode='jupyterlab', port = 8090, dev_tools_ui=True, #debug=True,
              dev_tools_hot_reload =True, threaded=True)

但是，关于以下方面，好消息还没有结束：

我的目的是在Jupyter笔记本中链接图形，以便 将鼠标悬停在一个图上会生成另一个图所需的输入 图。

在dash.plotly.com上有一个完美的示例，它将根据Update Graphs on Hover段为您做到这一点：

我已经对原始设置进行了一些必要的更改，以便可以在JupyterLab中运行它。

代码段2-悬停选择图形源：

import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash.dependencies

# code and plot setup
# settings
pd.options.plotting.backend = "plotly"


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = JupyterDash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')

available_indicators = df['Indicator Name'].unique()

app.layout = html.Div([
    html.Div([

        html.Div([
            dcc.Dropdown(
                id='crossfilter-xaxis-column',
                options=[{'label': i, 'value': i} for i in available_indicators],
                value='Fertility rate, total (births per woman)'
            ),
            dcc.RadioItems(
                id='crossfilter-xaxis-type',
                options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
                value='Linear',
                labelStyle={'display': 'inline-block'}
            )
        ],
        style={'width': '49%', 'display': 'inline-block'}),

        html.Div([
            dcc.Dropdown(
                id='crossfilter-yaxis-column',
                options=[{'label': i, 'value': i} for i in available_indicators],
                value='Life expectancy at birth, total (years)'
            ),
            dcc.RadioItems(
                id='crossfilter-yaxis-type',
                options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
                value='Linear',
                labelStyle={'display': 'inline-block'}
            )
        ], style={'width': '49%', 'float': 'right', 'display': 'inline-block'})
    ], style={
        'borderBottom': 'thin lightgrey solid',
        'backgroundColor': 'rgb(250, 250, 250)',
        'padding': '10px 5px'
    }),

    html.Div([
        dcc.Graph(
            id='crossfilter-indicator-scatter',
            hoverData={'points': [{'customdata': 'Japan'}]}
        )
    ], style={'width': '49%', 'display': 'inline-block', 'padding': '0 20'}),
    html.Div([
        dcc.Graph(id='x-time-series'),
        dcc.Graph(id='y-time-series'),
    ], style={'display': 'inline-block', 'width': '49%'}),

    html.Div(dcc.Slider(
        id='crossfilter-year--slider',
        min=df['Year'].min(),
        max=df['Year'].max(),
        value=df['Year'].max(),
        marks={str(year): str(year) for year in df['Year'].unique()},
        step=None
    ), style={'width': '49%', 'padding': '0px 20px 20px 20px'})
])


@app.callback(
    dash.dependencies.Output('crossfilter-indicator-scatter', 'figure'),
    [dash.dependencies.Input('crossfilter-xaxis-column', 'value'),
     dash.dependencies.Input('crossfilter-yaxis-column', 'value'),
     dash.dependencies.Input('crossfilter-xaxis-type', 'value'),
     dash.dependencies.Input('crossfilter-yaxis-type', 'value'),
     dash.dependencies.Input('crossfilter-year--slider', 'value')])
def update_graph(xaxis_column_name, yaxis_column_name,
                 xaxis_type, yaxis_type,
                 year_value):
    dff = df[df['Year'] == year_value]

    fig = px.scatter(x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
            y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
            hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']
            )

    fig.update_traces(customdata=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'])

    fig.update_xaxes(title=xaxis_column_name, type='linear' if xaxis_type == 'Linear' else 'log')

    fig.update_yaxes(title=yaxis_column_name, type='linear' if yaxis_type == 'Linear' else 'log')

    fig.update_layout(margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest')

    return fig


def create_time_series(dff, axis_type, title):

    fig = px.scatter(dff, x='Year', y='Value')

    fig.update_traces(mode='lines+markers')

    fig.update_xaxes(showgrid=False)

    fig.update_yaxes(type='linear' if axis_type == 'Linear' else 'log')

    fig.add_annotation(x=0, y=0.85, xanchor='left', yanchor='bottom',
                       xref='paper', yref='paper', showarrow=False, align='left',
                       bgcolor='rgba(255, 255, 255, 0.5)', text=title)

    fig.update_layout(height=225, margin={'l': 20, 'b': 30, 'r': 10, 't': 10})

    return fig


@app.callback(
    dash.dependencies.Output('x-time-series', 'figure'),
    [dash.dependencies.Input('crossfilter-indicator-scatter', 'hoverData'),
     dash.dependencies.Input('crossfilter-xaxis-column', 'value'),
     dash.dependencies.Input('crossfilter-xaxis-type', 'value')])
def update_y_timeseries(hoverData, xaxis_column_name, axis_type):
    country_name = hoverData['points'][0]['customdata']
    dff = df[df['Country Name'] == country_name]
    dff = dff[dff['Indicator Name'] == xaxis_column_name]
    title = '<b>{}</b><br>{}'.format(country_name, xaxis_column_name)
    return create_time_series(dff, axis_type, title)


@app.callback(
    dash.dependencies.Output('y-time-series', 'figure'),
    [dash.dependencies.Input('crossfilter-indicator-scatter', 'hoverData'),
     dash.dependencies.Input('crossfilter-yaxis-column', 'value'),
     dash.dependencies.Input('crossfilter-yaxis-type', 'value')])
def update_x_timeseries(hoverData, yaxis_column_name, axis_type):
    dff = df[df['Country Name'] == hoverData['points'][0]['customdata']]
    dff = dff[dff['Indicator Name'] == yaxis_column_name]
    return create_time_series(dff, axis_type, yaxis_column_name)


app.run_server(mode='jupyterlab', port = 8090, dev_tools_ui=True, #debug=True,
              dev_tools_hot_reload =True, threaded=True)

Answer 2

（免责声明，我帮助维护Dash）

请参见https://github.com/plotly/jupyterlab-dash。这是一个JupyterLab扩展程序，将Dash嵌入Jupyter中。

也可以在Dash Community Forum中找到类似Can I run dash app in jupyter topic的替代解决方案。

Answer 3

寻找离线情节。

假设你有一个数字（例如fig = {'data'：data，'layout'：layout}）

然后， 在jupyter笔记本电脑内，

from plotly.offline import iplot, init_notebook_mode
init_notebook_mode()
# plot it
iplot(fig)

这将在你的jupyter中绘制阴谋。你甚至不必运行烧瓶服务器。

Answer 4

  

    

我的目的是链接Jupter笔记本中的图形，以便将鼠标悬停在一个图形上生成另一个图形所需的输入。

  

Bokeh中已存在类似功能。

另外，请查看this问题。

Answer 5

我不确定{J}可以在Jupyter笔记本中显示dash个应用程序。但如果您正在寻找的是使用滑块，组合框和其他按钮，您可能会对来自Jupyter的ipywidgets感兴趣。

这些可以与情节一起使用，如here所示。

修改

最终似乎有一些解决方案可以使用iframe和dash在Jupyter中嵌入IPython.display.display_html()个应用。 有关详细信息，请参阅this function和this GitHub repo。

Answer 6

您可以安装jupyter-plotly-dash，以便可以在Jupyter Notebook上运行仪表板应用程序。您可能需要考虑plotly的离线组件，但是我不太确定它如何工作。希望这会有所帮助！