Introducere în cadrul de vizualizare a datelor Dash.

Dash este un cadru de lucru ca niciun altul.

Dash este un cadru care folosește abstractizarea pentru a dezvolta aplicații web HTML / CSS / JS pentru vizualizarea datelor. Dezvoltat în primul rând pentru Python, versiunea actuală oferă, de asemenea, dezvoltare pe R, Julia și F#.

Ecosistemul Dash a fost dezvoltat de plotly, o companie cu sediul în Montreal care proiectează instrumente de analiză și vizualizare a datelor încă din 2012. Plotly este cel mai bine cunoscută pentru biblioteca sa omonimă de generare de grafice open-source (a se vedea plotly).

Punctul forte al cadrului Dash constă în capacitatea sa de a fi integrat în cadre web moderne, cum ar fi React, Flask și, desigur, Plotly. Acest lucru face posibilă integrarea elementelor de vizualizare a datelor în proiecte web mai tradiționale, precum și proiectarea de mici prezentări sub forma unor aplicații web folosind doar Dash.

Datorită curbei sale de învățare reduse și a numeroaselor posibilități pe care le oferă în ceea ce privește prezentarea datelor, acest instrument este util atât pentru cercetătorii de date, cât și pentru dezvoltatorii a căror competență principală nu este analiza datelor. Tot ce trebuie să faceți este să stăpâniți limbajul Python (sau alte alternative) și să parcurgeți documentația cadrului pentru a putea prezenta grafice de impact:

Pe lângă faptul că permite afișarea de grafice într-o aplicație web, Dash oferă, de asemenea, o serie de metode callback care vă permit să proiectați interacțiuni cu datele și elementele de afișare.

Versiunea de întreprindere a Dash oferă un instrument de proiectare a aplicațiilor low-code. Scopul este de a extinde proiectarea aplicațiilor de vizualizare a datelor, eliberându-le de complexitatea tehnică. Vom analiza apoi versiunea open-source a cadrului.

Cum funcționează un proiect Dash și cum este organizat?

Aplicațiile Dash sunt de obicei împărțite în două secțiuni. Prima se numește secțiunea Layout. Layout-ul este baza fundamentală a oricărui proiect Dash. Acesta este alcătuit dintr-o colecție de componente furnizate în special de bibliotecile dash_html_components și dash_core_components. Aceste două biblioteci sunt instrumente esențiale pentru orice proiect Dash.

A doua secțiune, care nu are un nume propriu-zis, este alcătuită din toate elementele care permit interactivitatea în cadrul aplicației. Acesta este motivul pentru care layout-ul este adesea numit tabloul de bord al aplicației, iar metodele din a doua secțiune sunt funcțiile de callback, care definesc interacțiunile posibile cu tabloul de bord.

Creează-ți primul grafic online cu Dash.

În această prezentare, scopul va fi de a propune o interfață rudimentară care evidențiază un set de date pe un grafic bidimensional. Pentru interactivitate, o bară de parametri permite utilizatorului să modifice aspectul vizual al graficului, precum și datele prezentate.

Pregătiți mediul de dezvoltare pentru Dash.

Înainte de a începe să vă proiectați primul tablou de bord, trebuie să instalați Dash. În ceea ce privește instrumentele necesare, veți avea nevoie de cel puțin un editor de cod sau un IDE cu Python (Pycharm, Visual Studio Code, Sublime Text etc.). Pentru informarea dumneavoastră, este posibil să utilizați Dash cu Jupyter încă de la lansarea JupyterDash.

Pentru a instala Dash, vă recomandăm să utilizați programul de instalare a pachetelor pip, a cărui comandă de instalare este: pip install dash.

Dacă plotly nu este instalat, acesta trebuie de asemenea instalat folosind comanda: pip install plotly.

En complément, pour réaliser une interface un peu plus visuelle, il existe une version de Bootstrap dédiée à Dash. La commande suivante ajoute les dépendances requises: pip install dash-bootstrap-components

Construiți modelul de bază pentru orice proiect Dash.

Un tablou de bord are nevoie de un singur fișier python, în acest caz numit data.py. În acest fișier, începem prin a importa elementele comune tuturor proiectelor Dash.

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

html pentru dash_html_components, este modulul de componente Html al Dash, care vă permite să proiectați module Html folosind limbajul Python.

