3d interactive graph linked with three sliders - slider

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. Thank you
I coded this in python.
Below is my data alonwith code
|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’),
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)
'''

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)