Dash og dashboard
Hvis en ønsker å lage ett dashbord som et brukergrensesnitt, så kan pakken Dash være et godt alternativ. Dash er ett rammeverk hvor man selv kan bygge opp applikasjoner i form av dashbord på en enklere måte, og det bygges oppå javascript pakker som plotly.js og react.js. Det er et produkt ved siden av og helintegrert med plotly, som også er en annen pakke i Python som gir oss interaktive grafer. Dash er et godt verktøy hvis en ønsker et dashbord som brukergrensesnitt for interaktiv visualisering av data. Dash kan kodes i Python og R, men også Julia og F#.
I SSB kan man lage dashbord i virtuelle miljøer satt opp med ssb-project. For mer om håndtering av pakker i ett virtuelt miljø satt opp med ssb-project kan man se nærmere her.
Eksempel kode i DaplaLab
I DaplaLab kan du starte opp ett dashbord ved hjelp av dash pakken enten i vscode-python tjenesten, eller i en notebook i jupyter tjenesten. Det fungerer best å kjøre Dash-apper i en egen fane i nettleseren.
Her er et eksempel på hvordan man lager en Dash-app i DaplaLab i en vscode tjeneste:
- Installer
pandas
ogdash
i et ssb-project. - Opprett et python-script i prosjektet som f.eks. heter
app.py
. - Kjør scriptet ved å kjøre følgende kommando fra terminalen:
poetry run python ./app.py
- Deretter kommer det opp et dialog-vinduet hvor du velger
Open in browser
.
Her er et eksempel på script som fungerer i Vscode-python:
app.py
from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd
# Creating a sample dataset similar to the Gapminder dataset
= {
data 'country': ['Afghanistan', 'Afghanistan', 'Afghanistan', 'Brazil', 'Brazil', 'Brazil', 'China', 'China', 'China'],
'continent': ['Asia', 'Asia', 'Asia', 'South America', 'South America', 'South America', 'Asia', 'Asia', 'Asia'],
'year': [1952, 1977, 2007, 1952, 1977, 2007, 1952, 1977, 2007],
'lifeExp': [28.801, 39.877, 43.828, 50.917, 59.504, 72.390, 44.000, 63.739, 72.961],
'pop': [8425333, 12412311, 31889923, 56602560, 80461570, 190010647, 556263527, 862030000, 1318683096],
'gdpPercap': [779.4453145, 786.11336, 974.5803384, 2108.944355, 5718.766744, 9065.800825, 400.448611, 1488.041713, 4959.114854]
}
# Creating DataFrame
= pd.DataFrame(data)
df
# Creating the app
= 8050 # must be between 1024 and 9999, default is 8050
port = Dash(
app __name__,
=f'/proxy/{port}/',
requests_pathname_prefix=True
serve_locally
)
= [
app.layout ='Title of Dash App', style={'textAlign':'center'}),
html.H1(children'Canada', id='dropdown-selection'),
dcc.Dropdown(df.country.unique(), id='graph-content')
dcc.Graph(
]
@callback(
'graph-content', 'figure'),
Output('dropdown-selection', 'value')
Input(
)def update_graph(value):
= df[df.country==value]
dff return px.line(dff, x='year', y='pop')
if __name__ == '__main__':
=port, debug=True) app.run(port
For å stoppe dashbordet fra å kjøre, trykker du i terminalen ctrl
+ c
.
Her er et eksempel på hvordan man lager en Dash-app i DaplaLab i en jupyter tjeneste:
- Installer
pandas
ogdash
i et ssb-project. - Opprett en notebook i prosjektet som f.eks. heter
app.ipynb
. - Åpne notebooken og kjør kodecellene på vanlig måte.
Her er et eksempel på kode i notebook som fungerer i jupyter:
app.ipynb
# %%
# Notebook cell 1
from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd
import os
# %%
# Notebook cell 2
# Creating a sample dataset similar to the Gapminder dataset
= {
data 'country': ['Afghanistan', 'Afghanistan', 'Afghanistan', 'Brazil', 'Brazil', 'Brazil', 'China', 'China', 'China'],
'continent': ['Asia', 'Asia', 'Asia', 'South America', 'South America', 'South America', 'Asia', 'Asia', 'Asia'],
'year': [1952, 1977, 2007, 1952, 1977, 2007, 1952, 1977, 2007],
'lifeExp': [28.801, 39.877, 43.828, 50.917, 59.504, 72.390, 44.000, 63.739, 72.961],
'pop': [8425333, 12412311, 31889923, 56602560, 80461570, 190010647, 556263527, 862030000, 1318683096],
'gdpPercap': [779.4453145, 786.11336, 974.5803384, 2108.944355, 5718.766744, 9065.800825, 400.448611, 1488.041713, 4959.114854]
}
# Creating DataFrame
= pd.DataFrame(data)
df
# Creating the app
= 8050 # must be between 1024 and 9999
port = os.getenv('JUPYTERHUB_SERVICE_PREFIX', '/')
service_prefix = os.getenv('JUPYTERHUB_HTTP_REFERER', None)
domain
= Dash(
app __name__,
=f"{service_prefix}proxy/{port}/",
requests_pathname_prefix=True
serve_locally
)
= [
app.layout ='Title of Dash App', style={'textAlign':'center'}),
html.H1(children'Canada', id='dropdown-selection'),
dcc.Dropdown(df.country.unique(), id='graph-content')
dcc.Graph(
]
@callback(
'graph-content', 'figure'),
Output('dropdown-selection', 'value')
Input(
)def update_graph(value):
= df[df.country==value]
dff return px.line(dff, x='year', y='pop')
if __name__ == '__main__':
# For jupyter_mode, choose between 'external' or 'inline'.
# 'jupyterlab' should also be poosible, but doesn't seem to work...
=True, jupyter_mode="external", jupyter_server_url=domain, port=port) app.run(debug
For å stoppe dashbordet fra å kjøre, restarter du kernelen i jupyterlab: Kernel
-> Restart Kernel and Clear Outputs of All Cells...
Her er et eksempel på hvordan man lager en Dash-app i DaplaLab i en jupyter tjeneste:
- Installer
pandas
ogdash
i et ssb-project. - Opprett et python-script i prosjektet som f.eks. heter
app.py
. - Kjør scriptet ved å kjøre følgende kommando fra terminalen:
poetry run python app.py
- Deretter dukker det opp en link i terminalen etter teksten ‘Dash is running on’ som du kan trykke på for å få opp dashbordet.
Her er et eksempel på script som fungerer i jupyter:
app.py
from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd
import os
# Creating a sample dataset similar to the Gapminder dataset
= {
data 'country': ['Afghanistan', 'Afghanistan', 'Afghanistan', 'Brazil', 'Brazil', 'Brazil', 'China', 'China', 'China'],
'continent': ['Asia', 'Asia', 'Asia', 'South America', 'South America', 'South America', 'Asia', 'Asia', 'Asia'],
'year': [1952, 1977, 2007, 1952, 1977, 2007, 1952, 1977, 2007],
'lifeExp': [28.801, 39.877, 43.828, 50.917, 59.504, 72.390, 44.000, 63.739, 72.961],
'pop': [8425333, 12412311, 31889923, 56602560, 80461570, 190010647, 556263527, 862030000, 1318683096],
'gdpPercap': [779.4453145, 786.11336, 974.5803384, 2108.944355, 5718.766744, 9065.800825, 400.448611, 1488.041713, 4959.114854]
}
# Creating DataFrame
= pd.DataFrame(data)
df
# Creating the app
= 8050 # must be between 1024 and 9999, default is 8050
port = os.getenv('JUPYTERHUB_SERVICE_PREFIX', '/')
service_prefix = os.getenv('JUPYTERHUB_HTTP_REFERER', None)
domain = f"{service_prefix}proxy/{port}/"
service = f"{domain}{service[1:]}"
url = f"http://127.0.0.1:{port}{service}"
default_host
= Dash(
app __name__,
=service,
requests_pathname_prefix=True
serve_locally
)
= [
app.layout ='Title of Dash App', style={'textAlign':'center'}),
html.H1(children'Canada', id='dropdown-selection'),
dcc.Dropdown(df.country.unique(), id='graph-content')
dcc.Graph(
]
@callback(
'graph-content', 'figure'),
Output('dropdown-selection', 'value')
Input(
)def update_graph(value):
= df[df.country==value]
dff return px.line(dff, x='year', y='pop')
if __name__ == '__main__':
= default_host + "::" + url, port=port, debug=True) app.run(proxy
For å stoppe dashbordet fra å kjøre, trykker du i terminalen ctrl
+ c
.
Aktuell dokumentasjon
Diverse som er verdt å se nærmere på når en bygger dashbord applikasjon med Dash. Det følger med mange gode eksempler for bruk av diverse komponenter i dokumentasjonene under her.
- Startsiden til Dash
- Lage interaktive grafer i Python med Plotly
- Dash Core Components
- Dash HTML Components
- Dash Bootstrap Components
- Vel og merke henter denne diverse materialer fra internett, og vil ikke fungere uten tilgang. Det er heller anbefalt å ha de nødvendige filene lagret lokalt for bruk av denne pakken.
- Pakken i seg selv har en fordel i at det er lettere å bygge opp utseende(layout) i dashbordet ditt, samt andre komponenter som ikke ligger i standard dash pakken.
- Dash SSB Components
- Team Metadata lager SSB komponenter i Dash, noe Datadoc er lagd med. Dette gir deg muligheten til å bruke SSB komponentene i dine egne dashbord. Vel og merke er denne pakken fortsatt under utvikling, og ikke alle komponenter er på plass.