dcc pentru dash_core_components, este un alt modul de componente. Ca și dash_html_components, oferă componente interactive la cheie bazate pe javascript, css și html. Aceste componente sunt utilizate pentru a interacționa cu interfața.

dbc sau dash_bootstrap_components este modulul de componente Bootstrap pe care îl puteți adăuga pentru a vă îmbunătăți interfețele.

Înainte de a dezvolta interfața noastră, există o linie esențială pe care nu trebuie să o uitați în proiectul Dash: instanțierea aplicației. Pentru a face acest lucru, în urma importurilor, vă rugăm să completați:

app = Dash(__name__)

În plus față de declarația aplicației, adăugați linia de lansare. Această parte a codului trebuie să apară la sfârșitul proiectului:

if __name__ = ‘__main__’:
    app.run_server()

În timpul fazei de producție, vă recomandăm să adăugați argumentul debug=True la funcția run_server() pentru a facilita depanarea aplicației.

Mai este un ultim lucru care trebuie să fie pus în aplicare pentru a completa modelul de proiect Dash. Este vorba de aspectul propriu-zis. Pentru moment, vom construi o secțiune goală folosind următoarea comandă:

app.layout = html.Div([])

Aici, folosind modulul html, se construiește un div html gol, fără a fi nevoie de un fișier .html. Acesta este modul în care sunt create toate elementele html ale unui proiect Dash. Cu alte cuvinte, un proiect Dash este pur și simplu acumularea în cascadă a componentelor din modulele html și dcc.

Afișarea unui grafic static în două dimensiuni.

Înainte de a începe să construiți tabloul de bord, trebuie să încărcați un set de date care poate fi utilizat în Python. Pentru a face acest lucru, o practică obișnuită este de a utiliza biblioteca pandas astfel:

# Load csv file with pandas
datas = pd.read_csv('house_data.csv')

Dacă pandas nu este recunoscut, este foarte probabil ca biblioteca să trebuiască să fie instalată. Pentru a face acest lucru, utilizați pip: pip install pandas.

Acum că structura proiectului este gata, următorul pas este crearea secțiunii layout, unde vom construi structura paginii.

Prima secțiune va conține pur și simplu titlul graficului cu o etichetă H1:

html.Div([
       html.H1('House Data', style={'font-weight': 'bold', 'font-family': 'Montserrat', 'opacity':'0.7'}),
   ]),

Exemplul din titlu arată cum să includeți copii în componentele html folosind Dash. Este posibilă declararea în cascadă a componentelor html la nesfârșit. Iată cum este structurat un proiect Dash. Pentru a face acest lucru, primul argument al unei componente html_components va fi întotdeauna copiii acelei componente.

Obiectul HTML H1 se comportă la fel ca toate celelalte obiecte Heading (H2, H3, H4…). Pentru a adăuga un pic de stil paginii noastre, vom folosi parametrul style. Dacă lucrați la un proiect mai mare, este perfect posibil să folosiți un sistem de denumire de clase sau id-uri și să folosiți o foaie de stil CSS. Aveți grijă, totuși, deoarece CSS din argument are întotdeauna prioritate față de css-ul extern importat.

A doua secțiune va servi ca o bară de parametri în care vom include două liste derulante pentru a alege coloanele care vor fi utilizate în fișierul nostru CSV. De asemenea, va fi adăugată o casetă de bifat pentru a alege dacă se va afișa sau nu curba dintre puncte.

html.Div([
       html.Div([
           html.Label(['Select data in X axis :'], style={'font-weight': 'bold', 'font-family': 'Montserrat', 'opacity':'0.5'}),
           dcc.Dropdown(id="x_axis",
               options=[{'label':value, 'value':value} for value in datas],
               value=datas.columns[0],
               style={'font-weight': '300', 'font-family': 'Montserrat', 'margin-top': '10px'}
           )
       ], style={'width': '20%', 'display': 'inline-block', 'margin-left':'10px', 'vertical-align':'top'}),
 
       html.Div([
           html.Label(['Select data in Y axis :'], style={'font-weight': 'bold', 'font-family': 'Montserrat', 'opacity':'0.5'}),
           dcc.Dropdown(id="y_axis",
               options=[{'label':value, 'value':value} for value in datas],
               value=datas.columns[1],                style={'font-weight': '300', 'font-family': 'Montserrat', 'margin-top': '10px'}
           ),
       ], style={'width': '20%', 'display': 'inline-block', 'margin-left':'50px', 'vertical-align':'top'}),
 
       html.Div([
           html.Label(['Do you want line on your graph ?'], style={'font-weight': '600', 'font-family': 'Montserrat', 'opacity':'0.5'}),
           dcc.Checklist(
               id="line_choice",
               options= [{'label': 'Line', 'value': True}],
               style={'font-weight': '300', 'font-family': 'Montserrat', 'margin-top': '10px'}
           ),
       ], style={'width': '20%', 'display': 'inline-block', 'margin-left':'50px', 'vertical-align':'top'}),
   ], style={ 'background-color': 'white', 'border': '1px solid #F9F9F9', 'padding': '10px', 'margin': '1rem 0rem', 'box-shadow': '0px 0px 30px rgba(0, 0, 0, 0.1)'}),

