DynamicD3: Adatvizualizáció a D3.js használatával

DynamicD3

Vonaldiagramok



Ez a vonaldiagram ugyanazokat az adatokat mutatja, mint a Soros oszlopdiagram, de pontokat használ az adatpontok jelölésére és vonalakat az összekötésükhöz. A (MUI-ban létrehozott) billenőkapcsoló vált az egyszerű vonaldiagram és a területi diagram között. Mindkét adatmegjelenítés szinte ugyanazt a D3.js kódot használja.

A területi diagramok jobban működnek adatmegjelenítésként, ha egyetlen adatkészletről van szó: segítenek a felhasználóknak jobban látni az adatpontok által képviselt összértéket, mivel ez arányos az árnyékolt terület méretével. Ha azonban több adatpont van, az árnyékolt területek zavaróak lehetnek, mert az egyik terület eltakarhatja a mögötte lévő területeket. A D3.js lehetővé teszi ennek teljes ellenőrzését: például csökkenthetjük néhány vagy az összes terület átlátszatlanságát, vagy akár az alatta lévő területeket átfedő területek átlátszatlanságát is csökkenthetjük. A területi diagramok akkor is zavaróak lehetnek, ha negatív értékeket mutatnak, bár a D3.js lehetőséget biztosít ennek a problémának a kiküszöbölésére, például különböző színeket használhatunk a pozitív és negatív értékekhez.

A Sávdiagram példához hasonlóan lehetőség van arra, hogy a felhasználói felület vezérlőelemeit használva egy adott adathalmazra fókuszáljon az adatvizualizáción belül, és ezt összekapcsolja a D3.js kóddal. Ebben az esetben azonban nem rádiógombokat, hanem jelölőnégyzeteket használunk. A rádiógombokkal csak egy opciót kell kiválasztani; a jelölőnégyzetekkel azonban minden egyes négyzet a többitől függetlenül választható ki vagy választható le. Ezzel a felhasználói felülettel tehát az adathalmazok bármely permutációja kiválasztható: például bármelyik szerv, bármelyik két szerv vagy mindhárom szerv. Ennek kódolása egy kicsit bonyolultabb, különösen akkor, ha kisszámú adatpontnál több van.


A D3.js azt is lehetővé teszi, hogy kiválasszuk az adatok összekapcsolásához használt görbét. Általában az adatvizualizációhoz a legmegfelelőbb görbét választanánk ki, és ezt keményen kódolnánk. Azonban, hogy szemléltessük a lehetőségeket, egy sor rádiógombot adtunk hozzá, hogy a felhasználók kiválaszthassák a sajátjukat. Egyes görbék, például a Catmull-Rom, minden adatponton áthaladnak, míg mások, például a Curve Basis, nem. Annak, hogy nem halad át az összes adatponton, az a jó oldala, hogy nagyon jól meg lehet mutatni az adatokban lévő tendenciákat. Ezzel szemben a Catmull-Rom görbe az összes tényleges adatpontot tartalmazza, de tartalmaz túl- és alulcsúszásokat, ami megnehezíti a trendek megjelenítését.


A D3.js vonaldiagram vagy területi diagram költségei nagymértékben függnek attól, hogy milyen mértékben kell egyedi kódolást végezni. Az olyan kiegészítések, mint az eszköztippek, az egyéni animációk és így tovább, egy kicsit növelik a költségeket, de nagyban javítják a felhasználói élményt. A Árak oldal ad egy általános képet. Az Árak oldal általános képet ad. Kérjük azonban, vegye fel velünk a kapcsolatot, hogy egy ingyenes megbeszélést folytassunk egy fejlesztővel, hogy kitaláljuk, mi a legjobb az Ön számára.