Introducere

DynamicD3 oferă vizualizări de date personalizate folosind D3.js. Vom lucra cu dvs. pentru a vă ajuta să selectați cel mai eficient mod de a vă afișa datele: acest lucru poate include Bar Charts, Line Charts, Pie Charts, Sankey Diagrams sau vizualizări de date mai exotice, cum ar fi chloropleths, Bubble Charts sau Sunburst Diagrams.

Vizualizările de date D3.js pot include un număr mare de Add Ons, cum ar fi tool-tips, zoom, mouse-overs și animații. Acestea îi ajută pe utilizatori să înțeleagă mai intuitiv datele și oferă o experiență captivantă, ceea ce nu este posibil cu vizualizările de date statice. De asemenea, putem crea o interfață personalizată - folosind butoane radio, casete de selectare, cursoare sau comutatoare - care extind și mai mult gama de experiențe interactive.

Vă oferim fie JavaScript simplu, pe care îl puteți insera direct în site-ul dvs. web, fie o componentă React. Vom crea o pagină web simplă și gratuită ca demonstrație. Opțional, putem crea o grilă de date, astfel încât să vă puteți actualiza datele cu ușurință.

D3.js poate utiliza date dintr-un fișier static JSON sau CSV sau poate prelua date dintr-un API. De asemenea, putem crea o grilă de date astfel încât să puteți actualiza datele cu ușurință.

Diagrame de bare

Diagramele cu bare sunt utilizate de obicei pentru date categorice, cum ar fi acest exemplu care compară numărul de operații pe trei organe specifice la un spital important.

Rețineți că un grafic cu bare nu este același lucru cu o histogramă, chiar dacă acestea arată similar. O histogramă nu are date categorice, cum ar fi țările (în care un punct de date se încadrează fără ambiguitate într-o categorie sau alta). Mai degrabă, aceasta prezintă date care formează un continuum, dar care sunt împărțite în diferite intervale, numite bins. De exemplu, un set de date în care axa x arată distanța de la un anumit punct ar putea fi împărțită în intervale. Cu toate acestea, aceste intervale sunt arbitrare și, de obicei, sunt alese pentru a afișa clar datele.

D3.js poate fi utilizat fie pentru o diagramă cu bare, fie pentru o histogramă, iar oricare dintre acestea poate reprezenta unul sau mai multe seturi de date. De asemenea, poate fi utilizat pentru a reprezenta date continue. Cu toate acestea, acestea sunt afișate mai adecvat într-o diagramă cu linii sau o diagramă de dispersie.

Diagrame cu linii

Line Charts and Area Charts displays data points over a continuous interval or time period. Depending on the curve used to connect the lines it shows trends and patterns over time. The horizontal, or x-axis represents the independent variable (often time), while the vertical axis represents the dependent variable (the value which has been measured). If the horizontal axis represents time this can be labelled using standard units of time and date, such as seconds, minutes, months and years. D3.js is extremely flexible in this regard. Date and time labels can be localized (for example, by using words in another language to represent the months).

Diagramele liniare sunt deosebit de utile pentru a afișa mai multe seturi de date care sunt legate într-un anumit fel. Aceste seturi de date utilizează de obicei aceeași axă x, dar pot avea scări diferite și axe y diferite. Acestea sunt deosebit de utile pentru a vedea tendințele în diferite seturi de date (cum ar fi compararea momentului în care există un vârf de boală în diferite țări). În acest exemplu se utilizează o interfață utilizator pentru a comuta între diferite combinații de seturi de date. Rețineți că D3.js poate ajusta automat scara axei verticale pe măsură ce datele se modifică.

Un alt punct forte al graficelor cu linii este capacitatea de a analiza eficient tendințele. Se poate trasa o curbă care să treacă prin fiecare punct sau care să arate tendințele pe termen scurt sau lung. În exemplul legat de mai sus a fost adăugată o interfață de utilizator, astfel încât utilizatorii să poată explora setul de date în diferite moduri, folosind diferite curbe.

A variation on the line chart is the area chart, in which the area under the line is shaded. This is also shown in the example on the Line Chart page

Diagrame circulare

Într-o diagramă cu plăcintă, unghiul fiecărei felii este proporțional cu cantitatea pe care o reprezintă. Graficele cu plăcinte și graficele cu gogoși sunt la fel, cu excepția faptului că graficele cu gogoși au o gaură în mijloc care poate conține date. Diagramele Donut pot avea mai multe inele care arată o ierarhie a valorilor datelor; cu toate acestea, acest tip de diagramă este denumit diagramă Sunburst.

