Graph
Create from Direct Data
  • data, list of dicts
  • layout, dict
  • frames, list of dicts, points to a list of figures, each of which will be cycled through when animation is triggered
    1. import dash
    2. import dash_html_components as html
    3. import dash_core_components as dcc
    4.  
    5. app = dash.Dash(__name__)
    6.  
    7. fig = {
    8.     'data': [
    9.         {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF', 'showlegend': False}
    10.     ],
    11.     'layout': {
    12.         'title': 'Dash Data Visualization',
    13.         'xaxis': {
    14.             'title': 'time'
    15.         },
    16.         'height': 400,
    17.         'width': 800,
    18.         'paper_bgcolor': 'navy',
    19.         'plot_bgcolor': 'blue',
    20.         'margin': {
    21.             'l': 0,
    22.             'r': 0,
    23.             }
    24.     }
    25. }
    26.  
    27. app.layout = html.Div(dcc.Graph(figure=fig))
    28.  
    29. if __name__ == "__main__":
    30.     app.run_server(debug=True)
    31.
    Create with Graph Objects
    1. import dash
    2. import dash_html_components as html
    3. import dash_core_components as dcc
    4. import plotly.graph_objects as go
    5. import pandas as pd
    6.  
    7. app = dash.Dash(__name__)
    8.  
    9. df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')
    10. temp = df[df['Country Name'] == 'Canada']
    11. temp = temp[temp['Indicator Name'] == 'CO2 emissions (metric tons per capita)']
    12.  
    13. fig = go.Figure(go.Bar(x=temp['Year'], y=temp['Value']))
    14.  
    15. child =  dcc.Graph(figure=fig)
    16.  
    17. app.layout = html.Div(child)
    18.  
    19. if __name__ == "__main__":
    20.     app.run_server(debug=True)
    21. 		
    1. import dash
    2. import dash_html_components as html
    3. import dash_core_components as dcc
    4. import plotly.graph_objects as go
    5. import pandas as pd
    6.  
    7. app = dash.Dash(__name__)
    8.  
    9. df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')
    10. temp = df[df['Country Name'] == 'Canada']
    11. temp = temp[temp['Indicator Name'] == 'CO2 emissions (metric tons per capita)']
    12.  
    13. fig = go.Figure()
    14.  
    15. trace = go.Bar(x=temp['Year'], y=temp['Value'])
    16.  
    17. fig.add_trace(trace)
    18.  
    19. child =  dcc.Graph(figure=fig)
    20.  
    21. app.layout = html.Div(child)
    22.  
    23. if __name__ == "__main__":
    24.     app.run_server(debug=True)
    25.
    Create with Plotly Express
    1. import dash
    2. import dash_html_components as html
    3. import dash_core_components as dcc
    4. import plotly.graph_objects as go
    5. import plotly.express as px
    6. import pandas as pd
    7.  
    8. app = dash.Dash(__name__)
    9.  
    10. df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')
    11. temp = df[df['Country Name'] == 'Canada']
    12. temp = temp[temp['Indicator Name'] == 'CO2 emissions (metric tons per capita)']
    13.  
    14. fig = px.bar(temp, x='Year', y='Value')
    15.  
    16. child =  dcc.Graph(figure=fig)
    17.  
    18. app.layout = html.Div(child)
    19.  
    20. if __name__ == "__main__":
    21.     app.run_server(debug=True)
    22.
    Create with Pandas
    1. import dash
    2. import dash_html_components as html
    3. import dash_core_components as dcc
    4. import plotly.graph_objects as go
    5. import plotly.express as px
    6. import pandas as pd
    7.  
    8. pd.options.plotting.backend = "plotly"
    9.  
    10. app = dash.Dash(__name__)
    11.  
    12. df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')
    13. temp = df[df['Country Name'] == 'Canada']
    14. temp = temp[temp['Indicator Name'] == 'CO2 emissions (metric tons per capita)']
    15.  
    16. fig = temp.plot.bar(x='Year', y='Value')
    17.  
    18. child =  dcc.Graph(figure=fig)
    19.  
    20. app.layout = html.Div(child)
    21.  
    22. if __name__ == "__main__":
    23.     app.run_server(debug=True)
    24.
    Update Layout
    1. import dash
    2. import dash_html_components as html
    3. import dash_core_components as dcc
    4. import plotly.graph_objects as go
    5. import plotly.express as px
    6. import pandas as pd
    7.  
    8. app = dash.Dash(__name__)
    9.  
    10. df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')
    11. temp = df[df['Country Name'] == 'Canada']
    12. temp = temp[temp['Indicator Name'] == 'CO2 emissions (metric tons per capita)']
    13.  
    14. fig = px.bar(temp, x='Year', y='Value')
    15.  
    16. fig.update_layout(
    17.         width=600,
    18.         height=300,
    19.         title = {'text':'Layout', 'x':0.5, 'y':0.95},
    20.         plot_bgcolor='navy',
    21.         paper_bgcolor='LightBlue',
    22.         margin={'l': 40, 'b': 40, 't': 40, 'r': 0}, 
    23.         hovermode='closest')
    24.  
    25. child =  dcc.Graph(figure=fig)
    26.  
    27. app.layout = html.Div(child)
    28.  
    29. if __name__ == "__main__":
    30.     app.run_server(debug=True)
    31.
    Subplots
    1. import dash
    2. import dash_html_components as html
    3. import dash_core_components as dcc
    4. import plotly.graph_objects as go
    5. from plotly.subplots import make_subplots
    6. import pandas as pd
    7.  
    8. app = dash.Dash(__name__)
    9.  
    10. df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')
    11. temp = df[df['Country Name'] == 'Canada']
    12. temp = temp[temp['Indicator Name'] == 'CO2 emissions (metric tons per capita)']
    13. temp2 = df[df['Country Name'] == 'United State']
    14. temp2 = temp[temp['Indicator Name'] == 'CO2 emissions (metric tons per capita)']
    15.  
    16. fig = make_subplots(rows=1, cols=2)
    17.  
    18. trace_1 = go.Bar(x=temp['Year'], y=temp['Value'])
    19. trace_2 = go.Bar(x=temp2['Year'], y=temp2['Value'])
    20.  
    21. fig.add_trace(trace_1, row=1, col=1)
    22. fig.add_trace(trace_2, row=1, col=2)
    23.  
    24. fig.update_layout(
    25.         width=600,
    26.         height=300,
    27.         title = {'text':'Layout', 'x':0.5, 'y':0.95},
    28.         plot_bgcolor='navy',
    29.         paper_bgcolor='LightBlue',
    30.         margin={'l': 40, 'b': 40, 't': 40, 'r': 0}, 
    31.         hovermode='closest')
    32.  
    33. child =  dcc.Graph(figure=fig)
    34.  
    35. app.layout = html.Div(child)
    36.  
    37. if __name__ == "__main__":
    38.     app.run_server(debug=True)
    39.
    Multiple Plots
    1. import dash
    2. import dash_html_components as html
    3. import dash_core_components as dcc
    4. import plotly.graph_objects as go
    5. from plotly.subplots import make_subplots
    6. import pandas as pd
    7.  
    8. app = dash.Dash(__name__)
    9.  
    10. df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')
    11. temp = df[df['Country Name'] == 'Canada']
    12. temp = temp[temp['Indicator Name'] == 'CO2 emissions (metric tons per capita)']
    13. temp2 = df[df['Country Name'] == 'United State']
    14. temp2 = temp[temp['Indicator Name'] == 'CO2 emissions (metric tons per capita)']
    15.  
    16. fig = go.Figure()
    17.  
    18. trace_1 = go.Bar(x=temp['Year'], y=temp['Value'])
    19. trace_2 = go.Bar(x=temp2['Year'], y=temp2['Value'])
    20.  
    21. fig.add_trace(trace_1)
    22. fig.add_trace(trace_2)
    23.  
    24. child =  dcc.Graph(figure=fig)
    25.  
    26. app.layout = html.Div(child)
    27.  
    28. if __name__ == "__main__":
    29.     app.run_server(debug=True)
    30.
    Interactive Graph
  • hoverData, data when mouse is hovered
  • clickData, data selected by clicking
  • selectedData, data selected with box select or lasso select
  • relyoutData, click and drag on the graph to zoom or click on the zoom buttons in the graph's menu bar, or click on legend items
    1. import json
    2. import dash
    3. import dash_html_components as html
    4. import dash_core_components as dcc
    5. from dash.dependencies import Input, Output
    6. import plotly.graph_objects as go
    7. from plotly.subplots import make_subplots
    8. import pandas as pd
    9.  
    10. app = dash.Dash(__name__)
    11.  
    12. df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')
    13. temp = df[df['Country Name'] == 'Canada']
    14. temp = temp[temp['Indicator Name'] == 'CO2 emissions (metric tons per capita)']
    15.  
    16. fig = go.Figure()
    17.  
    18. trace_1 = go.Bar(x=temp['Year'], y=temp['Value'])
    19.  
    20. fig.add_trace(trace_1)
    21.  
    22. child =  dcc.Graph(figure=fig, id='graph')
    23.  
    24. app.layout = html.Div([child, html.Div(id='output')])
    25.  
    26. @app.callback(
    27.     Output('output', 'children'),
    28.     Input('graph', 'hoverData'))
    29. def display_hover_data(hoverData):
    30.     print(hoverData)
    31.     return json.dumps(hoverData, indent=2)
    32.  
    33. if __name__ == "__main__":
    34.     app.run_server(debug=True)
    35.
    Reference
  • Graph Objects
  • Express
  • Python Figure Reference
  • Fundamentals
  • Intro to Animations in Python
  • JavaScript Figure Reference