101 — Dashboards with Python — Pt.1

The Objective

Learn and share knowledge.

  1. My Github
  2. For all my posts
  3. As tool, I’m using Anaconda’s JupyterLab Notebooks
  4. My LinkedIn

Why dashboard with Python?

Well, one of the challenges I faced recently is:
- Power BI can be costly when you are not a single user or when you can pay almost US$ 4.995,00 per month.

Plotly Dashboards

I was already kind of experienced with Plotly, maybe even more experienced with it than with Seaborn or MatPlotLib.

  1. https://plotly.com/python/v3/create-online-dashboard-legacy/ Python
  2. https://dash.plotly.com/reference Reference
  3. https://dash.plotly.com/dash-html-componentsHTML Components
  4. https://dash.plotly.com/dash-core-components DCC

Installing

It all begins with the installation, quiet simple:

  1. pip install jupyter-dash or conda install -c conda-forge -c plotly jupyter-dash (if you are using Jupyter) if you not, pip install dash.

Layout

The following code is given in the Layout part of the documentation:

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash(__name__)df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/5d1ea79569ed194d432e56108a04d188/raw/a9f9e8076b837d541398e999dcbac2b2826a81f8/gdp-life-exp-2007.csv')fig = px.scatter(df, x="gdp per capita", y="life expectancy",
size="population", color="continent", hover_name="country",
log_x=True, size_max=60)
app.layout = html.Div([
dcc.Graph(
id='life-exp-vs-gdp',
figure=fig
)
])
if __name__ == '__main__':
app.run_server(debug=True)
import plotly
import pandas as pd
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
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")
fig.show()
app = Dash(__name__)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
)
])
app.run()

Plotly Dashboards Structure

Figure 1 — Plotly Structure.
dash.Dash(
name=None,
server=True,
assets_folder='assets',
assets_url_path='assets',
assets_ignore='',
assets_external_path=None,
eager_loading=False,
include_assets_files=True,
url_base_pathname=None,
requests_pathname_prefix=None,
routes_pathname_prefix=None,
serve_locally=True,
compress=None,
meta_tags=None,
index_string='<!DOCTYPE html>\n<html>\n <head>\n {%metas%}\n <title>{%title%}</title>\n {%favicon%}\n {%css%}\n </head>\n <body>\n {%app_entry%}\n <footer>\n {%config%}\n {%scripts%}\n {%renderer%}\n </footer>\n </body>\n</html>',
external_scripts=None,
external_stylesheets=None,
suppress_callback_exceptions=None,
prevent_initial_callbacks=False,
show_undo_redo=False,
extra_hot_reload_paths=None,
plugins=None,
title='Dash',
update_title='Updating...',
long_callback_manager=None,
**obsolete
)

app.layout()

No mistery, that’s all.

dash.html

A layout is made of HTML tags, like div’s. Here is a example from the reference:

Figure 2 — Source: https://dash.plotly.com/dash-html-components
  1. Download: to download data
  2. Checlists: create checklists
  3. Slider: to create a slider
  4. Tab: to create tabs

Understanding the dashboard

If you executed the code and opened the local link, this tab should open.

Figure 3 — The Example Dashboard

The Pt2

In the next post we’ll focus create a dashboard in Python using dash using real data.

Thank-you!

Igor Comune.

--

--

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
Igor Comune

Igor Comune

12 Followers

An "under construction" Data Scientist with a love for numbers and analysis!