I’ve got two separate toggle’s that initiate color and size on a plotly scatter graph. These work fine independently but I’m hoping to combine them so both color and size are updated when both toggles are on.
I am unable to call a single scatter and then use update_trace
because I need to assign discrete values to the species
column.
I’m unaware if color and size can be updated to an existing figure but am content to change.
<code>import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
import plotly.graph_objs as go
df = px.data.iris()
color_dict = {'versicolor': 'brown', 'setosa': 'orange', 'virginica': 'pink'}
size_dict = {'versicolor': 4, 'setosa': 6, 'virginica': 10}
sizemap = df["species"].map(size_dict)
df = df.sort_values(by = 'species', ascending= False).reset_index(drop = True)
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.P("Toggle for the Color"),
dcc.Checklist(
id="color_toggle",
options=[{"label": "", "value": True}],
value=[],
inline=True
),
html.P("Toggle for the Size"),
dcc.Checklist(
id="size_toggle",
options=[{"label": "", "value": True}],
value=[],
inline=True
),
html.Div(
dcc.Graph(id="chart"),
),
]
)
@app.callback(
Output("chart", "figure"),
[Input("color_toggle", "value"),
Input("size_toggle", "value")]
)
def update_output(color_on, size_on):
fig = px.scatter(df, x="sepal_width", y="sepal_length", hover_data=["species"])
if color_on:
fig = px.scatter(df, x="sepal_width", y="sepal_length", color = "species", color_discrete_map = color_dict)
if size_on:
fig = go.Figure(data=go.Scatter(
x=df["sepal_width"],
y=df["sepal_length"],
mode = 'markers',
marker=dict(size=sizemap)
))
# return both color and szie
#if color_on & size_on:
return fig
if __name__ == "__main__":
app.run_server(debug=True)
</code>
<code>import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
import plotly.graph_objs as go
df = px.data.iris()
color_dict = {'versicolor': 'brown', 'setosa': 'orange', 'virginica': 'pink'}
size_dict = {'versicolor': 4, 'setosa': 6, 'virginica': 10}
sizemap = df["species"].map(size_dict)
df = df.sort_values(by = 'species', ascending= False).reset_index(drop = True)
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.P("Toggle for the Color"),
dcc.Checklist(
id="color_toggle",
options=[{"label": "", "value": True}],
value=[],
inline=True
),
html.P("Toggle for the Size"),
dcc.Checklist(
id="size_toggle",
options=[{"label": "", "value": True}],
value=[],
inline=True
),
html.Div(
dcc.Graph(id="chart"),
),
]
)
@app.callback(
Output("chart", "figure"),
[Input("color_toggle", "value"),
Input("size_toggle", "value")]
)
def update_output(color_on, size_on):
fig = px.scatter(df, x="sepal_width", y="sepal_length", hover_data=["species"])
if color_on:
fig = px.scatter(df, x="sepal_width", y="sepal_length", color = "species", color_discrete_map = color_dict)
if size_on:
fig = go.Figure(data=go.Scatter(
x=df["sepal_width"],
y=df["sepal_length"],
mode = 'markers',
marker=dict(size=sizemap)
))
# return both color and szie
#if color_on & size_on:
return fig
if __name__ == "__main__":
app.run_server(debug=True)
</code>
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
import plotly.graph_objs as go
df = px.data.iris()
color_dict = {'versicolor': 'brown', 'setosa': 'orange', 'virginica': 'pink'}
size_dict = {'versicolor': 4, 'setosa': 6, 'virginica': 10}
sizemap = df["species"].map(size_dict)
df = df.sort_values(by = 'species', ascending= False).reset_index(drop = True)
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.P("Toggle for the Color"),
dcc.Checklist(
id="color_toggle",
options=[{"label": "", "value": True}],
value=[],
inline=True
),
html.P("Toggle for the Size"),
dcc.Checklist(
id="size_toggle",
options=[{"label": "", "value": True}],
value=[],
inline=True
),
html.Div(
dcc.Graph(id="chart"),
),
]
)
@app.callback(
Output("chart", "figure"),
[Input("color_toggle", "value"),
Input("size_toggle", "value")]
)
def update_output(color_on, size_on):
fig = px.scatter(df, x="sepal_width", y="sepal_length", hover_data=["species"])
if color_on:
fig = px.scatter(df, x="sepal_width", y="sepal_length", color = "species", color_discrete_map = color_dict)
if size_on:
fig = go.Figure(data=go.Scatter(
x=df["sepal_width"],
y=df["sepal_length"],
mode = 'markers',
marker=dict(size=sizemap)
))
# return both color and szie
#if color_on & size_on:
return fig
if __name__ == "__main__":
app.run_server(debug=True)