Suplimente

Tooltips

Putem adăuga tooltips la orice diagramă sau grafic. Acestea sunt deosebit de utile atunci când există o mulțime de puncte de date (de exemplu, într-un grafic de dispersie). Chiar și în cazul unor seturi de date mai mici, acestea ajută la dezordonarea graficului, permițând utilizatorilor să se concentreze asupra modelelor generale.

De asemenea, acestea sunt utile în cazul diagramelor complexe, în care diferite părți ale diagramei transmit diferite aspecte ale setului de date, iar acest lucru ar putea să nu fie evident pentru utilizatorii care nu sunt familiarizați cu acest tip de diagramă. De exemplu, în această diagramă Sunburst, utilizatorii pot trece cu mouse-ul peste segmente pentru a vedea atât punctul de date subiacente, cât și contextul acelui punct de date. În acest caz, diagrama Sunburst împarte tratamentele medicale în funcție de tip, organul care este afectat și statutul de asigurat al pacientului. Aceste informații sunt afișate în partea de jos a ecranului și se modifică pe măsură ce utilizatorul trece cu mouse-ul peste fiecare segment.

Unul dintre punctele forte ale D3 este faptul că oferă o mare flexibilitate. Un tool-tip poate include orice date care sunt prezente în setul de date, text contextual sau chiar valori dintr-un set de date complet diferit. De exemplu, acest Sankey le arată utilizatorilor că nodurile reprezintă numărul total de refugiați, în timp ce liniile reprezintă numărul de refugiați care se deplasează între fiecare origine (în acest caz, o țară) și destinație (în acest caz, un stat american). Acest text poate fi în orice limbă, ceea ce ajută enorm la localizare.

Atunci când în afișare sunt utilizate două sau mai multe seturi de date, pictogramele pot arăta comparații între acestea. De exemplu, acestea pot afișa atât valoarea din acest an, cât și cea de anul trecut, sau seturi de date pentru diferite regiuni. În schimb, cu un singur set de date, acestea pot fi utilizate pentru a afișa intervale de încredere, valori procentuale sau alte informații statistice legate de punctele de date, ajutând utilizatorii să evalueze fiabilitatea datelor.

Un alt beneficiu al tool-tips este că sunt amuzante! Ele sporesc interactivitatea, permițând utilizatorilor să se implice în grafic, explorând datele în funcție de propriile lor condiții.

Zoom-uri

Zoom-urile permit utilizatorilor să mărească anumite zone ale unui grafic sau ale unei diagrame pentru a examina mai îndeaproape punctele de date și tendințele. Acest lucru este util mai ales în cazul seturilor mari de date. De asemenea, este util atunci când utilizatorii sunt interesați de diferite aspecte ale setului de date: de exemplu, unii utilizatori ar putea dori să se concentreze asupra unei anumite perioade de timp.

De asemenea, zoom-urile permit utilizatorilor să facă comparații detaliate între diferite părți ale setului de date. Aceștia pot explora datele în mod interactiv prin mărirea unei zone și apoi trecerea la o altă zonă. Acest lucru îi ajută să vadă mai clar corelațiile, valorile aberante și tiparele.

Un alt beneficiu al zoom-ului este că permite utilizatorilor să folosească dispozitive mai mici, cum ar fi smartphone-urile, pentru a vedea întregul set de date, dar să poată vedea detaliile de care au nevoie. Utilizatorii de smartphone-uri sunt obișnuiți să facă zoom pe ecran folosind "gestul de ciupire".

De asemenea, zoomul contribuie la îmbunătățirea accesibilității pentru persoanele cu deficiențe de vedere.

Pensule

Periajul funcționează în mod similar cu zoom-ul, în sensul că oferă utilizatorilor o modalitate de a interacționa cu o parte a setului de date. Cu toate acestea, în loc să mărească o parte a graficului, această zonă nu își schimbă dimensiunea. Zona periat poate fi indicată într-un alt mod, cum ar fi o schimbare de culoare.

O perie poate fi utilizată pentru a filtra datele - de exemplu, utilizatorii pot să tragă o perie de-a lungul axei x a unui grafic de suprafață prin deplasarea mouse-ului. Zona care a fost periat ar putea apărea apoi într-o altă parte a ecranului. O altă modalitate de utilizare a unei pensule este adăugarea unui grafic separat care să arate aceleași date la o scară diferită. În această situație, peria funcționează în mod similar cu zoom-ul. Cu toate acestea, poate fi mai ușor de utilizat, deoarece graficul original nu-și schimbă dimensiunile.

Animații

