13 KiB

Raw Permalink Blame History

Jelentőségteljes vizualizációk készítése


Jelentőségteljes vizualizációk - Sketchnote by @nitya

"Ha elég sokáig kínozod az adatokat, bármit bevallanak" -- Ronald Coase

Az adatelemző egyik alapvető készsége, hogy képes olyan jelentőségteljes adatvizualizációt létrehozni, amely segít megválaszolni a felmerülő kérdéseket. Mielőtt vizualizálnád az adatokat, meg kell győződnöd arról, hogy megtisztítottad és előkészítetted őket, ahogyan azt a korábbi leckékben tetted. Ezután elkezdheted eldönteni, hogyan mutasd be legjobban az adatokat.

Ebben a leckében áttekinted:

Hogyan válaszd ki a megfelelő diagramtípust
Hogyan kerüld el a megtévesztő diagramokat
Hogyan dolgozz a színekkel
Hogyan formázd a diagramokat az olvashatóság érdekében
Hogyan készíts animált vagy 3D diagramokat
Hogyan készíts kreatív vizualizációt

Előadás előtti kvíz

Válaszd ki a megfelelő diagramtípust

A korábbi leckékben különféle érdekes adatvizualizációkat készítettél Matplotlib és Seaborn segítségével. Általánosságban véve a megfelelő diagramtípust az alábbi táblázat alapján választhatod ki a kérdésedhez:

Amit szeretnél:	Amit használnod kell:
Időbeli adattrendek bemutatása	Vonal
Kategóriák összehasonlítása	Oszlop, Kördiagram
Összegek összehasonlítása	Kördiagram, Halmozott oszlop
Kapcsolatok bemutatása	Szórás, Vonal, Facet, Kettős vonal
Eloszlások bemutatása	Szórás, Hisztogram, Dobozdiagram
Arányok bemutatása	Kördiagram, Donut, Waffle

✅ Az adatok összetételétől függően előfordulhat, hogy szöveges adatokat numerikus formátumba kell konvertálnod, hogy a diagram támogassa őket.

Kerüld el a megtévesztést

Még ha az adatelemző gondosan választja is ki a megfelelő diagramot az adatokhoz, számos módon lehet az adatokat úgy megjeleníteni, hogy bizonyos állításokat igazoljanak, gyakran az adatok hitelességének rovására. Számos példa van megtévesztő diagramokra és infografikákra!

🎥 Kattints a fenti képre egy konferenciaelőadásért a megtévesztő diagramokról

Ez a diagram megfordítja az X tengelyt, hogy az igazság ellentétét mutassa, dátum alapján:

Ez a diagram még megtévesztőbb, mivel a szem a jobb oldalra irányul, hogy arra a következtetésre jusson, hogy az idő múlásával a COVID-esetek száma csökkent az egyes megyékben. Valójában, ha alaposan megnézed a dátumokat, rájössz, hogy azokat átrendezték, hogy ezt a megtévesztő csökkenő trendet mutassák.

Ez a hírhedt példa színt ÉS megfordított Y tengelyt használ a megtévesztéshez: ahelyett, hogy arra a következtetésre jutnánk, hogy a fegyveres halálesetek száma megugrott a fegyverbarát jogszabályok elfogadása után, valójában a szem becsapódik, hogy az ellenkezőjét gondolja:

Ez a furcsa diagram azt mutatja, hogyan lehet az arányokat manipulálni, komikus hatással:

Az összehasonlíthatatlan összehasonlítása egy másik árnyékos trükk. Van egy csodálatos weboldal, amely "hamis korrelációkat" mutat be, például a Maine-i válási arány és a margarin fogyasztásának összefüggéseit. Egy Reddit csoport szintén gyűjti az adatok csúnya felhasználását.

Fontos megérteni, hogy a szem milyen könnyen becsapható megtévesztő diagramokkal. Még ha az adatelemző szándéka jó is, egy rossz diagramtípus, például túl sok kategóriát bemutató kördiagram választása megtévesztő lehet.

Színek

A fent említett "Florida fegyveres erőszak" diagramon láthattad, hogy a szín hogyan adhat további jelentést a diagramokhoz, különösen azokhoz, amelyeket nem olyan könyvtárak, mint a Matplotlib és Seaborn terveztek, amelyek különféle ellenőrzött színkönyvtárakkal és palettákkal rendelkeznek. Ha kézzel készítesz diagramot, tanulmányozd egy kicsit a színek elméletét.

✅ Légy tudatában annak, hogy a diagramok tervezésekor az akadálymentesség fontos szempont. Néhány felhasználód színvak lehet - vajon a diagramod jól megjelenik a látássérült felhasználók számára?

Légy óvatos, amikor színeket választasz a diagramodhoz, mivel a szín olyan jelentést közvetíthet, amelyet nem szándékoztál. A "rózsaszín hölgyek" a fent említett "magasság" diagramon kifejezetten "nőies" jelentést hordoznak, ami hozzájárul a diagram furcsaságához.

Bár a színek jelentése különböző lehet a világ különböző részein, és árnyalatuk szerint változhat. Általánosságban véve a színek jelentései a következők:

Szín	Jelentés
piros	erő
kék	bizalom, hűség
sárga	boldogság, óvatosság
zöld	ökológia, szerencse, irigység
lila	boldogság
narancs	élénkség

Ha az a feladatod, hogy egyedi színekkel készíts diagramot, győződj meg arról, hogy a diagramjaid akadálymentesek, és hogy a választott szín összhangban van az általad közvetíteni kívánt jelentéssel.

