Add-Ons

Eszköztárak

Bármilyen diagramhoz vagy grafikonhoz adhatunk tooltippeket. Ezek különösen akkor hasznosak, ha sok adatpont van (például egy szórásdiagramban). Még kisebb adathalmazok esetén is segítenek a diagram áttekinthetetlenségének csökkentésében, lehetővé téve a felhasználók számára, hogy az általános mintákra összpontosítsanak.

Hasznosak olyan összetett diagramokban is, ahol a diagram különböző részei az adathalmaz különböző aspektusait közvetítik, és ez nem biztos, hogy nyilvánvaló az ilyen típusú diagramokat nem ismerő felhasználók számára. Például ebben a Sunburst-diagramban a felhasználók az egérrel a szegmensek fölé mehetnek, hogy láthassák mind a mögöttes adatpontot, mind az adatpont kontextusát. Ebben az esetben a Sunburst-diagram az orvosi kezeléseket típusra, az érintett szervre és a beteg biztosítási státuszára bontja. Ezek az információk a kijelző alján jelennek meg, és úgy változnak, ahogy a felhasználó az egérrel az egyes szegmensek fölé megy.

A D3 egyik hatalmas erőssége, hogy nagyfokú rugalmasságot kínál. Az eszköztip tartalmazhat bármilyen adatot, amely jelen van az adathalmazban, kontextuális szöveget, vagy akár egy teljesen más adathalmazból származó értékeket is. Például ez a Sankey megmutatja a felhasználóknak, hogy a csomópontok a menekültek teljes számát, míg a vonalak az egyes származási helyek (ebben az esetben egy ország) és célállomások (ebben az esetben egy amerikai állam) között mozgó menekültek számát jelölik. Ez a szöveg bármilyen nyelven lehet, ami nagyban segíti a lokalizációt.

Ha két vagy több adatkészletet használunk a megjelenítésben, az eszköztippek megjeleníthetik az ezek közötti összehasonlításokat. Például megjeleníthetik az idei és a tavalyi értéket, vagy különböző régiókra vonatkozó adatkészleteket. Ezzel szemben egyetlen adatkészlet esetén a súgók használhatók konfidenciaintervallumok, százalékos értékek vagy más, az adatpontokhoz kapcsolódó statisztikai információk megjelenítésére, segítve a felhasználókat az adatok megbízhatóságának értékelésében.

Az eszköz-tippek másik előnye, hogy szórakoztatóak! Fokozzák az interaktivitást, mivel lehetővé teszik a felhasználók számára, hogy a grafikonokkal foglalkozzanak, és a saját feltételeik szerint vizsgálják meg az adatokat.

Nagyítások

A nagyítások lehetővé teszik a felhasználók számára, hogy egy grafikon vagy diagram bizonyos területeire ráközelítsenek, hogy közelebbről megvizsgálhassák az adatpontokat és a trendeket. Ez különösen nagy adathalmazok esetén hasznos. Akkor is hasznos, ha a felhasználókat az adathalmaz különböző aspektusai érdeklik: például egyes felhasználók egy adott időszakra szeretnének összpontosítani.

A nagyítások lehetővé teszik a felhasználók számára az adathalmaz különböző részei közötti részletes összehasonlítást is. Interaktívan vizsgálhatják az adatokat, ha ráközelítenek egy területre, majd egy másik területre mozognak. Ez segít nekik abban, hogy az összefüggéseket, a kiugró értékeket és a mintázatokat világosabban lássák.

A zoomolás másik előnye, hogy a felhasználók kisebb eszközökkel, például okostelefonokkal is láthatják a teljes adatkészletet, mégis képesek a szükséges részleteket látni. Az okostelefon-felhasználók hozzászoktak ahhoz, hogy a kijelzőt a "csippentés" gesztusával nagyítsák.

A nagyítás a látássérültek számára is javítja a hozzáférhetőséget.

Ecsetek

Az ecsetelés a nagyításhoz hasonlóan működik, mivel a felhasználók számára lehetőséget nyújt az adathalmaz egy részével való interakcióra. Azonban ahelyett, hogy a diagram egy részét nagyítaná, ez a terület nem változtatja meg a méretét. Az ecsetelt területet más módon is jelezheti, például színváltoztatással.

Az adatok szűrésére ecset használható - például a felhasználók az egér mozgatásával ecsetelhetik a területi grafikon x-tengelyét. Az ecsetelt terület ezután megjelenhet a kijelző egy másik részén. Az ecset használatának egy másik módja egy különálló diagram hozzáadása, amely ugyanazokat az adatokat más méretarányban mutatja. Ebben a helyzetben az ecset a nagyításhoz hasonlóan működik. Használata azonban egyszerűbb lehet, mivel az eredeti grafikon méretei nem változnak.

