18. Dataviz Workshop: Dashboarding com Dash#

18.1. Objetivos do workshop#

Apresentar o ecossistema Dash para criação de aplicações web para exploração e visualização de dados;
Compreender o processo básico de criação de um dashboard utilizando Dash;
Desenvolver um dashboard simples para exploração de dados sobre crimes violentos letais intencionais em João Pessoa.

18.2. Ferramentas utilizadas#

Módulos Python
- dash
- dash_bootstrap_components
- plotly
- os
- pandas
- python (interpretador)

18.3. Sobre o Dash#

Dash is the original low-code framework for rapidly building data apps in Python.

Ou seja, Dash é um ecossistema que nos permite criar aplicações para exploração e visualização de dados para a web de forma rápida e totalmente em Python.
Basicamente, o Dash possui três componentes fundamentais:
- Flask: a ferramenta de backend;
- Plotly: a ferramenta que provê as bibliotecas de plotagem (em nosso caso, usamos Python);
- React: a ferramenta que fornece o arcabouço interativo e de frontend;
Uma vez que o Dash tem a vantagem de facilitar o desenvolvimento de aplicações puramente em Python, não é necessário conhecer profundamente HTML, CSS ou Javascript, por exemplo.
Figuras feitas em matplotlib podem ser convertidas para Dash com plotly.tools.mpl_to_plotly (checar)

18.3.1. Instalação#

É recomendável instalar o Dash através do pip: pip install dash.

18.3.2. Pacotes essenciais#

O Dash contém alguns pacotes essenciais dedicados a funcionalidades específicas, a saber:

Dash: pacote principal e backbone de qualquer aplicação a ser criada;
Dash Core Components: pacote de componentes interativas de manipulação (botões, dropdowns, sliders etc.);
Dash HTML Components: pacote que fornece elementos HTML como classes Python;
Dash Bootstrap Components: pacote mantido por terceiros que cuida das opções bootstrap (controle visual, opções de layout, interface etc.)

18.3.3. Processo geral de criação de apps em Dash#

Importações (boilerplate): receita básica de importação de módulos.
Instanciamento: criação do app via Dash;
Chamada de layout: formação dos contêineres e elementos básicos do frontend, principalmente via HTML.
Chamada de callbacks: uso de decoradores Python que se aplicam a funções mais genéricas que tratam da disposição das representações visuais e da interatividade.
Execução: deployment via comando Python.

18.4. Exemplos#

Os exemplos são gerados por execução dos scripts acessórios localizados no diretório dw.

Demonstração básica: python ../dw/dw1a.py
Plataforma CVLI: python ../dw/dw1b.py

18.4.1. Execução com JupyterDash#

A execução diretamente via VSCode ou Jupyter notebook pode ser feita com a ajuda do módulo JupyterDash por meio da opção app.run_server(mode='inline'). Abaixo, criamos um demo app nesses moldes.

# boilerplate imports 
import plotly.express as px
from dash import Dash #from jupyter_dash import JupyterDash
from dash import html, dcc, Output, Input
from pandas import read_csv

# carrega dados
df = read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')

# constroi app
app = Dash(__name__) #app = JupyterDash(__name__) 
app.layout = html.Div([
    html.H1(children='Crescimento populacional por país', 
            style={'color':'#117029'}),
    dcc.Dropdown(df.country.unique(), 'Brazil', id='dropdown-selection'),
    dcc.Graph(id='graph-content')
])

# callback de atualização
@app.callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    dff = df[df.country==value]
    return px.line(dff, x='year', y='pop')

# executa app e mostra resultado inline
app.run() #app.run_server(mode='inline',inline_exceptions=True,PORT=8050)

18.4.2. Modos de visualização#

Há três modos disponíveis para visualizar um app com JupyterDash:

app.run_server(mode='external'): saída para browser.
app.run_server(mode='inline'): saída para notebook.
app.run_server(mode='jupyterlab'): saída para JupyterLab.

Introdução à Visualização de Dados

Dataviz Workshop: Dashboarding com Dash

Contents