Să analizăm acest exemplu mai în detaliu:

dcc.Dropdown vă permite să utilizați un obiect dinamic pentru a genera o listă derulantă. Parametrii necesari pentru lista noastră sunt:

id – Termen indicativ utilizat pentru a face legătura între lista noastră derulantă și modificările efectuate de metodele de apelare.

options – Argumentul pentru declararea opțiunilor posibile pentru lista derulantă cu o etichetă și valoarea acesteia. În acest caz, acestea sunt titlurile fiecăreia dintre coloanele din fișierul CSV.

value – Valoarea afișată la început, fără a fi modificată de utilizator. Acest lucru permite afișarea unui grafic inițial înainte ca utilizatorul să modifice valoarea listelor.

dcc.Checklist este obiectul Dash pentru generarea de casete de control. Parametrii săi sunt similari cu cei ai obiectului dcc.Dropdown. În acest caz, este necesară o singură casetă de selectare “Line“. Valoarea sa implicită este True.

Atunci când obiectele dinamice sunt integrate în machetă, se convine să li se atribuie identificatori, astfel încât să poată fi utilizate în metodele de apelare.

Pentru a completa interfața noastră, tot ce a mai rămas este secțiunea care conține graficul propriu-zis. Biblioteca dcc oferă deja un obiect pentru acest lucru:

html.Div([
       dcc.Graph(id='data_graph', style={'border': '4px solid #F9F9F9'})
    ]),

Cu această configurație, elementele esențiale pentru afișarea unui grafic 2D bazat pe două câmpuri de date sunt pregătite. În ceea ce privește componentele, fie că este vorba de elemente statice pentru html sau de elemente dinamice pentru dcc, pe site este prezentată o documentație exhaustivă privind parametrii și utilizarea acestora.

Lansați un proiect Dash și afișați-l într-un browser web.

Acum este posibilă afișarea graficului pe un browser. Va fi cu siguranță o versiune statică, dar va fi funcțională. Pentru a lansa un server de simulare și a afișa graficul, executați comanda într-un terminal la rădăcina proiectului:

python {name_project} runserver 

Se va propune apoi un link de redirecționare, iar dacă se face clic pe acesta se va lansa un browser și se va afișa graficul.

Aceasta este prezentarea unei prime mici aplicații web care utilizează Dash. Acest fișier simplu, care generează un grafic prin abstractizare și este apoi transformat într-un element web standard, poate fi ușor de încorporat în alte proiecte web. De exemplu, încorporarea lui Dash în cadrul Django este o modalitate bună de a rămâne în cadrul unui ecosistem Python în scopul dezvoltării web orientate spre procesarea datelor.

În prezent, pagina prezintă doar informațiile, dar nu este încă posibilă modificarea elementelor din listele derulante. De fapt, lipsește una dintre principalele particularități ale lui Dash – interactivitatea graficelor.

Realizarea unui grafic interactiv este mult mai distractivă.

Layout-ul este gata, nimic nou nu va fi adăugat pe această parte. Toată interactivitatea grafică va fi realizată în secțiunea de rechemare.

Această secțiune reacționează secvențial, astfel încât este posibil să se desfășoare în cascadă mai multe activități una după alta. În acest caz, singura interacțiune dorită este actualizarea graficului în urma unei variații a listelor derulante sau a căsuței de bifat.

Avant toute chose, pour utiliser des fonctions de callback, il faut ajouter de nouvelle dépendances: from dash.dependencies import Input, Output.

Al doilea pas constă în declararea callback-ului folosind decoratorul @app.callback(), precum și elementele Input și Output. Fiecare dintre aceste elemente are două argumente, component_id și component_property.

