Bevezetés

A DynamicD3 egyéni adatvizualizációkat kínál a D3.js segítségével. Együttműködünk Önnel, hogy segítsünk kiválasztani az adatok megjelenítésének leghatékonyabb módját: ez lehet Sávdiagramok, vonaldiagramok, Pie Charts, Sankey Diagramok vagy egzotikusabb adatvizualizációk, mint a kloropleths, Bubble Charts vagy Sunburst Diagramok.

A D3.js adatvizualizációk számos Add Ons funkciót tartalmazhatnak, mint például tool-tips, zoom, mouse-over és animációk. Ezek segítenek a felhasználóknak az adatok intuitívabb megértésében, és magával ragadó élményt nyújtanak, ami statikus adatvizualizációkkal nem lehetséges. Egyéni felhasználói felületet is létrehozhatunk - rádiógombok, jelölőnégyzetek, csúszkák vagy kapcsolók segítségével -, amelyek még tovább bővítik az interaktív élmények körét.

Vagy egyszerű JavaScriptet adunk, amelyet egyenesen a weboldalába illeszthet, vagy egy React komponenst. Egy egyszerű, ingyenes weboldalt állítunk fel demónak. Opcióként létrehozhatunk egy adatrácsot, így könnyen frissítheti adatait.

A D3.js használhat statikus JSON vagy CSV fájlból származó adatokat, vagy vehet adatokat egy API-ból. Egy adatrácsot is létrehozhatunk, így könnyen frissíthetjük az adatokat.

Sávdiagramok

Az oszlopdiagramok jellemzően kategorikus adatokhoz használatosak, mint például ez a példa, amely egy nagy kórházban három meghatározott szerven végzett műtétek számát hasonlítja össze.

Vegye figyelembe, hogy a sávdiagram nem azonos a hisztogrammal, még ha hasonlóan is néznek ki. A hisztogram nem tartalmaz kategorikus adatokat, például országokat (amelyekben egy adatpont egyértelműen az egyik vagy a másik kategóriába tartozik). Inkább olyan adatokat mutat, amelyek egy folytonosságot alkotnak, de különböző tartományokba, úgynevezett bins-ekbe vannak sorolva. Például egy olyan adatsor, amelyben az x-tengely egy bizonyos ponttól való távolságot mutat, tartományokba sorolható. Ezek a tartományok azonban önkényesek, és jellemzően az adatok egyértelmű megjelenítése érdekében kerülnek kiválasztásra.

A D3.js használható oszlopdiagram vagy hisztogram készítéséhez, és bármelyik ábrázolhat egy vagy több adathalmazt. Folyamatos adatok ábrázolására is használható. Ezt azonban célszerűbb vonaldiagramban vagy szórásdiagramban megjeleníteni.

Vonaldiagramok

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).

A vonaldiagramok különösen hasznosak több, egymással valamilyen módon összefüggő adathalmaz bemutatására. Ezek az adatkészletek jellemzően ugyanazt az x-tengelyt használják, de különböző skálákkal és különböző y-tengelyekkel rendelkezhetnek. Különösen hasznosak a különböző adatkészletek tendenciáinak megfigyelésére (például annak összehasonlítására, hogy a különböző országokban mikor van csúcspont a megbetegedésekben). Ez a példa egy felhasználói felületet használ az adatkészletek különböző kombinációi közötti váltáshoz. Vegyük észre, hogy a D3.js automatikusan képes a függőleges tengely méretarányát az adatok változásának megfelelően beállítani.

A vonaldiagramok másik erőssége a trendek hatékony elemzésének képessége. Olyan görbét lehet rajzolni, amely minden egyes ponton áthalad, illetve amely rövid vagy hosszabb távú trendeket mutat. A fentebb linkelt példában egy felhasználói felületet adtak hozzá, hogy a felhasználók különböző görbék segítségével különböző módon vizsgálhassák az adathalmazt.

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

Tortadiagramok

A Tortadiagramban az egyes szeletek szöge arányos az általuk képviselt mennyiséggel. A Pite Diagramok és a Donut Diagramok ugyanazok, kivéve, hogy a Donut Diagramok közepén egy lyuk van, amely adatokat tartalmazhat. A Donut-diagramoknak több gyűrűje is lehet, amelyek az adatértékek hierarchiáját mutatják; ezt a fajta diagramot azonban Napkitörési diagram-nak nevezik.

