Сюжет: как организовать выпадающее меню?

У меня есть раскрывающееся меню в plotly для отображения всех графиков для каждого штата в стране. Еще у меня есть график, на котором показаны все США.

В моем раскрывающемся меню я хочу переместить США в верхнюю часть дисплея, а не в алфавитном порядке.

Какие-либо предложения? Действительно застрял, и реорганизация фрейма данных не работает.

state_names = summary['state'].unique()
state_names.sort()
age_groups = summary['age_group'].unique()
x = summary['ca_monthly'].unique()

data_list = []
for state in state_names:
    state_list = []
    state_data = summary[summary['state']==state]
    for age in age_groups:
        state_list.append(
            state_data[state_data['age_group']==age]['poverty_rate'])
    data_list.append(state_list)

data = pd.DataFrame(data_list, columns=age_groups)
data['State'] = state_names
data = data.set_index('State')

fig = go.Figure()

legend_names = {'child': 'Child poverty',
                'adult': 'Adult poverty',
                'all': 'Overall poverty'}
default = state_names[0]
for age in age_groups:
    fig.add_trace(go.Scatter(
        x=x, 
        y=data[age][default],
        name=legend_names[age]
    ))

buttons = []
title = 'Poverty impact of a child allowance in '
for state in state_names:
    new_button = {'method': 'update',
                  'label': state,
                  'args': [{'y': data.loc[state]},
                           {'title.text': title + state}]}
    buttons.append(new_button)

# construct menus
updatemenus = [{'buttons': buttons,
                'direction': 'down',
                'showactive': True,}]

# update layout with buttons, and show the figure
fig.update_layout(updatemenus=updatemenus)

fig.update_layout(
    title= title + default,
    xaxis_title='Monthly Child Allowance',
    yaxis_title='SPM poverty rate',
    yaxis_ticksuffix='%',
    font=dict(family='Roboto'),
    hovermode='x', 
    xaxis_tickprefix='$',
    xaxis_ticksuffix='',
    plot_bgcolor='white',
    legend_title_text='',
    legend=dict(yanchor='top', y=0.99, xanchor='right', x=0.99),
    xaxis=dict(tickmode='linear', dtick = 50),
    yaxis=dict(range=[0, summary.poverty_rate.max() * 1.05], dtick=2)
)

fig.update_traces(mode='markers+lines', hovertemplate=None,
                  marker=dict(size=4))

fig.show(config={'displayModeBar': False})

person Community    schedule 13.08.2020    source источник
comment
Покажите свой код для заполнения раскрывающегося меню.   -  person Ilya Berdichevsky    schedule 13.08.2020
comment
@NateGo И, пожалуйста, узнайте, как создать минимально воспроизводимый пример.   -  person vestland    schedule 14.08.2020


Ответы (1)


Ответ:

Просто добавьте кнопки в раскрывающееся меню и каждое соответствующее подмножество ваших данных на кнопку args в любом порядке, который вы предпочитаете.

Детали:

Касательно:

[...] реорганизация фрейма данных не работает.

Да, было бы. Но вы не должны. Кажется, мы говорим здесь о раскрывающихся меню. Так что просто добавляйте кнопки в любом порядке.

Как все это получится, будет полностью зависеть от вашего набора данных и того, что вы на самом деле хотите отображать. Но вы не представили ни первое, ни подробно не описали второе. Но поскольку вы используете такие функции, как state_names = summary['state'].unique(), я предполагаю, что ваш набор данных имеет длинный формат.

Я также предполагаю, что здесь вы показываете только одну трассу за раз. В противном случае этот подход не имел бы особого смысла, поскольку вы получили бы ту же функциональность с интерактивностью функциональности легенды по умолчанию plotlys.

Я буду использовать набор данных px.data.gapminder(), где запуск dfi['continent'].unique().tolist() даст ['Asia', 'Europe', 'Africa', 'Americas', 'Oceania']. Я также собираюсь добавить некоторые агрегированные данные для всего мира и определить порядок кнопок ['World', 'Africa', 'Americas', 'Asia', 'Europe', 'Oceania'.

Надеюсь, это отразит структуру ваших реальных данных. А если нет, то я настоятельно предлагаю вам потратить время на изучение как эффективно создать фрейм данных pandas и поделиться им. Набор данных также содержит наблюдения по отдельным странам. Вам просто нужно будет притвориться, что world это USA, а страны - это государства. Но я подозреваю, что это не проблема.

Следуя логике, которую я только что описал, приведенный ниже фрагмент кода создаст следующий график, в котором world определено для размещения вверху, а отдельные континенты будут следовать в алфавитном порядке.

введите описание изображения здесь

Полный код:

import plotly.graph_objects as go
import plotly.express as px
import pandas as pd

# dataframe, input
dfi = px.data.gapminder()

# dataframe, aggregated by continent
dfc = dfi.groupby( [ "continent", "year"] ).mean().reset_index()

# dataframe with calculated mean for all continents
dfw = dfc.groupby( ["year"] ).mean().reset_index()
dfw['continent']='World'
dfw = dfw.append(dfc)
dfw

# select a category (world),
# take it out of the categories,
# put it first in a list,
# and add the rest of the categories alphabetically
mainGeo = dfw['continent'].unique().tolist()
mainGeo
mainCat = 'World'
mainGeo.remove(mainCat)
mainGeo.sort()

order = [mainCat] + mainGeo
order

colors = px.colors.qualitative.Plotly

# plotly figure setup
fig=go.Figure()
fig.add_traces(go.Scatter(x=df['year'], y = df['lifeExp'], name=geo,
                          mode='lines', line=dict(color = colors[2], width = 1))
              )

# dropdown menu
updatemenu = []
buttons = []

# button with one option for each dataframe
for geo in order:
    buttons.append(dict(method='restyle',
                        label=geo,
                        visible=True,
                        args=[{'y':[dfw[dfw['continent']==geo]['lifeExp'].values],
                               'x':[dfw[dfw['continent']==geo]['year'].values],
                               'type':'scatter'}, ],
                        )
                  )

# some adjustments to the updatemenus
updatemenu = []
your_menu = dict()
updatemenu.append(your_menu)

updatemenu[0]['buttons'] = buttons
updatemenu[0]['direction'] = 'down'
updatemenu[0]['showactive'] = True

# add dropdown menus to the figure
fig.update_layout(showlegend=False, updatemenus=updatemenu)
fig.show()
person vestland    schedule 15.08.2020