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