3d interactive graph linked with three sliders

[Jagriti]

Hello everyone, I’m trying to create a 3d interactive graph linked with three sliders. But when I run this code, I get blank 2d graph with sliders. If anyone can help me to find mistake in my code, it would be very helpful. Thank you

|A |C |B|
|191|11870402.57|150927.156|
|194|11534176.96|150926.613|
|200|8791715.569|150309.893|
|219|9058784.693|130344.409|
|193|11710374.76|150993.204|
|230|8966576.793|121803.204|
|196|11563137.82|147352.525|
|197|11559778.19|147360.662|
|232|8145250.015|134850.363|
|230|8960357.94|122119.87|
|241|8343604.908|118177.929|

from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd

app = Dash(__name__)
app.layout = html.Div([
    html.H4('Illustrations of the trade-offs between the key objectives'),
    dcc.Graph(id="graph_scatter"),
    html.P("A:"),
    dcc.Slider(
        id='3d-scatter-plot-x-range-slider',
        min=df['A'].min(), max=df['A'].max(),
        value=df['A'].max()),
    html.P("B:"),
    dcc.Slider(
        id='3d-scatter-plot-y-range-slider',
        min=df['B'].min(), max=df['B'].max(),
        value=df['B'].max()),
        html.P("C:"),
        dcc.Slider(
            id='3d-scatter-plot-z-range-slider',
            min=df['C'].min(), max=df['C'].max(),
            value=df['C'].max())
    
])

@app.callback(
    Output('graph', 'figure'), 
    [Input('3d-scatter-plot-x-range-slider', 'value'),
     Input('3d-scatter-plot-y-range-slider', 'value'),
    Input('3d-scatter-plot-z-range-slider', 'value')
     ])
def update_bar_chart(slider_range_x, slider_range_y, slider_range_z):
    df = pd.read_csv('ABC.csv') # replace with your own data source
    low_x, high_x = slider_range_x
    low_y, high_y = slider_range_y
    low_z, high_z = slider_range_z
    mask = (df.A > low_x) & (df.A < high_x) & (df.B  > low_y) & (df.B < high_y) & (df.C > low_z) & (df.C < high_z)                                                                                                                                                               

    fig = px.scatter_3d(mask,
                        x ='A', z='C',y='B')
    return fig
if __name__ == "__main__":
    app.run_server(debug=False)

[hoatran]

I see some problem in your code.

• First: You set id in your dcc.Graph is graph_scatter but in you callback you set it is graph
• Second: You are using Slider so that you can not change the low_x, low_y, low_z but high_x, high_y, high_y. So that you can not use something like low_x, high_x = slider_range_x. Based on your code I revised as below:

from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
import dash_bootstrap_components as dbc

df = pd.read_csv()

app = Dash(__name__, external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([
    html.H4('Illustrations'),
    dcc.Graph(id='graph_scatter',figure={}),
    html.P('A:'),
    dcc.Slider(
    id='3d-scatter-plot-x-range-slider',
    min=df['A'].min(), max=df['A'].max(),
    value=df['A'].max()),
    html.P('B:'),
    dcc.Slider(
    id='3d-scatter-plot-y-range-slider',
    min=df['B'].min(), max=df['B'].max(),
    value=df['B'].max()),
    html.P('C:'),
    dcc.Slider(
    id='3d-scatter-plot-z-range-slider',
    min=df['C'].min(), max=df['C'].max(),
    value=df['C'].max())

    ])

@app.callback(
   Output('graph_scatter', 'figure'),
   [Input('3d-scatter-plot-x-range-slider', 'value'),
   Input('3d-scatter-plot-y-range-slider', 'value'),
   Input('3d-scatter-plot-z-range-slider', 'value')
   ])
def update_bar_chart(slider_range_x, slider_range_y, slider_range_z):
    high_x = slider_range_x
    high_y = slider_range_y
    high_z = slider_range_z
    dff = df[(df['A'] < high_x)&(df['B'] < high_y)&(df['C'] < high_z)]
    print(high_x)
    fig = px.scatter_3d(dff,x ='A', z='C',y='B')
    return fig
if __name__ == "__main__":
    app.run_server(debug=False)