A kördiagramokat gyakran használják az újságokban. Bár ismerősek és könnyen érthetőek, nem a legjobb módja az arányos vagy kategorikus adatok bemutatásának, mert nehéz összehasonlítani a különböző értékeket (ellentétben az oszlopdiagrammal, ahol a téglalapok magassága könnyen összehasonlítható.). Hasznosak azonban akkor, ha az adatok egy összérték arányát képviselik. Az arányok oszlopdiagramokkal is megjeleníthetők, de ez intuitívan kevésbé nyilvánvaló.

A pite metaforája kibővíthető a pite egy szeletének kihúzásával. Ez történhet statikusan vagy egérrel felfelé mutató effekt segítségével, ahogyan az a Pite Chart oldalon látható. Ezt nevezzük felbontott kördiagramnak. Részletesebb információt a felbontott résznél lehet adni.

Sunburst diagramok

A Sunburst diagramok a többszintű Tortadiagramok egy formája. Néha radiális fatérképeknek is nevezik őket, mivel az adatok ugyanolyan hierarchikus szerkezetűek, mint egy hagyományos fatérkép.

Ez a fajta adatvizualizáció a hierarchiát az egyes kategóriák csomópontjaira szeletelt gyűrűk sorozatán keresztül mutatja be. Minden egyes gyűrű a hierarchia egy szintjének felel meg, a központi kör a gyökércsomópontot jelképezi, és a hierarchia ettől kifelé halad. Például Ebben a példában a művelettípusok vannak felosztva. Az első gyűrű a műveleteket az érintett szerv szerint osztja fel. A következő gyűrű az egyes részeket a kezelés típusa szerint osztja fel (konzervatív, műtét, transzplantáció vagy gyógyszerek), a következő gyűrű pedig azt mutatja, hogy a betegeknek volt-e biztosításuk vagy sem. Az egérrel való áthúzás az alján lévő kijelzőn mutatja a mögöttes értékeket. Ez azt jelenti, hogy a felhasználók a kijelzőn mozogva vizsgálhatják az adatokat. Például kíváncsiak lehetnek arra, hogy a biztosítási fedezetük alapján hogyan különbözik a vesekezelésben részesülő betegek aránya.

A szín használható hierarchikus csoportosítások vagy konkrét kategóriák kiemelésére. A fenti példában a felhasználó megváltoztathatja a színsémát, hogy az adathalmaz különböző aspektusait kiemelje. Az első példában az egyes gyűrűkhöz különböző színtartományokat használunk. Ez megkönnyíti az egyes gyűrűkben megjelenített adatok megértését, ugyanakkor egyértelművé teszi a szakaszhatárokat. Ez azonban nem működik nagy adathalmazok esetén. Ebben az esetben egyértelműbb, ha egy adott gyűrűben az összes szekciónak ugyanaz az árnyalata van. Végül, bizonyos esetekben véletlenszerű színeket is lehet használni. Ezek megnehezítik a hierarchia egyes szintjeinek jelentőségének megértését, de megkönnyítik a különböző szektorok áttekintését. A Sunburst példában a felhasználói felület megjelenítése váltogat ezen alternatívák között.

Sankey diagram

A Sankey-diagramokat olyan áramlási folyamatok ábrázolására használják, mint például a pénz áramlása egy szervezeten belül (ahogyan az egy pénzügyi kimutatásban látható), az energia vagy nyersanyagok áramlása egy sor ipari folyamaton keresztül, vagy egy absztraktabb eszköz, például az információ áramlása. Az egyes csomópontok magassága vagy szélessége az adott csomóponton áthaladó áramlás teljes mennyiségét, az egyes csomópárok közötti vonalak vastagsága pedig az e csomópontok között áthaladó áramlás mennyiségét jelöli. A színeket lehet használni, akár az áramlás mennyiségének bemutatására (például színátmenettel), akár a folyamat más aspektusának bemutatására, mint például ez a Sankey-diagram, amely színekkel szemlélteti a menekültek áramlását.

Az egyik terület, ahol a Sankeyket gyakran használják, az energiaágazat. Például megmutathatják a földgáz forrását országonként, azt, hogy milyen úton jut el a célállomásra (csővezeték, hajó stb.), majd azt, hogy hogyan használják fel (végfelhasználók). Az ilyen diagramok hasznosak a politikai döntéshozók számára, mivel rávilágítanak azokra a területekre, ahol a hatékonyság javítható.

A Sankey-diagramok különösen intuitív módon mutatják be az időbeli változásokat. Ez a Sankey-diagram a különböző származási országokból az Egyesült Államokba érkező menekültek áramlását mutatja be egy bizonyos időszak alatt. A csúszka segítségével a felhasználók mozoghatnak az idővonalon, a sima átmenetek pedig megkönnyítik a csomópontok nyomon követését, ahogy azok fontossága növekszik vagy csökken.

