Hi @cs291, can you share us how did you setting your dash?
import dash
from dash import html
from dash import dcc
import plotly.graph_objects as go
import plotly.express as px
from dash import Dash, Output, Input, State, callback, no_update
import pandas as pd
import json
import dash_bootstrap_components as dbc
from dash import Dash, dash_table, dcc,html, Input,Output,callback
import geopandas as gpd
#read data
from pandas import DataFrame
from plotly.graph_objs import Figure
MAP_URL = 'https://raw.githubusercontent.com/datasett/maps/master/norway/data/2020/counties_2020_s_geojson.json'
gdf = gpd.read_file(MAP_URL)
gdf1=gdf.drop('oppdateringsdato',axis=1)
geojson = json.loads(gdf1.to_json())
dft=pd.read_excel('dv_0111.xlsx')
dft_sorted = dft.sort_values(by='k_n', ascending=True)
dft_sorted=dft_sorted.reset_index(drop=True)
dft_sorted.iloc[0, -1] = '0301'
df = dft_sorted.drop([18,68,79])# får ike med ' KVITSØY ', ' TRÆNA',' RØSTnoe feil med geosjon file
df=df.reset_index(drop=True)
dft01=pd.read_excel('dv_011.xlsx')
dft01_sorted = dft01.sort_values(by='k_n', ascending=True)
dft01_sorted=dft01_sorted.reset_index(drop=True)
dft01_sorted.iloc[0, 0] = '0301'
df00 = dft01_sorted.drop([18,68,79])
print(df00.head(3))
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
def fig_map (df):
custom_colorscale = [
[0.0, 'white'],
[0.0004, 'gray'],
[0.00175,'yellow'],
[0.00875,'orange'],
[1.0, 'red'] # High values
]
# Apply the color mapping to the 'tildelt_beløp' column
fig01 = px.choropleth(df, geojson=json.loads(gdf1.to_json()),
color="tildelt_beløp",
hover_name='søker_poststed',
color_continuous_scale=custom_colorscale,
locations="k_n", featureidkey="properties.kommunenummer",
#projection="orthographic"
projection="mercator"
)
#fig01.update_geos(fitbounds="geojson", visible=False)
#fig01.update_layout(margin={"r":100, "t": 0, "l": 0, "b": 0})
#fig01.update_traces(showlegend=False)
#fig01.update_layout(coloraxis_colorbar=None)
fig01.update_layout(
coloraxis_showscale=False, # Remove color scale legend
geo=dict(
fitbounds="geojson", # Fit the map to GeoJSON data
visible=False # Hide the base map
),
margin={"r": 100, "t": 0, "l": 0, "b": 0} # Adjust margins
)
return fig01
#calbacken
@callback(
Output(component_id='my-graph-container', component_property='children'),
Input(component_id='map_plot1', component_property='clickData'))
def update_graph(clickData):
if clickData:
city = clickData['points'][0]['hovertext']
print(city)
dff00 = df00[df00['søker_poststed'] == city]
print(dff00.head())
fig1 = px.histogram(dff00, x='søker_poststed',y=['drift','små_nystartede','norsk_opplæring','kommunal_tilskudd','NRM','IFO'])
return dcc.Graph(figure=fig1)
else:
no_update
df = pd.read_excel('dv_00.xlsx', sheet_name='Ark1')
df = df[['tilskuddsordning','søker_poststed','tittel','tildelt_beløp','tiltak_område']]
print(df.head())
app.layout = dbc.Container([
html.H4('IMDis tilskudd 2023'),
html.Div(
dcc.Graph(id='map_plot1', figure=fig_map(df00)
),
style={'width':'75%','display': 'inline-block'}
),
html.Div(style={'width': '25%', 'display': 'inline-block'}, id='my-graph-container'),
html.H4('something here '),
dcc.Markdown('# DataTable om tilskudd', style={'textAlign':'center'}),
dbc.Label ('Show number of rows'),
row_drop := dcc.Dropdown(value=10, clearable= False, style={'width':'35%'},
options=[10,25,50,100]),
my_table := dash_table. DataTable(
columns=[
{'name':'Tilskuddsordning','id':'tilskuddsordning','type':'text'},
{'name':'Søker_poststed','id':'søker_poststed','type':'text'},
{'name':'Tittel','id':'tittel','type':'text'},
{'name':'Tildelt_beløp','id':'tildelt_beløp','type':'numeric'},
{'name':'Tiltak_område','id':'tiltak_område','type':'text'}
],
data = df.to_dict('records'),
filter_action='native',
page_size=10,
style_data={
'width':'100px','minWidth':'130px','maxWidth':'100px','overflow':'hidden', 'textOverflow': 'ellipsis',
}
),
dbc.Row([
dbc.Col([
T_drop := dcc.Dropdown([x for x in sorted(df.tilskuddsordning.unique())],multi = True)
],width=3,style={'fontSize': '10px'}),
dbc.Col([
S_drop := dcc.Dropdown([x for x in sorted(df.søker_poststed.unique())], multi=True)
], width=2),
dbc.Col([
TT_drop := dcc.Dropdown([x for x in (df.tittel.unique())], multi=True)
], width=2),
dbc.Col([
TB_drop := dcc.Dropdown([x for x in (df.tildelt_beløp.unique())], multi=True)
], width=2),
dbc.Col([
TO_drop :=dcc.Dropdown([x for x in (df.tiltak_område.unique())],multi=True)
],width=2),
], justify="between", className='mt-3 mb-4'),
])
@callback(
Output(my_table, 'data'),
Output(my_table, 'page_size'),
Input(T_drop, 'value'),
Input(S_drop, 'value'),
Input(TT_drop, 'value'),
Input(TB_drop, 'value'),
Input(TO_drop,'value'),
Input(row_drop, 'value')
)
def update_dropdown_options(cont_v, country_v,pop_v,life_v,til_v, row_v):
dff = df.copy()
if cont_v:
dff = dff[dff.tilskuddsordning.isin(cont_v)]
if country_v:
dff = dff[dff.søker_poststed.isin(country_v)]
if pop_v:
dff = dff[dff.tittel.isin(pop_v)]
if life_v:
dff = dff[dff.tildelt_beløp.isin(life_v)]
if til_v:
dff =dff[dff.tiltak_område.isin(til_v)]
return dff.to_dict('records'), row_v
if __name__ == '__main__':
app.run_server(debug=True, use_reloader=False, port=8071)
I think maybe problem came from projection="mercator", can you try to remove it or change it to another one?
You can check it here: Layout.geo in Python
I remove it, it works.