Interactive Choropleth Worldmap showing Followers Distribution

Let's import all necessary libraries!

import pandas as pd
import plotly.graph_objs as go
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html

Reading and loading data.

df = pd.read_csv('countries-of-followers-general.csv')
df

	country	iso_num	value_blare	value_agency	value_models	value_kids
0	Spain	ESP	10.40	24.27	33.85	33.85
1	Saudi Arabia	SAU	5.41	0.00	0.63	0.63
2	China	CHN	3.71	0.70	0.00	0.00
3	United States of America	USA	3.44	2.33	1.80	1.80
4	Japan	JPN	3.12	0.64	0.00	0.00
...	...	...	...	...	...	...
200	Solomon Islands	SLB	0.00	0.00	0.00	0.00
201	Madagascar	MDG	0.00	0.00	0.00	0.00
202	Iceland	ISL	0.00	0.00	0.68	0.68
203	Kyrgyzstan	KGZ	0.00	0.00	0.05	0.05
204	Nepal	NPL	0.00	0.00	0.00	0.00

205 rows × 6 columns

Code for deploying Dash App as an Interactive Map

df=pd.read_csv('countries-of-followers-general.csv')
df = df.rename(columns=dict(value_agency='Salvadoragency',
                            value_models='Salvadormodels',
                            value_kids='Salvadorkids',
                            value_blare= 'Blare'))
cols_dd = ['Salvadoragency', 'Salvadormodels', 'Salvadorkids', 'Blare']


external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(external_stylesheets=external_stylesheets)

app.layout = html.Div(style={'backgroundColor': 'rgb(50, 48, 49)', "height": "100vh"}, children=[
    html.H1(
        children='Salvador Agency IG followers map',
        style={
            'textAlign': 'center',
            'color': 'white'
        }
    ),
    
    dcc.Dropdown(
        id='demo-dropdown',
        options=[{'label': k, 'value': k} for k in cols_dd],
        value=cols_dd[0],
        placeholder = 'Selecciona una cuenta',
        style={'backgroundColor': 'rgb(50, 48, 49)',
            'color': 'black'}
        
       
    ),

    html.Hr(),
    dcc.Graph(id='display-selected-values')
    
])



@app.callback(
    dash.dependencies.Output('display-selected-values', 'figure'),
    [dash.dependencies.Input('demo-dropdown', 'value')])
def update_output(value):
    fig = go.Figure()
    fig.add_trace(go.Choropleth(
       locations=df['iso_num'], # Spatial coordinates
        z=df[value].astype(float), # Data to be color-coded
        colorbar_title=value,
        colorscale='Inferno'
    ))
    fig.update_layout(geo=dict(bgcolor= '#000000', lakecolor='#000000'), paper_bgcolor='rgb(50, 48, 49)', plot_bgcolor='rgb(50, 48, 49)')
    fig.update_layout(margin={'r':0, 't':50, 'l':0, 'b':0, 'pad':0})
    #fig.update_layout(title=f"<b>{value}</b>", title_x=0.5, font=dict(size=18, color='white'))
    return fig

if __name__ == '__main__':
    app.run_server()

Dash is running on http://127.0.0.1:8050/

 * Serving Flask app "__main__" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off

 * Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)
127.0.0.1 - - [20/Apr/2022 13:50:58] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2022 13:51:00] "GET /_dash-layout HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2022 13:51:00] "GET /_dash-dependencies HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2022 13:51:00] "POST /_dash-update-component HTTP/1.1" 200 -