Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Choropleth map is rendered on another web page, not on my intended dash app

Mapbox Choropleth map opens on another browser tab (http://127.0.0.1:52930/) which can also change, instead of http://127.0.0.1:8050/ the intended dash app address for my local deployment. Launching my application.py file automatically opens a web page but won’t display anything for a long time. Another browser tab is opened to display the choropleth map not until I enter the actual address for the local deployment. The choropleth map displays as intended but my actual dash app is unresponsive

import plotly.graph_objects as go

import plotly.express as px

from plotly.subplots import make_subplots

import dash_core_components as dcc

import dash_html_components as html

from dash.dependencies import Input, Output

import dash

import pandas as pd

app = dash.Dash(name, title = ‘Lagos Housing’)

df = pd.read_csv(‘model_app_data.csv’)

med_price = pd.DataFrame(df.groupby(‘location’)[‘price’].median())

med_price.reset_index(inplace = True)

import json

with open(‘lagos_Cities.geojson’, ‘r’) as f:

file = json.load(f)

def max_price(area, beds):

return df[(df['property_area'] == area) & (df['bed'] == beds)]['price'].max()

def median_price(area, beds):

return df[(df['property_area'] == area) & (df['bed'] == beds)]['price'].median()

def min_price(area, beds):

return df[(df['property_area'] == area) & (df['bed'] == beds)]['price'].min()

def min_location_price(location, beds):

return df[(df['location'] == location) & (df['bed'] == beds)]['price'].min()

def med_location_price(location, beds):

return df[(df['location'] == location) & (df['bed'] == beds)]['price'].median()

def max_location_price(location, beds):

return df[(df['location'] == location) & (df['bed'] == beds)]['price'].max()

def choropleth_map():

fig = px.choropleth_mapbox(med_price, geojson=file, locations='location', color='price',

                       color_continuous_scale="Viridis",

                       range_color=(500000, 3500000),

                       mapbox_style="carto-positron", zoom=10, center = {"lat": 6.561678835878642, "lon": 3.323086126993425},

                       opacity=0.5, labels = {'Price': 'Location_Median_Price'}

                      )

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

fig.show()

app.layout = html.Main([

            html.Div([

                html.H3(

                    'CHARTS',

                    className = 'chart-title'

                ),

                html.Div([

                    dcc.Graph(id = 'choropleth-map', figure = choropleth_map())

                ], className = 'graph-container')

            ], id = 'main-bar'),

            html.Div([

                html.H3(

                    'LAGOS STATE HOUSE PRICE ESTIMATE',

                    className = 'project-title'

                ),

                html.Form([

                    html.Div([

                        html.Label(

                            'Property Location',

                            className = 'location'

                        ),

                        dcc.Dropdown(

                            id = 'Locations',

                            options = [

                                {'label':'Gbagada', 'value':'gbagada'},

                                {'label':'Ajah', 'value':'ajah'},

                                {'label':'Yaba', 'value':'yaba'},

                                {'label':'Surulere', 'value':'surulere'},

                                {'label':'Ikeja', 'value':'ikeja'},

                                {'label':'Ikorodu', 'value':'ikorodu'},

                                {'label':'Lekki-Phase-1', 'value':'lekki'}

                            ],

                            value = 'Ajah'

                        )

                    ], className = 'form-group'),

                    html.Div([

                        html.Label(

                            'Property Specific Area',

                            className = 'area'

                        ),

                        dcc.Input(

                            id = 'my area',

                            type = 'text',

                            value = 'abijo',

                            placeholder = 'Abijo'

                        )

                    ], className = 'form-group'),

                    html.Div([

                        html.Label(

                            'Bedrooms',

                            className = 'beds'

                        ),

                        dcc.Dropdown(

                        id = 'bedrooms',

                        options = [

                            {'label':'1', 'value':1},

                            {'label': '2', 'value':2},

                            {'label': '3', 'value':3},

                            {'label': '4', 'value':4}

                        ],

                        value = 1

                        )

                    ], className = 'form-group')

                ], className = 'my-form'),

                html.Div([

                    html.Div([

                        html.H3(

                            children = '2000000',

                            id = 'minimum-price'

                        ),

                        html.P(

                            children = 'Minimum Price in Ajah',

                            id = 'minimum-description'

                        )

                    ], className = 'location-tab'),

                    html.Div([

                        html.H3(

                            children = '2000000',

                            id = 'median-price'

                        ),

                        html.P(

                            children = 'Median Price in Ajah',

                            id = 'median-description'

                        )

                    ], className = 'location-tab'),

                    html.Div([

                        html.H3(

                            children = '2000000',

                            id = 'maximum-price'

                        ),

                        html.P(

                            children = 'Maximum Price in Ajah',

                            id = 'maximum-description'

                        )

                    ], className = 'location-tab')

                ], className = 'location-summary'),

                html.Div([

                    html.Div([

                        html.H3(

                            children = '2000000',

                            id = 'min-price'

                        ),

                        html.P(

                            children = 'Minimum Price in Abijo',

                            id = 'min-description'

                        )

                    ], className = 'location-tab'),

                    html.Div([

                        html.H3(

                            children = '2000000',

                            id = 'med-price'

                        ),

                        html.P(

                            children = 'Median Price in Abijo',

                            id = 'med-description'

                        )

                    ], className = 'location-tab'),

                    html.Div([

                        html.H3(

                            children = '2000000',

                            id = 'max-price'

                        ),

                        html.P(

                            children = 'Maximum Price in Abijo',

                            id = 'max-description'

                        )

                    ], className = 'location-tab')

                ], className = 'location-summary')

            ], id = 'side-bar')

], id = ‘body’)

@app.callback(

Output(component_id = 'minimum-price', component_property = 'children'),

Output(component_id = 'median-price', component_property = 'children'),

Output(component_id = 'maximum-price', component_property = 'children'),

Output(component_id = 'min-price', component_property = 'children'),

Output(component_id = 'med-price', component_property = 'children'),

Output(component_id = 'max-price', component_property = 'children'),

Output(component_id = 'minimum-description', component_property = 'children'),

Output(component_id = 'median-description', component_property = 'children'),

Output(component_id = 'maximum-description', component_property = 'children'),

Output(component_id = 'min-description', component_property = 'children'),

Output(component_id = 'med-description', component_property = 'children'),

Output(component_id = 'max-description', component_property = 'children'),

Output(component_id = 'choropleth-map', component_property = 'figure'),

Input(component_id = 'Locations', component_property = 'value'),

Input(component_id = 'my area', component_property = 'value'),

Input(component_id = 'bedrooms', component_property = 'value')

)

def update_output_div(location, area, beds):

location = location.lower()

return min_location_price(location, beds), med_location_price(location, beds), max_location_price(location, beds), min_price(area, beds), median_price(area, beds), max_price(area, beds), 'Minimum price in {}'.format(location), 'Median price in {}'.format(location), 'Maximum price in {}'.format(location), 'Minimum price in {}'.format(area), 'Median price in {}'.format(area), 'Maximum price in {}'.format(area), choropleth_map()

if name == ‘main’:

app.run_server(debug=True)![newplot (1)|690x322](upload://723mjts0olCMLMCNVT7OJCHXasX.jpeg)
1 Like

Hi @Sarbol could you solve the issue? I am currently facing a very similar problem

Hi @davi , Hi @Sarbol ,
when you want to display figures inside Dash (dcc.Graph), you can’t use fig.show(). Just remove that from the code and write return fig after fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0}) .

Let me know if that works.

1 Like

@adamschroeder Great, thank you, will give it a try!

@adamschroeder it works smoothly, thank you!