Animációk

Az animációk számos módon segítenek. Egy egyszerű oszlopdiagram esetében például a sávok lassan csúszhatnak felfelé, ahelyett, hogy azonnal megjelennének. Ez nagyon keveset tesz hozzá a diagram információtartalmához, de érdekesebbé teszi azt a felhasználók számára.

Az animációk komolyabb szerepet játszanak, amikor átmenetekhez használják őket. Például ez a Sankey-diagram több év adatait mutatja be. Ahogy a felhasználó a csúszkával egyik évről a másikra lép, a csomópontok relatív mérete változik. Azért mozognak, mert méretük szerint vannak elrendezve. Az animáció nélkül a változás megrázó lenne, és nehéz lenne fenntartani az "objektum állandóságát". A felhasználót például érdekelheti, hogyan változik évről évre az egy adott országból érkező menekültáradat (ebben az esetben a menekülteké). Ha ez a csomópont zökkenőmentes átmenet nélkül ugrálna, nehéz lenne ezt megtenni.

Egy másik példa az átmenetre a Ez a Tortadiagram. Amikor egy szegmens fölé egérrel mozgatjuk, kissé kimozdul. A sima átmenet használatával ez a mozgás természetesnek tűnik, és segít fenntartani a pite metaforáját. Enélkül a kördiagram ezen szakasza egyik pozícióból a másikba ugrana. Ugyanebből az okból kifolyólag az animációk különösen jól működnek idősoros adatok, például a tőzsdei ketyerék értékeinek megjelenítésekor. Az előnye itt is az, hogy a szem könnyebben nyomon követheti egy adott érték változását.

Ha animációt használunk az adathalmazok közötti átmenetre, és ezeket az átmeneteket egy felhasználói felület vezérli, mint például a <TransLink>ez a csúszka</TransLink>, a felhasználó szinte videoképernyőhöz hasonlóan fedezheti fel az értékeket.

Színek

Mivel a D3 grafikonok és diagramok JavaScript segítségével készülnek, a színeket egy függvény segítségével lehet beállítani. Ez azt jelenti, hogy a színeket olyan módon lehet használni, ami más adatvizualizációs könyvtárakban nem lehetséges.

A színek legkézenfekvőbb felhasználási módja a különböző adatkészletek megkülönböztetése - például ez a Sávdiagram több hasonló adatkészlet adatait tartalmazza. Ha az egyes adatkészletekhez különböző színeket használunk, és egy legendában megmagyarázzuk e színek jelentését, lehetőség van arra, hogy ezeket egy diagramon belül kombináljuk.

A szín használható a hasonló értékkészletek csoportosítására is. Például ez a Napkitörés diagram az adatok hierarchiáját mutatja. Minden egyes gyűrű a hierarchia egy-egy szintjét jelképezi. A színek használatával csoportosíthatjuk az azonos szinthez tartozó értékeket, és a legendában megmagyarázhatjuk őket.

A D3 másik előnye, hogy a szín telítettségét és árnyalatát is lehet változtatni. Például ezen a Sunburst-diagramon (a felső példa) a szín telítettsége az egyes szakaszokban változik, míg az egy gyűrűben lévő összes szakaszon ugyanaz a szín van. Ebben az esetben az intenzitás egyszerűen véletlenszerű, hogy az egyes szektorok jobban megkülönböztethetők legyenek (hasonlítsuk össze azzal a példával, amelyben egy gyűrű minden egyes szektorának ugyanaz a színárnyalata és ugyanaz a telítettsége). A telítettség azonban a mögöttes adatponttal is összefügghet. Ebben az esetben jobb, ha a szektorok nem méret szerint vannak elrendezve, különben a kisebb szektorokat túl nehéz lesz megkülönböztetni.

Egy másik példa arra, amikor a színeket a diagram áttekinthetőbbé tételére használták, ez a Sankey-diagram. A felső két példában egy színt használunk a kiindulási csomópontok, egy másik szín pedig a célcsomópontok ábrázolására. Ezenkívül a szín sűrűsége az egyes csomópontok méretét jelzi. Ugyanezeket a színeket használjuk az összekötő vonalaknál is. Ezért nyilvánvaló kapcsolat van a csomópontok és az összekötő vonalak által képviselt értékek között. Az utolsó két példában két színt használunk, és a mögöttes adatértékeket e két szín relatív értékei reprezentálják. Ez néha egyértelműbb lehet, különösen akkor, ha az adatértékek közötti különbségek finomak.