Diagramok formázása az olvashatóság érdekében

A diagramok nem jelentőségteljesek, ha nem olvashatók! Szánj egy pillanatot arra, hogy megfontold a diagram szélességének és magasságának formázását, hogy jól illeszkedjen az adatokhoz. Ha egy változót (például az összes 50 államot) kell megjeleníteni, mutasd őket függőlegesen az Y tengelyen, ha lehetséges, hogy elkerüld a vízszintesen görgethető diagramot.

Címkézd fel a tengelyeket, adj meg egy jelmagyarázatot, ha szükséges, és kínálj felugró ablakokat az adatok jobb megértése érdekében.

Ha az adataid szövegesek és bőbeszédűek az X tengelyen, döntsd meg a szöveget az olvashatóság érdekében. A Matplotlib 3D ábrázolást kínál, ha az adataid támogatják. Kifinomult adatvizualizációk készíthetők mpl_toolkits.mplot3d használatával.

Animáció és 3D diagramok megjelenítése

A legjobb adatvizualizációk közül ma sok animált. Shirley Wu lenyűgözőeket készített D3-mal, például 'film flowers', ahol minden virág egy film vizualizációja. Egy másik példa a Guardian számára a 'bussed out', egy interaktív élmény, amely vizualizációkat kombinál Greensockkal és D3-mal, valamint egy görgethető cikkformátummal, hogy bemutassa, hogyan kezeli NYC a hajléktalan problémáját azzal, hogy embereket szállít ki a városból.

"Bussed Out: Hogyan mozgatja Amerika a hajléktalanokat" a Guardian oldalán. Vizualizációk: Nadieh Bremer & Shirley Wu

Bár ez a lecke nem elegendő ahhoz, hogy mélyrehatóan megtanítsa ezeket az erőteljes vizualizációs könyvtárakat, próbáld ki a D3-at egy Vue.js alkalmazásban, egy könyvtár segítségével, amely a "Veszedelmes viszonyok" című könyv animált társadalmi hálózatának vizualizációját jeleníti meg.

"Les Liaisons Dangereuses" egy levélregény, vagyis egy sor levelezésként bemutatott regény. Choderlos de Laclos írta 1782-ben, és a francia arisztokrácia két főszereplőjének, a Vicomte de Valmontnak és a Marquise de Merteuilnek a kegyetlen, erkölcsileg romlott társadalmi manővereiről szól a 18. század végén. Mindketten elbuknak a végén, de nem anélkül, hogy jelentős társadalmi károkat okoznának. A regény levelek sorozataként bontakozik ki, amelyeket különböző embereknek írtak a körükben, bosszút tervezve vagy egyszerűen bajt okozva. Készíts egy vizualizációt ezekről a levelekről, hogy felfedezd a narratíva főszereplőit vizuálisan.

Egy webalkalmazást fogsz elkészíteni, amely animált nézetet jelenít meg erről a társadalmi hálózatról. Egy könyvtárat használ, amelyet arra terveztek, hogy hálózatot vizualizáljon Vue.js és D3 segítségével. Amikor az alkalmazás fut, az adatokat a képernyőn húzva átrendezheted.

Projekt: Hálózatot bemutató diagram készítése D3.js segítségével

Ez a lecke mappa tartalmaz egy solution mappát, ahol megtalálhatod a kész projektet referenciaként.

Kövesd az utasításokat a README.md fájlban a kezdő mappa gyökerében. Győződj meg róla, hogy az NPM és a Node.js fut a gépeden, mielőtt telepíted a projekt függőségeit.
Nyisd meg a starter/src mappát. Felfedezel egy assets mappát, ahol található egy .json fájl az összes levéllel a regényből, számozva, "to" és "from" jelöléssel.
Egészítsd ki a kódot a components/Nodes.vue fájlban, hogy engedélyezd a vizualizációt. Keresd meg a createLinks() nevű metódust, és add hozzá a következő beágyazott ciklust.

Ciklussal járd be a .json objektumot, hogy rögzítsd a levelek "to" és "from" adatait, és építsd fel a links objektumot, hogy a vizualizációs könyvtár fel tudja dolgozni:

//loop through letters
      let f = 0;
      let t = 0;
      for (var i = 0; i < letters.length; i++) {
          for (var j = 0; j < characters.length; j++) {
              
            if (characters[j] == letters[i].from) {
              f = j;
            }
            if (characters[j] == letters[i].to) {
              t = j;
            }
        }
        this.links.push({ sid: f, tid: t });
      }

Futtasd az alkalmazásodat a terminálból (npm run serve), és élvezd a vizualizációt!

🚀 Kihívás

Tegyél egy internetes túrát, hogy megtaláld a megtévesztő vizualizációkat. Hogyan csapja be a szerző a felhasználót, és szándékos-e? Próbáld meg kijavítani a vizualizációkat, hogy megmutasd, hogyan kellene kinézniük.

Előadás utáni kvíz

Áttekintés és önálló tanulás

Íme néhány cikk, amelyet olvashatsz a megtévesztő adatvizualizációkról:

https://gizmodo.com/how-to-lie-with-data-visualization-1563576606

http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/

Nézd meg ezeket az érdekes vizualizációkat történelmi eszközökről és tárgyakról:

https://handbook.pubpub.org/

Olvasd el ezt a cikket arról, hogyan fokozhatja az animáció a vizualizációkat:

https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4

Feladat

Készítsd el saját egyedi vizualizációdat

Felelősség kizárása:
Ez a dokumentum az AI fordítási szolgáltatás Co-op Translator segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.

13 KiB Raw Permalink Blame History