Unwanted margins in Dash Choropleth

Dash Python
1

Hey everyone,

I was planning to develop a Dash application with using a Turkey choropleth map. But there is a margin on both sides of the choropleth. I tried to adjust parameters and some “css hack” but doesn’t work. It will be OK to remove the legend.

My main goal is placing the map in a card. Just like this:

ss_map_example
ss_map_example729×353 48.5 KB 

import pandas as pd
import requests
import plotly.express as px

# Read dataset and preprocess
df = pd.read_csv("https://gist.githubusercontent.com/Akaame/e9aaf3b17f54fba72a1a27a2a555fa82/raw/a93a367722671dbae93d7e06c44e975b6a637015/tr.csv")
df = df[['il', 'nufus']]

repo_url = 'https://raw.githubusercontent.com/alpers/Turkey-Maps-GeoJSON/master/tr-cities.json'
turkey_regions_geo = requests.get(repo_url).json()

fig = px.choropleth(data_frame=df, 
                    geojson=turkey_regions_geo, 
                    locations='il',
                    featureidkey='properties.name',
                    color='nufus',
                    color_continuous_scale="Reds",
                    scope="europe",
                   )

fig.update_geos(showcountries=False, showcoastlines=False, showland=False, fitbounds="locations",
               projection_rotation=dict(lon=36, lat=0, roll=0))

fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.show()

You can check this colab notebook: Google Colab

2

@cepel

You can plot something similar, but without rounded corners for your card,
updating layout as follows:

a= 50
fig.update_layout(height=800, coloraxis_showscale=False, paper_bgcolor='rgb(240,240, 240)', 
                  margin=dict(t=200, r=a,  l=a))

and updating geos:


fig.update_geos(showcountries=False, showcoastlines=False, showland=False, fitbounds="locations",
               projection_rotation=dict(lon=36, lat=0, roll=0), lataxis_range=[latmin, latmax))

latmin, and latmax are some values for latitude that reduce the upper and lower white region around your colormap.

1 Like
3

Thank you for answer @empet

This line of code coloraxis_showscale=False made more clear the view. But now, the map stuck in a little rectangle. I’ve updated the Colab notebook, and here is the screenshot:

ss_map_2
ss_map_2903×423 14.6 KB

4

@cepel In my usual Jupyter Notebook it looked ok.
Change the height by trial and error, until it looks as you want. Eventualy set also the layout width.

1 Like
5

That worked! Thank you so much @empet

After adding geo={"projection": {"type": "natural earth"}} in layout configuration, the margins disappeared. By the way, it will be better to add “bottom” in margin configuration.

ss4
ss41366×768 72.5 KB