Hi everyone,
Im working on app and using the Bank Customer Complaint as a style outline.
Similar to the Bank Customer Complaints app, I want to have two dropdowns side by side at the very top for users to select the values. The problem is that the dropdown boxes are not showing (the code is 90% similar to the Bank Customer Complaint app).
Im including a screenshot of my dashboard where I highlight where the dropdown boxes should be.
app = JupyterDash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
TOP_FREQUENCY_COMPS = [
dbc.CardHeader(html.H5("Comparison of most frequently used words for two nationalities")),
dbc.CardBody(
[
dcc.Loading(
id="loading-bigrams-comps",
children=[
dbc.Alert(
"Something's gone wrong! Give us a moment, but try loading this page again if problem persists.",
id="no-data-alert-bigrams_comp",
color="warning",
style={"display": "none"},
),
dbc.Col(
dbc.Col(
[
dcc.Dropdown(
id="country_1",
options= [{'label': i, 'value': i} for i in country_list],
value="United Kingdom",
)
],
md=10
),
dbc.Col(
[
dcc.Dropdown(
id="country_2",
options=[{'label': i, 'value': i} for i in country_list],
value="United States of America",
)
],
md=10
),
dcc.Graph(
id='top_10',
figure=top_10
),
dcc.Graph(
id='top_idf',
figure=top_idf
),
dcc.Graph(
id='freq_scat',
figure=freq_scat
),
],
type="default",
)
],
style={"marginTop": 0, "marginBottom": 0},
),
]
BODY = dbc.Container(
[
dbc.Row([dbc.Col(dbc.Card(TOP_FREQUENCY_COMPS)),], style={"marginTop": 30}),
],
className="mt-12",
)
app.layout = html.Div(children=[BODY])
@app.callback(
Output("top_10", "figure"),
Output("top_idf", "figure"),
Output("freq_scat", "figure"),
Input("country_1", "value"),
Input("country_2", "value"))
def country_comparisons(country_1, country_2):
countries = [country_1, country_2]
comparison = df_explode[df_explode['Reviewer_Nationality'].isin(countries)]
national_comp = td_idf(comparison,'Reviewer_Nationality', 'pos_tokens' )
top_tf = national_comp.sort_values(['Reviewer_Nationality','tf'],ascending=False).groupby('Reviewer_Nationality').head(10)
top_tfidf = national_comp.sort_values(['Reviewer_Nationality','tf_idf'],ascending=False).groupby('Reviewer_Nationality').head(10)
top_tf= top_tf.sort_values(['Reviewer_Nationality','tf'],ascending=True)
top_tfidf = top_tfidf.sort_values(['Reviewer_Nationality','tf_idf'],ascending=True)
countries = national_comp['Reviewer_Nationality'].unique()
sub_set= national_comp[['Reviewer_Nationality', 'pos_tokens', 'tf']].copy()
sub_set_reformat = sub_set.pivot_table(index='pos_tokens',columns='Reviewer_Nationality', values='tf').reset_index()
top_10 = px.bar(top_tf, x="tf", y="pos_tokens", facet_col="Reviewer_Nationality", title="Most Frequently Used Words", facet_col_spacing=0.1, hover_data=["tf"], labels={'tf':'', 'pos_tokens': ''}).update_yaxes(matches=None, showticklabels=True, col=2)
top_idf = px.bar(top_tfidf, x="tf_idf", y="pos_tokens", facet_col="Reviewer_Nationality", title="Most Important Words", facet_col_spacing=0.1, hover_data=["tf_idf"], labels={'tf_idf':'', 'pos_tokens': ''}).update_yaxes(matches=None, showticklabels=True, col=2)
freq_scat = px.scatter(sub_set_reformat, x=countries[0], y=countries[1], trendline="ols", hover_name="pos_tokens" )
return (
top_10,
top_idf,
freq_scat
)