Diagramele circulare sunt utilizate în mod obișnuit în ziare. Cu toate acestea, deși sunt familiare și ușor de înțeles, nu reprezintă cea mai bună modalitate de prezentare a datelor proporționale sau categorice, deoarece este greu de comparat valori diferite (spre deosebire de un grafic cu bare, unde înălțimile dreptunghiurilor pot fi comparate cu ușurință. Cu toate acestea, ele sunt utile atunci când datele reprezintă o proporție dintr-o valoare totală. Proporțiile pot fi, de asemenea, reprezentate cu diagrame cu bare, dar acest lucru este mai puțin evident din punct de vedere intuitiv.

Metafora plăcintei poate fi extinsă prin extragerea unei bucăți din ea. Acest lucru se poate face static sau folosind un efect de mouse-over, așa cum se arată pe pagina Pie Chart. Acest lucru este cunoscut sub numele de grafic cu plăcintă explodată. Informații mai detaliate pot fi oferite pentru secțiunea explodată.

Diagrame Sunburst

Diagramele Sunburst sunt o formă de diagramă cu plăcintă pe mai multe niveluri. Ele sunt cunoscute uneori sub denumirea de hărți în trepte radiale, deoarece datele au aceeași structură ierarhică ca și o hartă în trepte convențională.

Acest tip de vizualizare a datelor arată ierarhia printr-o serie de inele care sunt împărțite pentru fiecare nod de categorie. Fiecare inel corespunde unui nivel în ierarhie, cercul central reprezentând nodul rădăcină, iar ierarhia se deplasează spre exterior de la acesta. De exemplu, în acest exemplu sunt împărțite tipurile de operațiuni. Primul inel împarte operațiile în funcție de organul care este afectat. Următorul inel împarte fiecare dintre aceste secțiuni în funcție de tipul de tratament (conservator, operație, transplant sau medicamente), iar următorul inel arată dacă pacienții aveau sau nu asigurare. Trecerea mouse-ului peste valorile de bază se afișează într-un ecran în partea de jos. Acest lucru înseamnă că utilizatorii pot explora datele prin deplasarea în jurul afișajului. De exemplu, aceștia ar putea dori să afle cum diferă proporția de pacienți care au urmat un tratament pentru rinichi, în funcție de acoperirea lor de asigurare.

Culoarea poate fi utilizată pentru a evidenția grupările ierarhice sau categoriile specifice. În exemplul de mai sus, utilizatorul poate modifica schema de culori pentru a evidenția diferite aspecte ale setului de date. În primul exemplu, pentru fiecare inel se utilizează diferite game de culori. Acest lucru facilitează înțelegerea datelor afișate în fiecare inel și, în același timp, face clare limitele secțiunilor. Cu toate acestea, acest lucru nu funcționează în cazul seturilor mari de date. În acest caz, este mai clar dacă toate secțiunile dintr-un anumit inel au aceeași nuanță. În cele din urmă, în unele cazuri, se pot folosi culori aleatorii. Acestea îngreunează înțelegerea semnificației fiecărui nivel al ierarhiei, dar facilitează vizualizarea diferitelor sectoare. Afișajul UI din exemplul Sunburst comută între aceste alternative.

Diagrama Sankey

Diagramele Sankey sunt utilizate pentru a reprezenta procesele de flux, cum ar fi fluxul de bani în cadrul unei organizații (așa cum se arată într-o situație financiară), fluxul de energie sau de materii prime printr-o serie de procese industriale sau fluxul unui activ mai abstract, cum ar fi informațiile. Înălțimea sau lățimea fiecărui nod reprezintă cantitatea totală de flux care trece prin acel nod, iar grosimea liniilor dintre fiecare pereche de noduri reprezintă cantitatea de flux care trece între aceste noduri. Se poate folosi culoarea, fie pentru a arăta cantitatea de flux (de exemplu, folosind un gradient de culoare), fie pentru a arăta un alt aspect al procesului, ca în această diagramă Sankey, care folosește culori pentru a ilustra fluxul de refugiați.

Un domeniu în care se utilizează adesea "Sankey" este sectorul energetic. De exemplu, acestea pot arăta sursa de gaz natural în funcție de țară, mijloacele prin care ajunge la destinație (conducte, nave etc.) și apoi modul în care este utilizat (utilizatori finali). Diagramele de acest tip sunt utile pentru factorii de decizie politică, deoarece evidențiază domeniile în care eficiența poate fi îmbunătățită.

Diagramele Sankey reprezintă un mod deosebit de intuitiv de a arăta schimbările în timp. În această diagramă Sankey este prezentat fluxul de refugiați din diferite țări de origine în Statele Unite pe o perioadă de timp. Glisorul permite utilizatorilor să se deplaseze prin linia timpului, iar tranzițiile netede facilitează urmărirea nodurilor pe măsură ce acestea cresc sau scad în importanță.

Chloropleth

Coropleții folosesc culoarea pentru a arăta modul în care variază o variabilă într-o zonă geografică. Acestea sunt asemănătoare hărților termice, însă, spre deosebire de acestea din urmă, ele împart harta în subunități geopolitice, cum ar fi țări, state, provincii sau județe.

Valorile utilizate într-un cloroplit trebuie să țină seama de dimensiunile diferite ale zonelor. De exemplu, există o diferență uriașă între dimensiunile diferitelor țări, astfel încât nu are sens să se coloreze țările doar în funcție de populația lor. În schimb, aceste date ar fi "normalizate" între regiuni prin utilizarea densității populației mai degrabă decât a populației absolute. Pentru ambele tipuri de afișare, culorile mai închise sau mai intense reprezintă, de obicei, valori mai mari, în timp ce culorile mai deschise sau mai palide indică valori mai mici.

Din păcate, datele din lumea reală nu sunt de obicei împărțite în categorii naturale. De exemplu, un cloroplit în care intensitatea unei culori ar fi proporțională cu densitatea populației ar putea funcționa atunci când există o diferență similară între densitățile populației din diferite regiuni (cum ar fi între diferite comitate din același stat american). Cu toate acestea, deseori datele conțin valori care sunt cu câteva ordine de mărime mai mari decât alte valori din același set de date. Din fericire, D3.js dispune de un set bogat de scări. În unele cazuri, o scară logaritmică ar putea fi mai potrivită: aceasta ar arăta bine diferențele mici, dar ar arăta și diferențele mult mai mari. În alte cazuri, o culoare ar putea fi utilizată pentru a arăta valorile peste sau sub un anumit prag. Acest nivel ridicat de flexibilitate este cel care face ca D3.js să fie atât de puternic luat pentru crearea de vizualizări de date.

Pe lângă faptul că ne ajută să redimensionăm datele, D3.js ne permite să folosim o gamă largă de proiecții de hărți: acestea au un impact major asupra modului în care sunt percepute datele. Cloropleții produși cu ajutorul altor biblioteci utilizează adesea proiecții standard, cum ar fi proiecția Mercator, care poate duce la distorsiuni mari în anumite părți ale lumii. Acest lucru reprezintă o problemă mai puțin gravă atunci când harta prezintă zone mai mici, cum ar fi județele din Regatul Unit, sau atunci când zonele afișate se află toate la o latitudine similară.

În cele din urmă, este posibil să se utilizeze două date separate (dar legate între ele), fiecare cu o scară de culori diferită. Acest lucru este cunoscut sub numele de Cloropleth bidimensional.

Graficul cu bule

Graficele cu bule sunt ca niște diagrame de dispersie, dar datele sunt înlocuite de cercuri. În timp ce o diagramă de dispersie poate folosi doar poziția și culoarea unui punct pentru a reprezenta informațiile, o diagramă cu bule are, de asemenea, dimensiuni orizontale și verticale. Acest lucru face ca graficele cu bule să fie deosebit de potrivite pentru afișarea relațiilor multidimensionale.

În cazul în care este necesară afișarea unei singure informații suplimentare pentru fiecare cerc, aceasta poate fi reprezentată prin suprafața cercului. Cu toate acestea, acest lucru poate fi problematic, deoarece utilizatorii au tendința de a judeca dimensiunile relative ale cercurilor pe baza diametrului acestora, mai degrabă decât a suprafeței lor. Este important să se precizeze acest lucru în legendă.

Diagramele cu bule funcționează mai puțin bine atunci când există multe puncte de date și când există o gamă mare de date. Atunci când există prea multe puncte de date, afișajul poate părea aglomerat, iar bulele se pot suprapune. Atunci când există un interval mare de valori în setul de date, este posibil ca bulele mai mici să nu fie vizibile în mod clar. Aceste probleme pot fi depășite într-o oarecare măsură prin utilizarea interacțiunilor cu mouse-ul pentru a oferi mai multe informații, cum ar fi valoarea exactă a punctului de date subiacente.

O ultimă problemă cu diagramele cu bule este iluzia mediei ponderate: dimensiunile bulelor afectează percepția valorilor x și y ale punctului de date. Această distorsiune trebuie luată în considerare atunci când se estimează valorile medii x și y.

Diagramele cu bule care trebuie să prezinte valori negative pot fi create fie folosind un simbol în centrul bulelor care reprezintă valori negative, fie culori diferite pentru valorile pozitive și negative sau chiar forme diferite. Cu D3.js este posibil acest nivel de flexibilitate, dar nu este cazul cu majoritatea bibliotecilor de vizualizare a datelor.