95 lines
3.8 KiB
Markdown
95 lines
3.8 KiB
Markdown
For creating interactive web applications from Python scripts, `Dash` by Plotly stands out as a very useful library. Dash enables Python developers to craft interactive web-based data visualizations without requiring in-depth knowledge of web development. Built on top of Flask, Plotly.js, and React.js, Dash is ideal for building data visualization apps with highly custom user interfaces in pure Python. It's especially suited for anyone interested in data science, financial analysis, or building analytical web applications. Here's a concise reference guide for common use cases with `Dash`:
|
|
|
|
# `Dash` Reference Guide
|
|
|
|
## Installation
|
|
```
|
|
pip install dash
|
|
```
|
|
|
|
## Basic Usage
|
|
|
|
### Creating a Simple Dash App
|
|
```python
|
|
import dash
|
|
import dash_core_components as dcc
|
|
import dash_html_components as html
|
|
from dash.dependencies import Input, Output
|
|
|
|
# Initialize the app
|
|
app = dash.Dash(__name__)
|
|
|
|
# Define the app layout
|
|
app.layout = html.Div(children=[
|
|
html.H1(children='Hello Dash'),
|
|
html.Div(children='''Dash: A web application framework for Python.'''),
|
|
dcc.Graph(
|
|
id='example-graph',
|
|
figure={
|
|
'data': [
|
|
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
|
|
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
|
|
],
|
|
'layout': {
|
|
'title': 'Dash Data Visualization'
|
|
}
|
|
}
|
|
)
|
|
])
|
|
|
|
# Run the app
|
|
if __name__ == '__main__':
|
|
app.run_server(debug=True)
|
|
```
|
|
|
|
## Adding Callbacks for Interactivity
|
|
Callbacks in Dash allow you to make the application interactive. You define callbacks that watch for changes in the UI, process the input data, and update the UI accordingly.
|
|
|
|
```python
|
|
@app.callback(
|
|
Output('output-component', 'property-to-update'),
|
|
[Input('input-component', 'property-to-watch')]
|
|
)
|
|
def update_output(input_value):
|
|
return 'You have entered "{}"'.format(input_value)
|
|
```
|
|
|
|
## Advanced Usage
|
|
|
|
### Using Dash Components
|
|
Dash offers a variety of components in `dash_core_components` and `dash_html_components` modules, including sliders, dropdowns, graphs, and more, to build the layout of your application.
|
|
|
|
### Deploying Dash Apps
|
|
Dash apps can be deployed on servers with WSGI HTTP servers. Heroku, AWS Elastic Beanstalk, and Google Cloud can host Dash apps. The Dash Deployment Server is an enterprise solution that provides an easy way to deploy, scale, and manage Dash apps.
|
|
|
|
### Styling Dash Apps
|
|
You can style your Dash app using CSS. Place a `.css` file in an `assets` folder in your Dash app directory, and Dash will automatically apply this CSS to your app.
|
|
|
|
### Advanced Callbacks
|
|
Dash supports more complex scenarios with its callback system, such as multiple inputs/outputs, chained callbacks, and callback context for determining which input triggered the callback.
|
|
|
|
## Example: Interactive Dash App with Callback
|
|
```python
|
|
# Add a dropdown and an output div
|
|
app.layout = html.Div([
|
|
dcc.Dropdown(
|
|
id='my-dropdown',
|
|
options=[
|
|
{'label': 'Option 1', 'value': 'OPT1'},
|
|
{'label': 'Option 2', 'value': 'OPT2'},
|
|
{'label': 'Option 3', 'value': 'OPT3'}
|
|
],
|
|
value='OPT1'
|
|
),
|
|
html.Div(id='output-container')
|
|
])
|
|
|
|
@app.callback(
|
|
Output('output-container', 'children'),
|
|
[Input('my-dropdown', 'value')]
|
|
)
|
|
def update_output(value):
|
|
return 'You have selected "{}"'.format(value)
|
|
```
|
|
|
|
`Dash` is a powerful tool for building interactive web applications in Python without requiring significant web development skills. This guide covers the basics of creating a Dash app, making it interactive with callbacks, and touches on more advanced features and deployment options. Dash's flexibility and ease of use make it a popular choice for data scientists and analysts looking to share their insights through interactive visual dashboards and applications. |