Această diagramă cu linii prezintă aceleași date ca și Graficul cu bare suprapuse, dar utilizează puncte pentru a marca punctele de date și linii pentru a le conecta. Comutatorul de comutare (creat în MUI) comută între o simplă diagramă cu linii și o diagramă de suprafață. Ambele vizualizări de date utilizează aproape același cod D3.js.
Diagramele de suprafață funcționează mai bine ca vizualizări de date atunci când există seturi unice de date: acestea ajută utilizatorii să vadă mai clar valoarea totală reprezentată de punctele de date, deoarece aceasta este proporțională cu dimensiunea zonei umbrite. Cu toate acestea, atunci când există mai multe puncte de date, zonele umbrite pot fi confuze, deoarece o zonă poate ascunde zonele din spatele ei. D3.js permite un control total asupra acestui aspect: de exemplu, putem reduce opacitatea unora sau a tuturor zonelor, sau chiar reduce opacitatea acelor zone care se suprapun peste cele de mai jos. Diagramele de arii pot fi, de asemenea, derutante atunci când afișează valori negative, deși D3.js oferă modalități de a rezolva această problemă, cum ar fi utilizarea unor culori diferite pentru valorile pozitive și negative.
La fel ca în exemplul Bar Chart, este posibil să se utilizeze controale UI pentru a se concentra pe un anumit set de date în cadrul vizualizării datelor și să se facă legătura cu codul D3.js. Cu toate acestea, în acest caz, se utilizează casete de selectare în loc de butoane radio. Cu butoanele radio trebuie să selectați doar o singură opțiune; cu toate acestea, cu casetele de selectare, fiecare casetă poate fi selectată sau deselectată independent de celelalte. Prin urmare, cu această interfață de utilizator este posibilă selectarea oricărei permutări a seturilor de date: de exemplu, orice singur organ, oricare două organe sau toate cele trei organe. Codificarea pentru acest lucru este un pic mai complexă, mai ales atunci când există mai mult decât un număr mic de puncte de date.
D3.js ne permite, de asemenea, să selectăm curba utilizată pentru a conecta datele. În mod obișnuit, am alege cea mai potrivită curbă pentru vizualizarea datelor și am codifica-o în mod dur. Cu toate acestea, pentru a ilustra ce este posibil, am adăugat un set de butoane radio pentru ca utilizatorii să poată alege propria curbă. Unele curbe, cum ar fi Catmull-Rom, trec prin toate punctele de date, în timp ce altele, cum ar fi Curve Basis, nu o fac. Partea bună a faptului că nu trec prin toate punctele de date este că este posibil să se arate foarte bine tendințele din date. Dimpotrivă, curba Catmull-Rom include toate punctele de date reale, dar include depășiri și subpuncte, ceea ce face mai greu de observat tendințele.
Costul unei diagrame D3.js Line Chart sau Area Chart depinde în mare măsură de măsura în care trebuie să fie codificată în mod personalizat. Add-ons, cum ar fi tool-tips, animații personalizate și așa mai departe, vor adăuga un pic la cost, dar vor îmbunătăți foarte mult experiența utilizatorului. Pagina Prețuri vă va oferi o idee generală. Pagina Prețuri vă va oferi o idee generală. Cu toate acestea, vă rugăm să ne contactați pentru o discuție gratuită cu un dezvoltator pentru a stabili ce este cel mai bine pentru dumneavoastră.