Quick intro to Dash Plotly: 5 min read

Why Dash Plotly?

A few months ago I joined a new project with a terrific tech stack and people. But the choice of Dash Plotly for the actual app in our domain surprised me a bit: “Why on Earth do we need a new full-stack framework when there is already widely used frameworks like NextJs or NuxtJs?”- I was repeating myself. Not going much into the details, after a while I realized that Dash Plotly indeed was the best choice for our specific needs.

Quick Demo

Let me walk you through a quick setup of Dash Application. You will be able to learn about the basic components provided in Dash and the usage of CSS and JavaScript code within this framework.

1. Setup

Dash team provides one of the best tech documentation I have ever seen. It is very detailed and clear. Covers almost everything you need. Please follow their installation guide and then put this code into action. Once you run this python script, it will launch your first Dash App locally.

from dash import Dash, html
import plotly.express as px
import pandas as pd

app = Dash(__name__)

app.layout = html.Div(children=[
html.H1(children='Global Fruits Market'),
html.Div(children='''
Comparing fruits production in different markets.
'''),
])
if __name__ == '__main__':
app.run_server(debug=True)
df = pd.DataFrame({
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''Dash: A web application framework for your data'''),
dcc.Graph(
id='example-graph',
figure=fig
)
])

2. Styling

Similar to ReactJs, Dash allows you add inline styling to html elements.

dash-app
|--assets
| '--app.css
|
'--app.py

3. Interactive Dash: Callbacks & JavaScript

Dash includes callback functions to handle property changes in components, including HTML elements. Below is the code snippet for the input element with id “input_example” where inserted characters are reflected in the div element with id “output_for_input”.

app.layout = html.Div(children=[
dcc.Input(
id="input_example",
type='text',
placeholder="Put some text here",
),
html.Div(id="output_for_input")])
@app.callback(
Output("output_for_input", "children"),
[Input("input_example", "value")],
)
def normal_callback(val):
return val
app.clientside_callback(
"""
function(val) {
return val;
}
""",
Output("output_for_input", "children"),
Input("input_example", "value"),
)
window.dash_clientside = Object.assign({}, window.dash_clientside, {
clientside: {
input_change_function: function(val) {
return val;
}
}
});
app.clientside_callback(
ClientsideFunction(
namespace='clientside',
function_name='input_change_function'
),
Output('output_for_input', 'children'),
Input('input_example', 'value'),
)

Looking forward

As businesses evolve and time always remains the most valuable currency, we are going to see more domain specific frameworks like Dash, that will solve a few vital use cases or business requirements and save time for developers to focus on more important issues like security and infrastructure, or quickly move on to another project.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store