|
2 weeks ago | |
---|---|---|
.. | ||
solution | 3 weeks ago | |
starter | 3 weeks ago | |
README.md | 2 weeks ago | |
assignment.md | 3 weeks ago | |
correlation-analysis.ipynb | 2 weeks ago |
README.md
Ustvarjanje smiselnih vizualizacij
![]() |
---|
Smiselne vizualizacije - Sketchnote by @nitya |
"Če dovolj dolgo mučiš podatke, ti bodo priznali karkoli" -- Ronald Coase
Ena osnovnih veščin podatkovnega znanstvenika je sposobnost ustvarjanja smiselne vizualizacije podatkov, ki pomaga odgovoriti na vprašanja, ki jih imate. Preden vizualizirate svoje podatke, morate poskrbeti, da so očiščeni in pripravljeni, kot ste to storili v prejšnjih lekcijah. Nato lahko začnete razmišljati, kako najbolje predstaviti podatke.
V tej lekciji boste pregledali:
- Kako izbrati pravi tip grafikona
- Kako se izogniti zavajajočim grafom
- Kako delati z barvami
- Kako oblikovati grafe za boljšo berljivost
- Kako ustvariti animirane ali 3D rešitve za grafe
- Kako ustvariti kreativno vizualizacijo
Predlekcijski kviz
Izberite pravi tip grafikona
V prejšnjih lekcijah ste eksperimentirali z ustvarjanjem različnih zanimivih vizualizacij podatkov z uporabo knjižnic Matplotlib in Seaborn. Na splošno lahko izberete pravi tip grafikona glede na vprašanje, ki ga zastavljate, s pomočjo te tabele:
Potrebujete: | Uporabite: |
---|---|
Prikazati trende skozi čas | Črta |
Primerjati kategorije | Stolpec, Krog |
Primerjati skupne vrednosti | Krog, Zloženi stolpec |
Prikazati odnose | Razpršenost, Črta, Faset, Dvojna črta |
Prikazati porazdelitve | Razpršenost, Histogram, Škatla |
Prikazati deleže | Krog, Obroč, Vafelj |
✅ Glede na sestavo vaših podatkov boste morda morali pretvoriti besedilo v številčne vrednosti, da bo določen grafikon deloval.
Izogibajte se zavajanju
Tudi če podatkovni znanstvenik skrbno izbere pravi grafikon za prave podatke, obstaja veliko načinov, kako lahko podatki prikazujejo napačno sliko, pogosto na račun resničnosti podatkov. Obstaja veliko primerov zavajajočih grafov in infografik!
🎥 Kliknite zgornjo sliko za konferenčno predavanje o zavajajočih grafih
Ta grafikon obrne os X, da prikaže nasprotno od resnice, glede na datum:
Ta grafikon je še bolj zavajajoč, saj oko pritegne desno stran, kar daje vtis, da so se primeri COVID-a skozi čas zmanjšali v različnih okrožjih. Če pa natančno pogledate datume, ugotovite, da so bili preurejeni, da ustvarijo zavajajoč trend upadanja.
Ta zloglasni primer uporablja barvo IN obrnjeno os Y za zavajanje: namesto da bi sklepali, da so se smrti zaradi orožja povečale po sprejetju zakonodaje, ki podpira orožje, je oko zavedeno, da misli, da je resnica ravno obratna:
Ta nenavaden grafikon prikazuje, kako se lahko deleži manipulirajo, kar vodi do smešnih rezultatov:
Primerjava neprimerljivega je še ena senčna taktika. Obstaja čudovita spletna stran, ki prikazuje 'lažne korelacije', kot so 'dejstva', ki povezujejo stopnjo ločitev v Maineu in porabo margarine. Skupina na Redditu prav tako zbira grde primere uporabe podatkov.
Pomembno je razumeti, kako zlahka lahko oko zavedemo z zavajajočimi grafi. Tudi če je namen podatkovnega znanstvenika dober, lahko izbira napačnega tipa grafikona, kot je krožni grafikon s preveč kategorijami, vodi v zavajanje.
Barve
V zgornjem grafu o 'nasilju s strelnim orožjem na Floridi' ste videli, kako lahko barva doda dodatno plast pomena grafom, še posebej tistim, ki niso zasnovani z uporabo knjižnic, kot sta Matplotlib in Seaborn, ki vključujeta različne preverjene barvne knjižnice in palete. Če grafikon izdelujete ročno, si vzemite čas za študij teorije barv.
✅ Zavedajte se, da je pri oblikovanju grafov dostopnost pomemben vidik vizualizacije. Nekateri vaši uporabniki so lahko barvno slepi - ali vaš grafikon dobro deluje za uporabnike z motnjami vida?
Bodite previdni pri izbiri barv za svoj grafikon, saj lahko barva prenese pomen, ki ga morda ne nameravate. 'Rožnate dame' v zgornjem grafu o 'višini' prenašajo izrazito 'ženski' pomen, ki prispeva k nenavadnosti samega grafikona.
Medtem ko se pomen barv lahko razlikuje v različnih delih sveta in se spreminja glede na odtenek, splošno gledano vključuje:
Barva | Pomen |
---|---|
rdeča | moč |
modra | zaupanje, zvestoba |
rumena | sreča, previdnost |
zelena | ekologija, sreča, zavist |
vijolična | sreča |
oranžna | živahnost |
Če morate ustvariti grafikon z lastnimi barvami, poskrbite, da bodo vaši grafi dostopni in da barva, ki jo izberete, ustreza pomenu, ki ga želite prenesti.
Oblikovanje grafov za berljivost
Grafi niso smiselni, če niso berljivi! Vzemite si trenutek za razmislek o prilagoditvi širine in višine grafikona, da se dobro prilega vašim podatkom. Če je treba prikazati eno spremenljivko (na primer vseh 50 zveznih držav), jih prikažite navpično na osi Y, če je mogoče, da se izognete grafu, ki zahteva horizontalno drsenje.
Označite osi, zagotovite legendo, če je potrebno, in ponudite orodne nasvete za boljše razumevanje podatkov.
Če so vaši podatki besedilni in obsežni na osi X, lahko besedilo nagnite za boljšo berljivost. Matplotlib omogoča 3D grafiko, če vaši podatki to podpirajo. S pomočjo mpl_toolkits.mplot3d
lahko ustvarite sofisticirane vizualizacije podatkov.
Animacija in prikaz 3D grafov
Nekatere najboljše vizualizacije podatkov danes so animirane. Shirley Wu je ustvarila izjemne vizualizacije z D3, kot so 'film flowers', kjer vsak cvet predstavlja vizualizacijo filma. Drug primer za Guardian je 'bussed out', interaktivna izkušnja, ki združuje vizualizacije z Greensock in D3 ter format članka za prikaz, kako NYC obravnava problem brezdomcev z njihovim prevozom iz mesta.
"Bussed Out: Kako Amerika premika svoje brezdomce" iz Guardiana. Vizualizacije: Nadieh Bremer & Shirley Wu
Čeprav ta lekcija ni dovolj poglobljena, da bi vas naučila teh močnih knjižnic za vizualizacijo, poskusite uporabiti D3 v aplikaciji Vue.js z uporabo knjižnice za prikaz vizualizacije knjige "Nevarne zveze" kot animirano socialno omrežje.
"Les Liaisons Dangereuses" je epistolarni roman, predstavljen kot serija pisem. Napisal ga je Choderlos de Laclos leta 1782 in pripoveduje zgodbo o zlobnih, moralno pokvarjenih družbenih manevrih dveh protagonistov francoske aristokracije v poznem 18. stoletju, vikonta de Valmonta in markize de Merteuil. Oba na koncu propadeta, vendar ne brez povzročanja velike družbene škode. Roman se odvija kot serija pisem, napisanih različnim ljudem v njihovih krogih, z namenom maščevanja ali zgolj povzročanja težav. Ustvarite vizualizacijo teh pisem, da odkrijete glavne akterje zgodbe, vizualno.
Dokončali boste spletno aplikacijo, ki bo prikazala animiran pogled na to socialno omrežje. Uporablja knjižnico, ki je bila ustvarjena za vizualizacijo omrežja z uporabo Vue.js in D3. Ko aplikacija deluje, lahko premikate vozlišča po zaslonu, da premešate podatke.
Projekt: Ustvarite grafikon za prikaz omrežja z D3.js
Ta mapa lekcije vključuje mapo
solution
, kjer lahko najdete dokončan projekt za referenco.
-
Sledite navodilom v datoteki README.md v korenski mapi začetnega projekta. Pred namestitvijo odvisnosti projekta poskrbite, da imate na računalniku nameščen NPM in Node.js.
-
Odprite mapo
starter/src
. V njej boste našli mapoassets
, kjer je .json datoteka z vsemi pismi iz romana, oštevilčenimi, z oznakami 'to' in 'from'. -
Dokončajte kodo v
components/Nodes.vue
, da omogočite vizualizacijo. Poiščite metodocreateLinks()
in dodajte naslednjo zanko.
Prebrskajte .json objekt, da zajamete podatke 'to' in 'from' za pisma ter zgradite objekt links
, da ga lahko knjižnica za vizualizacijo uporabi:
//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 });
}
Zaženite svojo aplikacijo iz terminala (npm run serve) in uživajte v vizualizaciji!
🚀 Izziv
Raziskujte internet in odkrijte zavajajoče vizualizacije. Kako avtor zavaja uporabnika in ali je to namerno? Poskusite popraviti vizualizacije, da pokažete, kako bi morale izgledati.
Po-lekcijski kviz
Pregled in samostojno učenje
Tukaj je nekaj člankov o zavajajočih vizualizacijah podatkov:
https://gizmodo.com/how-to-lie-with-data-visualization-1563576606
http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/
Oglejte si te zanimive vizualizacije zgodovinskih virov in artefaktov:
Preberite ta članek o tem, kako animacija lahko izboljša vaše vizualizacije:
https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4
Naloga
Ustvarite svojo lastno vizualizacijo
Omejitev odgovornosti:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco Co-op Translator. Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.