Chloropleth

A koroprotektúrák színekkel mutatják be, hogy egy változó hogyan változik egy földrajzi területen. Hasonlítanak a hőtérképekhez, azonban ez utóbbiaktól eltérően a térképet geopolitikai alegységekre, például országokra, államokra, tartományokra vagy megyékre osztják.

A kloropleth-ban használt értékeknek figyelembe kell venniük a területek különböző méreteit. Például a különböző országok mérete között óriási a különbség, ezért nincs értelme az országokat csak a népességük alapján színezni. Ehelyett ezeket az adatokat a régiók között "normalizálni" kellene a népsűrűség, nem pedig az abszolút népességszám alapján. Mindkét megjelenítési mód esetében a sötétebb vagy intenzívebb színek általában magasabb értékeket, míg a világosabb vagy halványabb színek alacsonyabb értékeket jeleznek.

Sajnos a valós adatok jellemzően nem oszlanak természetes kategóriákba. Például egy olyan kloropleth, amelyben egy szín intenzitása arányos a népsűrűséggel, működhetne, ha a különböző régiók népsűrűsége között hasonló különbség van (például ugyanazon amerikai állam különböző megyéi között). Az adatok azonban gyakran tartalmaznak olyan értékeket, amelyek nagyságrendekkel nagyobbak, mint ugyanazon adatsor más értékei. Szerencsére a D3.js gazdag skálakészlettel rendelkezik. Bizonyos esetekben a logaritmikus skála megfelelőbb lehet: ez jól mutatja a kis különbségeket, de a sokkal nagyobb különbségeket is. Más esetekben egy színt lehetne használni egy bizonyos küszöbérték feletti vagy alatti értékek megjelenítésére. Ez a nagyfokú rugalmasság az, ami a D3.js-t olyan erőteljes eszközzé teszi az adatvizualizációk készítéséhez.

A D3.js nem csak segít az adatok méretezésében, hanem lehetővé teszi számunkra, hogy a térképvetítések széles skáláját használjuk: ezek nagyban befolyásolják az adatok megjelenítését. A más könyvtárakkal készített kloroplethák gyakran használnak szabványos vetületeket, például a Mercator-vetületet, ami a világ bizonyos részein nagy torzulásokhoz vezethet. Ez kevésbé jelent problémát, ha a térkép kisebb területeket ábrázol, például az Egyesült Királyság megyéit, vagy ha a megjelenített területek mind hasonló szélességi fokon helyezkednek el.

Végül, lehetséges két különálló (de összefüggő) adatot használni, mindkettő más-más színskálával. Ezt nevezzük kétdimenziós Cloropleth-nek.

Buborék diagram

A buborékdiagramok olyanok, mint a szórásdiagramok, amelyekben az adatokat körök helyettesítik. Míg a szórásdiagram csak a pontok helyzetét és színét használhatja az információ ábrázolására, a buborékdiagram vízszintes és függőleges dimenziókkal is rendelkezik. Ez teszi a buborékdiagramokat különösen alkalmassá a többdimenziós összefüggések megjelenítésére.

Ha minden körhöz csak egy plusz információt kell megjeleníteni, azt a kör területével lehet ábrázolni. Ez azonban problémás lehet, mivel a felhasználók hajlamosak a körök relatív méretét az átmérőjük, nem pedig a területük alapján megítélni. Fontos, hogy ezt a legendában világossá tegyük.

A buborékdiagramok kevésbé jól működnek, ha sok adatpont van, és ha az adatok nagy tartományban vannak. Ha túl sok adatpont van, a kijelző zsúfoltnak tűnhet, és a buborékok átfedhetik egymást. Ha az adathalmazban nagy értéktartomány van, előfordulhat, hogy a kisebb buborékok nem láthatók jól. Ezek a problémák bizonyos mértékig kiküszöbölhetők az egérrel való interakciók használatával, amelyek több információt, például a mögöttes adatpont pontos értékét adják meg.

A buborékdiagramokkal kapcsolatos utolsó probléma a súlyozott átlag illúziója: a buborékok mérete befolyásolja az adatpont x- és y-értékének érzékelését. Ezt a torzulást figyelembe kell venni az x- és y-értékek átlagának becslésénél.

A negatív értékeket megjelenítő buborékdiagramok létrehozhatók a negatív értékeket jelképező buborékok közepén elhelyezett szimbólummal, a pozitív és negatív értékek különböző színű ábrázolásával vagy akár különböző formákkal is. A D3.js esetében ez a rugalmassági szint lehetséges, de a legtöbb adatvizualizáló könyvtár esetében ez nem így van.