Adding Static Points to a Plotly Slider

27 views Asked by At

I am trying to add static points to a plotly plot with sliders, with each static point having a vertical line to the sliding function line, to display what cost in regression looks like. How would I do this?

I have tried different methods of adding the points, but the points end up disappearing, I believe because of the update slider method, or moving with the y intercept slider, that is using the update method.

@cost_bp.route('/page1')
def costpage1():
    # Create figure
    fig = go.Figure()

    # Add traces, one for each slider step
    for weight in np.arange(-5, 5, 0.25):
        fig.add_trace(
            go.Scatter(
                visible=False,
                line=dict(color="#00CED1", width=2),
                x=np.arange(0, 10, 0.01),
                y=weight * np.arange(0, 10, 0.01) 
            )
        ) 

    # Make 1st trace visible
    fig.data[10].visible = True

    # Create and add slider
    weight_steps = []
    for i, wval in enumerate(np.arange(-5, 5, 0.25)):
        step = dict(
            method="update",
            args=[{"visible": [i == j for j in range(len(fig.data))]}],
            label=f"{wval}"
        )
        step["args"][0]["visible"][i] = True  # Toggle i'th trace to "visible"
        weight_steps.append(step)

    weight_slider = dict(
        active=30,
        currentvalue={"prefix": "Slope(w): "},
        pad={"t": 50},
        steps=weight_steps,
        tickwidth=.5,
        len=.5,
        x=.5
    )

    yint_steps = []
    for i, bval in enumerate(np.arange(0, 8, .25)):
        y_values = [weight * np.arange(0, 10, 0.01) + bval for weight in np.arange(-5, 5, 0.25)]
        step = dict(
            method="restyle",  # Use "restyle" method to update traces
            args=["y", y_values],  # Update y-values based on the selected y-intercept
            label=f"{bval}"
        )
        yint_steps.append(step)

    yint_slider = dict(
        active=5,
        currentvalue={"prefix": "Y-Intercept(b): "},
        pad={"t": 50},
        steps=yint_steps,
        tickwidth=.5,
        len=.5,
        x=0
    )
    
    sliders = [weight_slider, yint_slider]

    static_points = [
        dict(
            x=0,
            y=0,
            mode="lines",
            line=dict(color="#00CED1", width=2),
            name="Origin"
        ),
        dict(
            x=10,
            y=0,
            mode="lines",
            line=dict(color="#00CED1", width=2),
            name="X-Axis"
        ),
        dict(
            x=0,
            y=8,
            mode="lines",
            line=dict(color="#00CED1", width=2),
            name="Y-Axis"
        )
    ]
    
    fig.update_layout(
        title="Updatable Linear Function",
        template='simple_white',
        sliders=sliders,
        xaxis=dict(range=[0,10], dtick=1, showgrid=True),
        yaxis=dict(range=[0,8], dtick=1, showgrid=True),
        width=900, height=600,
        static_points=static_points
    )
    
    graph = fig.to_html()
    return render_template('cost/page1.html', prev_page='page3', next_page='page2', graph=graph)
0

There are 0 answers