Animațiile sunt utile în mai multe moduri. De exemplu, în cazul unei diagrame cu bare simple, barele pot aluneca încet în sus, în loc să apară instantaneu. Acest lucru adaugă foarte puțin la conținutul informațional al graficului, dar îl face mai interesant pentru utilizatori.

Animațiile joacă un rol mai important atunci când sunt folosite pentru tranziții. De exemplu, această Diagramă Sankey prezintă date pentru mai mulți ani. Pe măsură ce utilizatorul se deplasează de la un an la altul, folosind cursorul, dimensiunile relative ale nodurilor se schimbă. Acestea se deplasează, deoarece sunt aranjate în ordinea mărimii. Fără animație, schimbarea ar fi stridentă și ar fi greu de menținut "constanța obiectului". De exemplu, un utilizator ar putea fi interesat de modul în care fluxul (în acest caz, de refugiați) provenind dintr-o anumită țară se schimbă de la an la an. Dacă nodul respectiv ar sări de colo-colo fără o tranziție lină, ar fi greu de realizat acest lucru.

Un alt exemplu de tranziție este prezentat în acest PieChart. Atunci când se trece cu mouse-ul peste un segment, acesta se deplasează ușor în afară. Prin utilizarea unei tranziții netede, această mișcare pare naturală și ajută la menținerea metaforei plăcintei. Fără ea, această secțiune a graficului cu plăcintă ar sări dintr-o poziție în alta. Din același motiv, animațiile funcționează deosebit de bine atunci când se afișează date din serii de timp, cum ar fi valorile de pe o bursă de acțiuni. Din nou, avantajul este că este mai ușor pentru ochi să urmărească o anumită valoare pe măsură ce aceasta se modifică.

Atunci când animația este utilizată pentru a face tranziția între seturile de date, iar aceste tranziții sunt controlate de o interfață utilizator, cum ar fi <TransLink>acest cursor</TransLink>, utilizatorul poate explora valorile aproape ca pe un afișaj video.

Culori

Deoarece graficele și diagramele D3 sunt create folosind JavaScript, este posibil să setați culorile folosind o funcție. Acest lucru înseamnă că culoarea poate fi utilizată în moduri care nu sunt posibile în alte biblioteci de vizualizare a datelor.

Cea mai evidentă utilizare a culorilor este aceea de a distinge diferite seturi de date - de exemplu, acest Grafic de bare conține date pentru mai multe seturi de date similare. Utilizând culori diferite pentru fiecare set de date și explicând semnificația acestor culori într-o legendă, este posibil să le combinăm împreună în același grafic.

Culoarea poate fi utilizată și pentru a grupa seturi similare de valori. De exemplu, această diagramă de explozie solară arată o ierarhie de date. Fiecare inel reprezintă un nivel diferit în ierarhie. Prin utilizarea culorilor, putem grupa valorile care aparțin aceluiași nivel și le putem explica într-o legendă.

Un alt avantaj al D3 este că este posibil să variați saturația culorii, precum și nuanța acesteia. De exemplu, în această diagramă Sunburst (exemplul de sus), saturația culorii în fiecare secțiune este variată, în timp ce toate secțiunile din același inel au aceeași culoare. În acest caz, intensitatea este pur și simplu randomizată, pentru a distinge mai clar sectoarele individuale (comparați acest lucru cu exemplul în care fiecare sector dintr-un inel are atât aceeași nuanță, cât și aceeași saturație). Cu toate acestea, saturația ar putea fi, de asemenea, legată de punctul de date de bază. În acest caz, este mai bine dacă secțiunile nu sunt aranjate în ordinea mărimii, altfel sectoarele mai mici vor fi prea greu de distins.

Un alt exemplu în care culoarea a fost folosită pentru a face diagrama mai clară este această diagramă Sankey. În cele două exemple de sus, o culoare este folosită pentru a reprezenta nodurile de origine și o altă culoare reprezintă nodurile de destinație. În plus, densitatea culorii reprezintă dimensiunea fiecărui nod. Aceleași culori sunt folosite și în liniile de legătură. Prin urmare, există o legătură evidentă între valorile reprezentate de noduri și valorile reprezentate de liniile de legătură. În ultimele două exemple, se utilizează două culori, iar valorile datelor subiacente sunt reprezentate de valorile relative ale acestor două culori. Acest lucru poate fi uneori mai clar, în special atunci când diferențele dintre valorile datelor sunt subtile.

În cele din urmă, culoarea poate fi folosită uneori pur și simplu pentru a separa părți ale diagramei, fără nicio semnificație de bază. Acesta este cazul celui de-al treilea exemplu de diagramă Sunburst. Culorile sunt alese în mod special astfel încât limitele dintre sectoarele din diagrama Sunburst să fie clar vizibile. Acest lucru este util mai ales atunci când valorile sunt mici și sectoarele sunt foarte înguste.

