Plotly: How to change axes variables interactively for a 3D scatter plot?

user_9849568 0
Viewed 447

I'm plotting a multidimensional table in scatter plots to test relationships between columns of a unique data frame.

I would like to know if there is any way that I can change in the browser the variable in each ax in an interactive way, without needing to plot another grid.

I don't know if this is a redundant question, but I've already did some research without any success.

fig = px.scatter_3d(data, x="V1", y="V2", z= 'V3', hover_data=['Z'])
fig.show()

Thank you in advance.

plotly data-visualization python
1 Answers

The complete code snippet below will give you a Dash-app in JupyterLab that looks like this:

enter image description here

Here you can change which columns to display from the plotly dataset px.data.stocks(). If this approach is something you can use, I'd be happy to explain the details. ANd if JupyterLab is not your thing, just follow the three steps needed to rewrite it to a standard Dash app as described in the post Plotly: How to rewrite a standard dash app to launch it in JupyterLab?

Complete code_

import plotly as py
import pandas as pd

from plotly import tools
import plotly.express as px
import plotly.graph_objects as go

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


app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])


colors = px.colors.qualitative.Plotly
# colors = ['blue', 'green', 'red', 'black', 'yellow']
symbols = ['circle', 'circle-open', 'square', 'square-open', 'diamond', 'diamond-open', 'cross', 'x']

df = px.data.stocks().set_index('date')
columns = df.columns

# Set up well organized controls in a dbc.Card()
controls = dbc.Card([dbc.FormGroup([dbc.Label("x-axis"),
                                    dcc.Dropdown(id='dd_x',
                                                 options= [{'label': k, 'value': k} for k in columns],
                                                  value=columns[0],
                                                ),
                                   ],),
                    dbc.FormGroup([dbc.Label("y-axis"),
                                   dcc.Dropdown(id='dd_y',
                                                options= [{'label': k, 'value': k} for k in columns],
                                                value=columns[1],
                                                ),
                                   ],),
                    dbc.FormGroup([dbc.Label("z-axis"),
                                   dcc.Dropdown(id='dd_z',
                                                options= [{'label': k, 'value': k} for k in columns],
                                                value=columns[2],
                                                ),
                                    ],)
                    ],
                    body=True,
                    style = {'font-size': 'large'}
                    )

# Set up the app layout using dbc.Container(), dbc.Row(), and dbc.Col()
app.layout = dbc.Container([html.H1("Make a column selection for each axis"),
                            html.Hr(),
                            dbc.Row([dbc.Col([controls],xs = 4),
                                     dbc.Col([dbc.Row([dbc.Col(dcc.Graph(id="market_graph")),])]),
                                    ]),
                            html.Br(),
                            ],
                            fluid=True,
                            )

# 3D figure with callbacks for color, symbol and size
@app.callback(
    Output("market_graph", "figure"),
    [
        Input("dd_x", "value"),
        Input("dd_y", "value"),
        Input("dd_z", "value"),
    ],
)
def history_graph(x, y, z):
#     df = px.data.iris()
    fig = px.scatter_3d(df, x=df[x], y=df[y], z=df[z])

    fig.data[0].update(marker_color=colors[4])
    fig.data[0].update(marker_symbol=symbols[6])
    fig.data[0].update(marker_size=8)

    fig.update_layout(uirevision='constant')
    fig.update_layout(template = 'plotly_dark')
    fig.update_layout(margin=dict(l=10, r=10, b=10, t=10))
    return fig

app.run_server(mode='inline', port = 8007)
user_34377870
Related