Issue with my Dash App - Unable to load on the server

Issue with my Dash App - Unable to load on the server

this the picture link

stated below is the error message from vscode

  • rning:

When grouping with a length-1 list-like, you will need to pass a length-1 tuple to get_group in a future version of pandas. Pass (name,) instead of name to silence this warning.

please help

Could you please add more information? Right now it’s impossible to help you, unfortunately.

this is the run down of the code

import dash
from dash import dcc, html
from dash.dependencies import Output, Input, State
import dash_bootstrap_components as dbc
import plotly.express as px
import plotly.graph_objects as go
import dash_daq as daq
import pandas as pd

# Importing and cleaning of dataset
# ********************************************************************************

# Replace 'YOUR_FILE_ID' with the actual file ID
url_csv = 'https://raw.githubusercontent.com/SmartDvi/Dash_App/main/loan_themes_by_region.csv'

# Read the CSV file directly from the Google Drive link
df = pd.read_csv(url_csv)
#df = pd.read_csv("C:\\Users\\Moritus Peters\\Documents\\kiva dataset\\loan_themes_by_region.csv")


# contains the data from your CSV file
#print(df)

df['mpi_region'] = df['mpi_region'].str.split(',').str[0].apply(lambda x: (x,) if pd.notna(x) else None)


app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY],
                meta_tags=[{'name': 'viewport',
                            'content': 'width=device-width, initial-scale=1.0'}]
                )

# Navbar
navbar = dbc.NavbarSimple(
    children=[
        html.Div([
            html.H1('Kiva Loan Distribution', className='text-center text-primary mb-4 me-1'),
            html.P("Kiva facilitates financial inclusion globally by crowdfunding loans, improving financial services, and overcoming barriers, enabling individuals to access education, start businesses, invest in farming, and afford emergency care."),
            dbc.NavItem(dbc.NavLink('Home', href='https://www.kiva.org/', className='text-light ml-auto'), className='ml-auto', ),
            dbc.NavItem(dbc.NavLink('Make a difference today', href='https://www.kiva.org/lend-by-category', className='text-light ml-auto'),className='ml-auto', ),
        ]),
    ],
    brand_href="https://www.kiva.org/impact",
    color='dark',
    dark=True,
   
)

# Cards
sector_card = dbc.Card(
    dbc.CardBody([
        html.H5('Sector',className='text-primary me-1 mt-9 px-3'),
        dcc.Dropdown(
            id='sector_dropdown',
            multi=False,
            options=[{'label': x, 'value': x} for x in sorted(df['sector'].unique())],
            style={'color': 'black'}
        )
    ], className='me-1 mpwdt-5 px-3')
)

indicator_card = dbc.Card(
    dbc.CardBody([
        html.H5('Loan Amount Indicator', className='text-primary me-1 mt-9 px-3'),
        dcc.Graph(
            id='indicator',
            figure=go.Figure(go.Indicator(
                mode="gauge+number+delta",
                value=df[df['sector'] == df['sector'].iloc[0]]['amount'].sum(),
                domain={'x': [0, 1], 'y': [0, 1]},
                title={'text': "Loan Amount", 'font': {'size': 24}},
                delta={'reference': df['amount'].mean() , "valueformat": ".0f", "prefix": "$", "suffix": "m"},
                gauge={
                    'axis': {'range': [0, df['amount'].sum()]},
                    'bar': {'color': "darkblue"},
                    'bgcolor': "white",
                    'borderwidth': 2,
                    'bordercolor': "gray",
                    'steps': [
                        {'range': [0, df['amount'].sum() * 0.25], 'color': 'cyan'},
                        {'range': [df['amount'].sum() * 0.25, df['amount'].sum() * 0.75], 'color': 'royalblue'},
                        {'range': [df['amount'].sum() * 0.75, df['amount'].sum()], 'color': 'red'}],
                    'threshold': {
                        'line': {'color': "red", 'width': 4},
                        'thickness': 0.75,
                        'value': df['amount'].sum() * 0.75}
                }
            )),
            config={'displayModeBar': False}  # Hide the plotly toolbar
        ),
    ])
)

loan_theme_card = dbc.Card(
    dbc.CardBody([
        html.H5('Loan Theme Type Distribution', className='text-primary me-1 mt-9 px-3'),
        dcc.Graph(id='barChart_Loan_Theme_Type_Distribution', figure={})
    ], className='me-1 mt-5 px-3')
)

mpi_analysis_card = dbc.Card(
    dbc.CardBody([
        html.H5('MPI (Multidimensional Poverty Index) Analysis:',
                className='text-primary me-1 mt-9 px-3'),
        dcc.Graph(id='scatterchart_MPI_Analysis', figure={})
    ], className='me-1 mt-5 px-3')
)

geographical_distribution_card = dbc.Card(
    dbc.CardBody([
        html.H5('Geographical Distribution of Loans', className='text-center text-primary me-1 mt-9 px-3'),
        dcc.Graph(id='map', figure={})
    ], className='me-1 mt-5 px-3')
)

