dcc_current_syntax.py

# DROPDOWN EXAMPLE - bar-charts

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

df = px.data.tips()
days = df.day.unique()

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(
        id="dropdown",
        options=[{"label": x, "value": x} for x in days],
        value=days[0],
        clearable=False,
    ),
    dcc.Graph(id="bar-chart"),
])

@app.callback(
    Output("bar-chart", "figure"), 
    [Input("dropdown", "value")])
def update_bar_chart(day):
    mask = df["day"] == day
    fig = px.bar(df[mask], x="sex", y="total_bill", 
                 color="smoker", barmode="group")
    return fig

app.run_server(debug=True)

# SLIDER EXAMPLE - line-and-scatter

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

df = px.data.iris()

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id="scatter-plot"),
    html.P("Petal Width:"),
    dcc.RangeSlider(
        id='range-slider',
        min=0, max=2.5, step=0.1,
        marks={0: '0', 2.5: '2.5'},
        value=[0.5, 2]
    ),
])

@app.callback(
    Output("scatter-plot", "figure"), 
    [Input("range-slider", "value")])
def update_bar_chart(slider_range):
    low, high = slider_range
    mask = (df['petal_width'] > low) & (df['petal_width'] < high)
    fig = px.scatter(
        df[mask], x="sepal_width", y="sepal_length", 
        color="species", size='petal_length', 
        hover_data=['petal_width'])
    return fig

app.run_server(debug=True)

# CHECKLIST EXAMPLE - line-charts

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

df = px.data.gapminder()
all_continents = df.continent.unique()

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Checklist(
        id="checklist",
        options=[{"label": x, "value": x} 
                 for x in all_continents],
        value=all_continents[3:],
        labelStyle={'display': 'inline-block'}
    ),
    dcc.Graph(id="line-chart"),
])

@app.callback(
    Output("line-chart", "figure"), 
    [Input("checklist", "value")])
def update_line_chart(continents):
    mask = df.continent.isin(continents)
    fig = px.line(df[mask], 
        x="year", y="lifeExp", color='country')
    return fig

app.run_server(debug=True)

# BUTTON EXAMPLE - axes

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

df = px.data.tips()

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id="graph"),
    html.Button("Rotate", id='button', n_clicks=0)
])

@app.callback(
    Output("graph", "figure"), 
    [Input("button", "n_clicks")])
def rotate_figure(n_clicks):
    fig = px.histogram(df, x="sex", height=500)
    fig.update_xaxes(tickangle=n_clicks*45)
    return fig

app.run_server(debug=True)



# TABLE EXAMPLE

import dash
import dash_table as dt
import pandas as pd
import dash_bootstrap_components as dbc
import json
from dash.dependencies import Input, Output

df = pd.read_csv('https://git.io/Juf1t')

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Label('Click a cell in the table:'),
    dt.DataTable(
        id='tbl', data=df.to_dict('records'),
        columns=[{"name": i, "id": i} for i in df.columns],   
    ),
    dbc.Alert("Click the table", id='out'),
])

@app.callback(
    Output('out', 'children'),
    Input('tbl', 'active_cell'))
def update_graphs(active_cell):
  return json.dumps(active_cell)

app.run_server(debug=True)



# RADIO BUTTONS - legend

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

# Define the figure
df = px.data.gapminder().query("year==2007")

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id="graph"),
    html.P("Legend position"),
    dcc.RadioItems(
        id='xanchor',
        options=[{'label': 'left', 'value': 0}, 
                 {'label': 'right', 'value': 1}],
        value=0,
        labelStyle={'display': 'inline-block'}
    ),
    dcc.RadioItems(
        id='yanchor', 
        options=[{'label': 'top', 'value': 1}, 
                 {'label': 'bottom', 'value': 0}],
        value=1,
        labelStyle={'display': 'inline-block'}
    ),
])

@app.callback(
    Output("graph", "figure"), 
    [Input("xanchor", "value"), 
     Input("yanchor", "value")])
def modify_legend(pos_x, pos_y):
    fig = px.scatter(
        df, x="gdpPercap", y="lifeExp", 
        color="continent", size="pop", 
        size_max=45, log_x=True)
    fig.update_layout(legend_x=pos_x, legend_y=pos_y)

    return fig

app.run_server(debug=True)