3d interactive graph linked with three sliders

Question

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

Here is my data:

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

Here is the application layout:

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'),
    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())
])

And here is the callback:

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

Answer 1

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