# Layout
app.layout = dbc.Container([
    navbar,
    dbc.Row([
        dbc.Col(sector_card, className="mt-3 mb-3 px-3"),
        dbc.Col(indicator_card, className="mt-3 mb-1 "), #className='me-1 px-3', style={'height': '250px'}
    ]),
    dbc.Row([
        dbc.Col(loan_theme_card),
        dbc.Col(mpi_analysis_card, className="mt-3 mb-3"),
    ]),
    dbc.Row([
        dbc.Col(geographical_distribution_card)
    ])
])

# callback to update the indicator guage in regard to the various amount distribution

@app.callback(
        Output('indicator', 'figure'),
        [Input('sector_dropdown', 'value')]
) 

def update_indicator(selected_sector):
    indicator_value = df[df['sector'] == selected_sector]['amount'].sum()
    indicator_color = {
        "gradient" : True,
        "ranges": {"green": [0, df['amount'].sum()* 0.25],
                   "yellow": [df['amount'].sum()* 0.25, df['amount'].sum()* 0.75],
                   "red": [df['amount'].sum()* 0.75, df['amount'].sum()] },
    }

    indicator_figure = go.Figure(go.Indicator(
            mode="gauge+number+delta",
            value=indicator_value,
            domain={'x': [0, 1], 'y': [0, 1]},
            title={'text': "Loan Amount", 'font': {'size': 24}},
            delta={'reference': df['amount'].mean() ,"valueformat": ".0f" ,"prefix": "$", "suffix": "M"},
            gauge={
                'axis': {'range': [0, df['amount'].sum()]},
                'bar': {'color': "darkblue"},
                'bgcolor': "white",
                'borderwidth': 2,
                'bordercolor': "gray",
                'steps': [
                    {'range': [0, df['amount'].sum() * 0.25], 'color': 'cyan'},
                    {'range': [df['amount'].sum() * 0.25, df['amount'].sum() * 0.75], 'color': 'royalblue'},
                    {'range': [df['amount'].sum() * 0.75, df['amount'].sum()], 'color': 'red'}],
                'threshold': {
                    'line': {'color': "red", 'width': 4},
                    'thickness': 0.75,
                    'value': df['amount'].sum() * 0.75}
            }
        ))



# callback to update Loan Theme Type  Distribution

@app.callback(
    Output('barChart_Loan_Theme_Type_Distribution', 'figure'),
    [Input('sector_dropdown', 'value')]
)

def update_loan_theme_chart(selected_sector):
    if selected_sector is None:
        selected_sector = df['sector'].iloc[1]

    filter_df = df[df['sector'] == selected_sector]

   
    fig1 = px.bar(filter_df,
                  x='Loan Theme Type',
                  y = 'amount',
                  title=f'Loan Theme Type Distribution for {selected_sector} Sector',
                  color= 'Loan Theme Type')
                
    return fig1


# callback to update the mpi analysis scatter chart
@app.callback(
    Output('scatterchart_MPI_Analysis', 'figure'),
    [Input('sector_dropdown', 'value')]
) 

def update_mpi_chart(selected_sector):
    if selected_sector is None:
        selected_sector = df['sector'].iloc[1]

    filtered_id = df[df['sector'] == selected_sector]
    fig2 = px.scatter(
        filtered_id,
        x = 'mpi_region',
        y=  'amount',
        color = 'Loan Theme Type',
        title= f'Mpi Regions for {selected_sector} Sector'
    )
    return fig2

# callbackback to update the geographical Distribution of Loan accross countris and sectors
@app.callback(
    Output('map', 'figure'),
    [Input('sector_dropdown', 'value')]
)

def update_geographical_distribution(selected_sector):
    if selected_sector is None:
        selected_sector = df['sector'].iloc[1]

    filtered_df = df[df['sector'] == selected_sector]
    fig3 = px.scatter_mapbox(filtered_df, 
                          lat='lat', 
                          lon='lon', 
                          color='amount',
                          size='amount',
                          hover_name='Loan Theme Type',
                          hover_data=['country', 'region', 'LocationName', 'names'],
                          title=f'Geographical Distribution of Loans for {selected_sector}',
                          mapbox_style="open-street-map")
    return fig3
                


if __name__ == "__main__":
    app.run_server(debug=True, port=6080)

the figures or charts couldn’t load completely, it just displayed like this above shown in the image

the messaged indicated on vscode is

C:\Users\Moritus Peters\Dash_Apps\Dash_App\venv\Lib\site-packages\plotly\express_core.py:2065: FutureWarning:

When grouping with a length-1 list-like, you will need to pass a length-1 tuple to get_group in a future version of pandas. Pass (name,) instead of name to silence this warning.

C:\Users\Moritus Peters\Dash_Apps\Dash_App\venv\Lib\site-packages\plotly\express_core.py:2065: FutureWarning:

When grouping with a length-1 list-like, you will need to pass a length-1 tuple to get_group in a future version of pandas. Pass (name,) instead of name to silence this warning.

i don’t know if this detail is insightful to assist

Hey there, I think this line causes you trouble. Not sure what are you trying there.

From a dash perspective, there is nothing wrong with your callbacks, at least for the callback for the scatter plot.

Thanks very much @AIMPED I will try to fix it and get back to you on the feedback

i have checked and even hide the code with the use of comment,. The code was to split by delimiter comma delimiter to get a wider visualization for the scatter chart. it was working the night i used it waking-up the next morning to continue when i start notice this challenge.