Végül, a színeket néha egyszerűen csak a diagram részeinek elkülönítésére használhatjuk, anélkül, hogy mögöttes jelentésük lenne. Ez a helyzet a Napkitörés-diagram harmadik példájában. A színeket kifejezetten úgy választottuk meg, hogy a Sunburst-diagramban a szektorok közötti határok jól láthatóak legyenek. Ez különösen akkor hasznos, ha az értékek kicsik és a szektorok nagyon keskenyek.

A szín egy másik felhasználási módja az adatpontok egy adott halmazának megkülönböztetése. Ezt kombinálhatjuk egy ecsettel (lásd fentebb). A grafikonon ecsettel áthúzva a felhasználók szűrhetik az adatpontokat. A szűrt értékek más színnel jeleníthetők meg, ami külön legendához kapcsolható.

A színek ecset nélkül is hasznosak lehetnek bizonyos értékek kiemeléséhez. A D3.js segítségével például a kiugró értékeket sajátos színűvé tehetjük, vagy különböző színeket használhatunk a negatív és pozitív értékekhez. Az adatvizualizációk sokkal áttekinthetőbbé válnak, ha a színeket intelligensen használjuk, különösen, ha sok adatpont van. A színkódolás arra is használható, hogy megmutassa az adatvizualizáció általános szerkezetét.

A színek is segíthetnek az interakciókban. Egy adatpont, sáv vagy vonal színe megváltozhat, ha az egérrel ráhúzza, ezzel is hangsúlyozva, hogy az adott pont, sáv vagy vonal ki lett jelölve.

Adatháló

Egy D3js-diagram vagy -grafikon adatai általában három forrásból származnak. Ha az adatok valószínűleg nem változnak túl gyakran, akkor azokat egy JSON vagy CSV fájlban tárolhatjuk a szerveren. Ha az adatok egy helyi adatbázisból származnak, akkor azt az adatbázist közvetlenül kell frissíteni, vagy egy egyéni interfésszel, vagy egy adatbázis-eszközzel, például a DBeaverrel. Ezt mi tudjuk Önnek beállítani.

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.

Az adatháló egyik változata az űrlap: ez hasonlóan működik, mint a kapcsolatfelvételi űrlap egy weboldalon. Ez megfelelőbb lehet, ha az adatokat olyan munkatársaknak kell beírniuk, akik nem ismerik az adattáblákat.

UI elemek

Bár a D3.js korlátozott számú felhasználói felületet kínál, jobb, ha ezeket egy komponenskönyvtár, például a MUI segítségével vagy egyszerű HTML-ben kódoljuk.

A leghasznosabb UI-elemek a rádiógombok és a jelölőnégyzetek. Ezeket néha összekeverik. A rádiógombok, mint például az ebben a Soros oszlopdiagram ábrázoltak, lehetővé teszik a felhasználók számára, hogy válasszanak egymást kölcsönösen kizáró lehetőségek közül: ebben az esetben választhatnak egyetlen adatkészletet, amely egyszerű oszlopdiagramként jelenik meg, vagy több adatkészletet, amely soros oszlopdiagramként jelenik meg. Ugyanakkor az adatok megjelenítési módjának megváltoztatására is használhatók. Ebben a Sunburst adatvizualizációban a rádiógombok befolyásolják a színhasználat módját az adatkészlet különböző aspektusainak kiemelésére.

A jelölőnégyzetek viszont lehetővé teszik a felhasználók számára, hogy a lehetőségek bármelyikét kiválasszák: ebben az esetben a lehetőségek nem zárják ki egymást. A jelölőnégyzet-példában a <Link>vonaldiagram adatmegjelenítés</Link> csak egy adathalmazt, bármely két adathalmazt vagy mindhármat megjelenítheti. Ez rendkívül hasznos, ha a felhasználóknak konkrét összehasonlításokat kell végezniük adathalmazpárok között: például összehasonlíthatják a szívműtétek és a májműtétek értékeit, és az áttekinthetőség érdekében eltávolíthatják a lépműtétek értékeit.

A D3.js adatvizualizációk javításához hasznos másik felhasználói felületelem a kapcsoló. Ezt akkor használjuk, ha a diagram két állapot egyikében lehet, vagy ha a felhasználóknak lehetőséget szeretnénk adni arra, hogy az adatvizualizáció egy részét kikapcsolják az áttekinthetőség javítása érdekében. Ebben a példában egy váltókapcsolót használunk a <Link> vonaldiagram és a területi diagram közötti váltáshoz</Link>.

Végül csúszkák is használhatók. Ezek különösen jól működnek, ha az adatvizualizáció különböző időszakokból származó adatkészleteket tartalmaz. Lehetővé teszik a felhasználók számára, hogy intuitív módon előre-hátra mozogjanak az idővonalon, mint ebben a Sankey adatvizualizációban.