PyCafe - Dash - Dash Color Selector

app.py
dataset_total.csv
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
from dash import Dash, Input, Output, callback, dcc, html
import plotly.express as px
import pandas as pd
import dash_bootstrap_components as dbc

dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css"
BS = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css'
external_stylesheets=[dbc.themes.BOOTSTRAP,dbc_css,BS,dbc.icons.FONT_AWESOME,dbc.icons.BOOTSTRAP]
df = pd.read_csv('dataset_total.csv')
config_pm25 = {
    'Good':                             {'start':0.0,'end':9.0,'color':'#ACD160','detail':'Air quality is satisfactory ...'},
    'Moderate':                         {'start':9.1,'end':35.4,'color':'#F7D55F','detail':'Sensitive individuals should avoid outdoor activity ...'},
    'Unhealthy for sensitive Groups':   {'start':35.5,'end':55.4,'color':'#F39955','detail':'General public and sensitive individual ...'},
    'Unhealthy':                        {'start':55.5,'end':125.4,'color':'#ED6669','detail':'Increased likehood of adverse effects and aggravation ..'},
    'Very Unhealthy':                   {'start':125.5,'end':225.4,'color':'#A47DB7','detail':'General public will be noticeably affected ...'},
    'Hazardous':                        {'start':225.5, 'end':max_val,'color':'#9F7785','detail':'General public at high risk of experiencing strong ...'},    
}
config = {'displaylogo': False,'queueLength':0,'responsive': True,
          'modeBarButtonsToRemove': ['zoom','pan','select','zoomIn','zoomOut','autoScale','resetScale','lasso2d'],
          'toImageButtonOptions': {'format': 'png','filename': 'I-Digital','height': 500,'width': 700,'scale': 1 }}

app = Dash(__name__,external_stylesheets=external_stylesheets)

def mapMain(year=2000):
    df_coord = df[['Country','city','latitude','longitude',str(year)]]
    df_coord = df_coord.sort_values(by=[str(year)], ascending=True)
    color_discrete={}
    df_coord['type'] = df_coord[str(year)].apply(colorType)
    for i in config_pm25:
        color_discrete[i] = config_pm25[i]['color']
    fig = px.scatter_mapbox(df_coord, lat="latitude", lon="longitude", custom_data=['Country','city', str(year)],
                            color_discrete_map = color_discrete,
                            color='type', height=600, zoom=1.5)
    fig.update_layout(mapbox_style="carto-darkmatter",
                    margin= dict(l=0,r=0,b=0,t=0),
                    showlegend=True,
                    legend=dict(
                            title=str(year)+' (PM 2.5)',x=0,y=0,
                            title_font_family="Times New Roman",
                            font=dict(family="Courier",size=11,color="white" ),
                            bgcolor="rgba(211, 211, 211,0.3)",
                    ),
                    autosize=True,                  
                    )
    fig.update_traces(hovertemplate = '<b>%{customdata[0]}</b><br>%{customdata[1]}<br>%{customdata[2]}<extra></extra>',
                    marker=dict(opacity=0.9, size=20))
    return fig

title = html.Div([
    html.H4("Air quality  1850 - 2021"),
    
], className='container-fluid')

distribution = html.Div([dcc.Loading(id="ls-loading-2",color='#018E99', type="cube", style={'padding-top':'100px'},
    children=[         
        html.Div([
            html.Div([dcc.Graph(figure=mapMain(2000),config=config,clear_on_unhover=True)]),
            dbc.Modal(id="modal-xl",size="xl",is_open=False, scrollable=True,),
        ],className='row'),
    ])])

app.layout = dbc.Container(
    [
        title,
        distribution
    ],
    id="main-container",
    fluid=True,
    className="",
)
Py.Cafe

air-quality

Dash Color Selector