@app.callback(
   Output('data_graph', 'figure'),
 
   [Input('x_axis', 'value'),
    Input('y_axis', 'value'),
    Input('line_choice', 'value'),],
)

În general, orice declarație de apelare va avea acest tip de configurare. Cu alte cuvinte, există întotdeauna mai întâi ieșiri (Outputs), care definesc obiectul și, în special, proprietatea care va fi afectată, și apoi o listă de intrări (Inputs) între paranteze pătrate, care sunt, de asemenea, definite ca proprietăți în cadrul obiectelor layout.

Aici sunt preluate valorile listelor derulante și valoarea booleană a casetei de selectare. La ieșire, modificarea efectuată va avea un impact asupra graficului.

Odată ce callback-ul a fost corect parametrizat, al doilea pas este declararea metodei în sine.

def update_graph(x_axis, y_axis, line_choice):
   return {
       'data': [dict(
           x = datas[x_axis],
           y = datas[y_axis],
 
           mode = 'lines+markers' if(line_choice is not None and line_choice) else 'markers',
 
           marker = {
               'size': 15,
               'opacity': 0.5,
               'color': 'red'
           }
       )],
 
       'layout': dict(
           xaxis = {
               'title': x_axis,
               'type': 'linear'
           },
           yaxis = {
               'title': y_axis,
               'type': 'linear'
           },
 
           margin = {'l': 40, 'b': 40, 't': 10, 'r': 0},
           hovermode = 'closest'
       )
   }

Această metodă update_graph ia ca argumente elementele callback și va genera din nou graficul folosind acești parametri. În acest caz, valoarea de returnare va transforma graficul prin atribuirea unor parametri care sunt în mod deliberat statici și a altora care sunt legați de alegerile utilizatorului.

Parametrii care se schimbă sunt datele cu alegerile făcute de utilizator, titlurile axelor noastre, care sunt pur și simplu termenii coloanelor alese și modul de afișare “marker” sau “linear+markers“, în funcție de faptul că a fost bifată sau nu caseta.

Asta este tot ce vă trebuie pentru a face dinamic generatorul de grafice. Revenind la URL-ul de test și modificând alegerile prin intermediul listelor derulante și al căsuței de bifat, puteți vedea că graficul se actualizează automat.

Este posibil să se îmbunătățească acest program, în special prin adăugarea de parametri personalizabili. De exemplu, culoarea markerilor sau dimensiunea acestora. În acest caz, nu trebuie decât să adăugați elementele dcc la machetă și să adăugați noile Intrări la declarația de apelare.

Rețineți că, în cazul în care scopul unei modificări este de a schimba un alt element de ieșire, este uneori necesar să se creeze un lanț de apelare. Acesta constă în continuarea dezvoltării după primul callback și construirea altora cu decorator și metode proprii.

Atunci când mai multe callback-uri se succed, este necesar un al treilea concept pentru a le controla pe toate: stările. Pentru a înțelege utilizarea stărilor și importanța lor, citiți acest articol mai avansat despre Dash: Crearea unui tablou de bord complet de analiză a datelor cu Dash.

Conclusion

Cadrul Dash, împreună cu un cadru web front-end, vă oferă posibilitatea de a vizualiza grafice interactive și de a prezenta personalului dumneavoastră date cu un impact mult mai puternic. Chiar și cu o stăpânire rudimentară a limbajului Python, cadrul oferă o multitudine de oportunități de dezvoltare pentru vizualizarea datelor.

Acest scurt articol se referă doar la elementele de bază. Pentru a afla mai multe despre acest instrument, urmăriți viitoarele versiuni de pe site și consultați documentația online, care este destul de intuitivă și oferă exemple utile pentru utilizarea zilnică.

Photo Maxime Macé

Maxime Macé

Simple passionné de thématiques diverses et variées. J’apprécie enrichir mes connaissances dans les disciplines techniques comme l’informatique, les sciences et l’ingénierie, mais aussi dans les domaines merveilleux de la philosophie, l’art et la littérature.

Prenons contact

Vous souhaitez me contacter suite à la lecture de cet article ? Merci de renseigner votre adresse électronique et je vous recontacterai dans les plus brefs délais.

CV Ingénieur développeur informatique

CV Étudiant PhD Artificial Intelligence

Portfolio Artist designer