如何在沒有 jupyter 的情況下導出此交互式繪圖以在瀏覽器中查看？

Question

我在 python 中有這個交互式繪圖：

import ipywidgets as widgets
import plotly.graph_objects as go 
from numpy import linspace


def leaf_plot(sense, spec):
    fig = go.Figure()

    x = linspace(0,1,101)
    x[0] += 1e-16
    x[-1] -= 1e-16

    positive =  sense*x/(sense*x + (1-spec)*(1-x)) 
                                                    #probability a person is infected, given a positive test result, 
                                                    #P(p|pr) = P(pr|p)*P(p)/P(pr)
                                                    #        = P(pr|p)*P(p)/(P(pr|p)*P(p) + P(pr|n)*P(n))
                                                    #        =   sense*P(p)/(  sense*P(p) +(1-spec)*P(n))
    negative =  1-spec*(1-x)/((1-sense)*x + spec*(1-x))

    fig.add_trace(
        go.Scatter(x=x, y  = positive, name="Positive",marker=dict( color='red'))
    )

    fig.add_trace(
        go.Scatter(x=x, y  = negative, 
                   name="Negative", 
                   mode = 'lines+markers',
                   marker=dict( color='green'))
    )
 
    fig.update_xaxes(title_text = "Base Rate")
    fig.update_yaxes(title_text = "Post-test Probability")
    fig.show()

sense_ = widgets.FloatSlider(
    value=0.5,
    min=0,
    max=1.0,
    step=0.01,
    description='Sensitivity:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='.2f',
)

spec_ = widgets.FloatSlider(
    value=0.5,
    min=0,
    max=1.0,
    step=0.01,
    description='Specificity:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='.2f',
)
ui = widgets.VBox([sense_, spec_])

out = widgets.interactive_output(leaf_plot, {'sense': sense_, 'spec': spec_})

display(ui, out)

如何導出它，以便它可以在瀏覽器中作為獨立的網頁查看，比如 HTML，同時保留交互性，例如在https://gabgoh.github.io/COVID/index.html 中？

使用 plotly 的 fig.write_html() 選項我得到了一個獨立的網頁，但這樣我就丟失了滑塊。

通過一些修改，plotly 最多允許一個滑塊（ipywidgets 不包含在 plotly 圖形對象中）。

另外，在 plotly 中，所述滑塊基本上控制了預先計算的軌跡的可見性（參見例如https://plotly.com/python/sliders/ ），這限制了交互性（有時參數空間很大）。

最好的方法是什么？

（我不一定需要堅持使用 plotly/ipywidgets）

Answer 1

使用plotly，創建圖形后，保存：

fig.write_html("path/to/file.html")

還可以在函數中嘗試這個參數：

animation_opts: dict 或 None (默認 None) 要傳遞給 Plotly.js 中的函數 Plotly.animate 的自定義動畫參數的字典。 有關可用選項，請參閱https://github.com/plotly/plotly.js/blob/master/src/plots/animation_attributes.js 。 如果圖形不包含框架，或者 auto_play 為 False，則無效。

否則，請在此處查看一些建議： https : //community.plotly.com/t/export-plotly-and-ipywidgets-as-an-html-file/18579

Answer 2

你需要重新做一些事情，但你可以用dash和Heroku實現你想要的。

首先，您需要修改 Leaf_plot() 以返回圖形對象。

from numpy import linspace


def leaf_plot(sense, spec):
    fig = go.Figure()

    x = linspace(0,1,101)
    x[0] += 1e-16
    x[-1] -= 1e-16

    positive = sense*x/(sense*x + (1-spec)*(1-x)) 
    negative = 1-spec*(1-x)/((1-sense)*x + spec*(1-x))

    fig.add_trace(
        go.Scatter(x=x, y  = positive, name="Positive",marker=dict( color='red'))
    )

    fig.add_trace(
        go.Scatter(x=x, y  = negative, 
                   name="Negative", 
                   mode = 'lines+markers',
                   marker=dict( color='green'))
    )
    
    fig.update_layout(
    xaxis_title="Base rate",
    yaxis_title="After-test probability",
    )

    return fig

然后編寫破折號應用程序：

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output


# Build App
app = JupyterDash(__name__)
app.layout = html.Div([
    html.H1("Interpreting Test Results"),
    dcc.Graph(id='graph'),
    html.Label([
        "sensitivity",
        dcc.Slider(
            id='sensitivity-slider',
            min=0,
            max=1,
            step=0.01,
            value=0.5,
            marks = {i: '{:5.2f}'.format(i) for i in linspace(1e-16,1-1e-16,11)}
        ),
    ]),
    html.Label([
        "specificity",
        dcc.Slider(
            id='specificity-slider',
            min=0,
            max=1,
            step=0.01,
            value=0.5,
            marks = {i: '{:5.2f}'.format(i) for i in linspace(1e-16,1-1e-16,11)}
        ),
    ]),
])

# Define callback to update graph
@app.callback(
    Output('graph', 'figure'),
    Input("sensitivity-slider", "value"),
    Input("specificity-slider", "value")
)
def update_figure(sense, spec):
    return leaf_plot(sense, spec)

# Run app and display result inline in the notebook
app.run_server()

如果您在 jupyter notebook 中執行此操作，您將只能在本地訪問您的應用程序。

如果你想發布，可以試試Heroku