Un alt mod în care poate fi utilizată culoarea este acela de a distinge un anumit set de puncte de date. Acest lucru poate fi combinat cu o perie (a se vedea mai sus). Trecând cu pensula peste grafic, utilizatorii pot filtra punctele de date. Valorile filtrate pot fi afișate ca o culoare diferită, care poate fi legată de o legendă separată.

Chiar și fără o pensulă, culorile pot fi utile pentru a evidenția anumite valori. De exemplu, cu D3.js putem da o culoare specifică valorilor aberante sau putem folosi culori diferite pentru valorile negative și pozitive. Vizualizările de date devin mult mai clare atunci când culorile sunt folosite în mod inteligent, mai ales atunci când există o mulțime de puncte de date. Codurile de culori pot fi utilizate și pentru a arăta structura generală a unei vizualizări de date.

Culorile pot ajuta, de asemenea, la interacțiuni. Culoarea unui punct de date, a unei bare sau a unei linii se poate schimba la trecerea mouse-ului, subliniind faptul că acesta a fost selectat.

Grila de date

Datele pentru o diagramă sau un grafic D3js vor proveni, de obicei, din una dintre cele trei surse. Dacă este puțin probabil ca datele să se schimbe foarte des, acestea pot fi stocate într-un fișier JSON sau CSV pe server. Dacă datele provin dintr-o bază de date locală, aceasta va trebui să fie actualizată direct, fie cu o interfață personalizată, fie cu un instrument de baze de date, cum ar fi DBeaver. Putem configura acest lucru pentru dumneavoastră.

However, if data needs to be updated by somebody with no technical skills, the best option is for us to create a data grid for you. This looks and feels much like an Excel spreadsheet. It can either be on a page which is shielded from search engines or which is password-protected.

O variantă a unei grile de date este un formular: acesta funcționează la fel ca un formular de contact contact de pe un site web. Acest lucru ar putea fi mai potrivit atunci când datele trebuie introduse de către personalul care nu este familiarizat cu o grilă de date.

Elemente UI

Deși D3.js oferă un set limitat de instrumente de interfață utilizator, este mai bine să le codificați folosind fie o bibliotecă de componente, cum ar fi MUI, fie ca HTML simplu.

Cele mai utile elemente de interfață utilizator sunt butoanele radio și casetele de selectare. Acestea sunt uneori confundate. Butoanele radio, cum ar fi cele prezentate în acest Grafic cu bare suprapuse permit utilizatorilor să aleagă între un set de opțiuni care se exclud reciproc: în acest caz, pot alege un singur set de date, prezentat ca un simplu grafic cu bare, sau mai multe seturi de date, prezentat ca un grafic cu bare suprapuse. Cu toate acestea, ele pot fi utilizate și pentru a schimba modul în care sunt afișate datele. În această vizualizare de date Sunburst, butoanele radio afectează modul în care este utilizată culoarea pentru a scoate în evidență diferite aspecte ale setului de date.

Pe de altă parte, căsuțele de selectare permit utilizatorilor să aleagă orice permutare de opțiuni: în acest caz, opțiunile nu se exclud reciproc. În exemplul cu căsuțe de selectare, <Link> Vizualizarea de date Line Chart</Link> poate afișa doar un set de date, oricare două seturi de date sau toate trei. Acest lucru este extrem de util atunci când utilizatorii trebuie să facă comparații specifice între perechi de seturi de date: de exemplu, ar putea dori să compare valorile pentru operațiile pe cord cu cele pentru operațiile pe ficat și să elimine valorile pentru operațiile pe splină pentru a îmbunătăți claritatea.

Un alt element de interfață care este util pentru îmbunătățirea vizualizărilor de date D3.js este comutatorul. Acesta este utilizat atunci când diagrama poate fi într-una dintre cele două stări sau când doriți să oferiți utilizatorilor opțiunea de a schimba o parte a vizualizării datelor pentru a îmbunătăți claritatea. În acest exemplu, un comutator de comutare este utilizat pentru <Link> comutarea între o diagramă cu linii și o diagramă cu arii</Link>.

În cele din urmă, se pot utiliza cursoare. Aceștia funcționează deosebit de bine atunci când o vizualizare de date conține seturi de date din perioade de timp diferite. Ele permit utilizatorilor să se deplaseze intuitiv înainte și înapoi de-a lungul liniei de timp, ca în această Vizualizare de date Sankey.