PyCafe - Dash - Interactive Plotly Express Color Scale Selection

assets/
pages/
app.py
chart_functions.py
helper.py
requirements.txt
sidebar.py
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
# See [The dash examples index](https://dash-example-index.herokuapp.com/) for more examples.
import dash
from dash import Dash, dcc, html, Input, Output, State , get_relative_path
import dash_bootstrap_components as dbc
import pandas as pd
from chart_functions import * 
from sidebar import * 


# Create app object=================================================================
app = Dash(__name__,
           use_pages=True, suppress_callback_exceptions=True,
           external_stylesheets=[dbc.themes.CERULEAN, 
                                 dbc.icons.BOOTSTRAP, 
                                 dbc.icons.FONT_AWESOME,
                                 "/assets/styles.css"])
#===================================================================================


# Create components================================================================

# Create the sidebar
sidebar = dbc.Card([
        html.Div([
            html.S(menu_popover, className="d-flex justify-content-center align-items-center my-1"),
            html.H5("Color Scales", className="font-weight-bold mb-1"),
            ]),
        html.Hr(),    
        dbc.Nav([                
                dbc.NavLink("Cyclical", href=get_relative_path("/"), active="exact"),
                dbc.NavLink("Diverging", href=get_relative_path("/diverging"), active="exact"),
                dbc.NavLink("Qualitative", href=get_relative_path("/qualitative"), active="exact"),
                dbc.NavLink("Sequential", href=get_relative_path("/sequential"), active="exact"),
                html.Br(),
                html.Br(),                 
                html.H5("Bonus", className="font-weight-bold mb-1"),
                html.Hr(),
                dbc.NavLink("Contour Plot", href=get_relative_path("/contour"), active="exact"),
                dbc.NavLink("Templates", href=get_relative_path("/templates"), active="exact"),
            ],
            vertical=True, 
        ),       
    ],
    style=SIDEBAR_STYLE, body=True
)





# Create menu button for opening and closing the sidebar
btn_menu = dbc.Button([
                html.I(className='fas fa-angle-left'),     # Left arrow icon 
                html.I(className='fas fa-bars mx-1'),           # Menu icon               
                html.I(className='fas fa-angle-right')],   # Right arrow icon ,
                id="sidebar-button",
                color="primary", 
                style={"marginTop": "10px"})

# Create link to Github  Repository                     
link_btn = html.A(href='https://github.com/natatsypora/colorscale_selection/tree/main', 
                  children=[ html.I(className="fab fa-github fa-2x"), ], 
                  target='_blank', style={'textDecoration': 'none', 'color': '#2A93CF', 'alignItems': 'center'} )
                  
# Get image from Github
file_path = 'https://raw.githubusercontent.com/natatsypora/colorscale_selection/refs/heads/main/assets/header_img.png'

# Create card with image for header
header_card = dbc.Card([
        dbc.CardImg(src=file_path, top=True, style={"opacity": 0.9, 'height':'80px'}),
        dbc.CardImgOverlay(
            dbc.CardBody(
                dbc.Row([
                    dbc.Col(btn_menu, width=1, className='align-content-center'),
                    dbc.Col(html.H1("Interactive Plotly Express Color Scale Selection",
                                 className="text-center text-white align-items-center"),
                        width=10),
                    dbc.Col(link_btn, width=1, className='align-content-center'),      
                    ]),                        
            )),
], class_name='mb-3') 


# Create app layout=================================================================
app.layout = dbc.Container([      
    dbc.Row(dbc.Collapse(sidebar, id="sidebar", is_open=True) ),                 
    dbc.Row(dbc.Col(header_card , className='px-4')),     
    dash.page_container])
#====================================================================================


# Callback for opening and closing the sidebar---------------------------------------
@app.callback(
    Output("sidebar", "is_open"),
    [Input("sidebar-button", "n_clicks")],
    [State("sidebar", "is_open")]
)
def toggle_sidebar(n, is_open):
    if n:
        return not is_open
    return is_open


if __name__ == "__main__":
    app.run_server(debug=False, port=8000)
Py.Cafe

plotly-colorscale-selection

Interactive Plotly Express Color Scale Selection
