12 KiB

Raw Blame History

Merkityksellisten visualisointien luominen


Merkitykselliset visualisoinnit - Sketchnote by @nitya

"Jos kidutat dataa tarpeeksi kauan, se tunnustaa mitä tahansa" -- Ronald Coase

Yksi data-analyytikon perustaidosta on kyky luoda merkityksellinen datavisualisointi, joka auttaa vastaamaan kysymyksiin. Ennen datan visualisointia on varmistettava, että se on puhdistettu ja valmisteltu, kuten aiemmissa oppitunneissa tehtiin. Tämän jälkeen voit alkaa päättää, miten dataa kannattaa esittää.

Tässä oppitunnissa käsitellään:

Kuinka valita oikea kaaviotyyppi
Kuinka välttää harhaanjohtavia kaavioita
Kuinka käyttää värejä
Kuinka muotoilla kaaviot luettavuuden parantamiseksi
Kuinka rakentaa animoituja tai 3D-kaavioita
Kuinka luoda luovia visualisointeja

Ennakkokysely

Valitse oikea kaaviotyyppi

Aiemmissa oppitunneissa kokeilit erilaisten datavisualisointien luomista Matplotlibin ja Seabornin avulla. Yleisesti ottaen voit valita oikeanlaisen kaavion kysymyksesi perusteella seuraavan taulukon avulla:

Tarve:	Käytä:
Näytä datan trendit ajan myötä	Viivakaavio
Vertaa kategorioita	Pylväskaavio, piirakka
Vertaa kokonaismääriä	Piirakka, pinottu pylväskaavio
Näytä suhteita	Hajontakaavio, viiva, facet, kaksoisviiva
Näytä jakaumia	Hajontakaavio, histogrammi, laatikko
Näytä osuuksia	Piirakka, donitsi, vohveli

✅ Datan rakenteesta riippuen saatat joutua muuntamaan tekstin numeeriseksi, jotta kaavio tukee sitä.

Vältä harhaanjohtamista

Vaikka data-analyytikko valitsisi oikean kaavion oikealle datalle, on silti monia tapoja esittää dataa harhaanjohtavasti, usein datan kustannuksella. Harhaanjohtavia kaavioita ja infografiikoita on lukuisia esimerkkejä!

🎥 Klikkaa yllä olevaa kuvaa nähdäksesi konferenssipuheen harhaanjohtavista kaavioista

Tämä kaavio kääntää X-akselin näyttääkseen totuuden vastakohdan päivämäärän perusteella:

Tämä kaavio on vielä harhaanjohtavampi, sillä katsojan huomio kiinnittyy oikealle ja hän saattaa päätellä, että COVID-tapaukset ovat vähentyneet eri maakunnissa ajan myötä. Todellisuudessa päivämäärät on järjestetty uudelleen antamaan harhaanjohtava laskeva trendi.

Tämä tunnettu esimerkki käyttää väriä JA käännettyä Y-akselia harhauttamiseen: sen sijaan, että asekuolemat olisivat lisääntyneet asemyönteisen lainsäädännön jälkeen, katsoja saattaa erehtyä luulemaan päinvastaista.

Tämä outo kaavio näyttää, kuinka mittasuhteita voidaan manipuloida, huvittavin seurauksin:

Vertailu, joka ei ole vertailukelpoista, on toinen hämärä temppu. On olemassa loistava verkkosivusto, joka esittelee 'näennäisiä korrelaatioita', kuten Mainen avioeroprosentin ja margariinin kulutuksen. Reddit-ryhmä kerää myös huonoja datan käyttöesimerkkejä.

On tärkeää ymmärtää, kuinka helposti silmä voi tulla harhaanjohdetuksi huonoilla kaavioilla. Vaikka data-analyytikon tarkoitus olisi hyvä, huonon kaaviotyypin valinta, kuten piirakkakaavio, jossa on liian monta kategoriaa, voi olla harhaanjohtavaa.

Värit

Edellä mainitussa 'Floridan aseväkivalta' -kaaviossa näit, kuinka väri voi tuoda lisämerkityksen kaavioihin, erityisesti sellaisiin, joita ei ole suunniteltu Matplotlibin ja Seabornin kaltaisten kirjastojen avulla, jotka sisältävät erilaisia tarkistettuja värikirjastoja ja -paletteja. Jos teet kaavion käsin, tutustu hieman väriteoriaan.

✅ Ole tietoinen, kun suunnittelet kaavioita, että saavutettavuus on tärkeä osa visualisointia. Jotkut käyttäjistäsi saattavat olla värisokeita - näkyykö kaaviosi hyvin näkövammaisille käyttäjille?

Ole varovainen valitessasi värejä kaaviollesi, sillä väri voi välittää merkityksiä, joita et ehkä tarkoittanut. 'Pinkit naiset' yllä olevassa 'pituus'-kaaviossa välittävät selvästi 'naisellisen' merkityksen, joka lisää kaavion outoutta.

Vaikka värien merkitys voi vaihdella eri puolilla maailmaa ja muuttua sävyn mukaan, yleisesti ottaen värien merkitykset sisältävät:

Väri	Merkitys
punainen	voima
sininen	luottamus, uskollisuus
keltainen	ilo, varovaisuus
vihreä	ekologia, onni, kateus
violetti	ilo
oranssi	eloisuus

Jos sinua pyydetään rakentamaan kaavio mukautetuilla väreillä, varmista, että kaaviosi ovat sekä saavutettavia että valitsemasi väri vastaa haluamaasi merkitystä.

Kaavioiden muotoilu luettavuuden parantamiseksi

Kaaviot eivät ole merkityksellisiä, jos ne eivät ole luettavia! Käytä hetki kaavion leveyden ja korkeuden muotoiluun, jotta se skaalautuu hyvin datasi kanssa. Jos yksi muuttuja (kuten kaikki 50 osavaltiota) täytyy näyttää, esitä ne pystysuunnassa Y-akselilla, jos mahdollista, jotta vältät vaakasuunnassa vieritettävän kaavion.

Merkitse akselit, tarjoa selite tarvittaessa ja lisää työkaluja datan parempaan ymmärtämiseen.

Jos datasi on tekstuaalista ja X-akselilla pitkää, voit kallistaa tekstiä paremman luettavuuden saavuttamiseksi. Matplotlib tarjoaa 3D-plottausta, jos datasi tukee sitä. Kehittyneitä datavisualisointeja voidaan tuottaa mpl_toolkits.mplot3d-kirjaston avulla.

Animaatio ja 3D-kaavioiden näyttö

Jotkut parhaista datavisualisoinneista nykyään ovat animoituja. Shirley Wu on tehnyt upeita visualisointeja D3:lla, kuten 'film flowers', jossa jokainen kukka on elokuvan visualisointi. Toinen esimerkki Guardianille on 'bussed out', interaktiivinen kokemus, joka yhdistää visualisointeja Greensockin ja D3:n kanssa sekä artikkelin, joka kertoo, kuinka NYC käsittelee kodittomien ongelmaa kuljettamalla ihmisiä pois kaupungista.

"Bussed Out: How America Moves its Homeless" Guardianilta the Guardian. Visualisoinnit: Nadieh Bremer & Shirley Wu

Vaikka tämä oppitunti ei riitä opettamaan näitä tehokkaita visualisointikirjastoja syvällisesti, kokeile D3:ta Vue.js-sovelluksessa käyttämällä kirjastoa, joka näyttää visualisoinnin kirjasta "Dangerous Liaisons" animoituna sosiaalisena verkostona.

"Les Liaisons Dangereuses" on kirjeromaanimuotoinen teos, joka koostuu kirjeistä. Kirjoittanut Choderlos de Laclos vuonna 1782, se kertoo kahden ranskalaisen aristokraatin, Vicomte de Valmontin ja Marquise de Merteuilin, moraalittomista sosiaalisista juonitteluista 1700-luvun lopulla. Molemmat kohtaavat lopulta tuhon, mutta eivät ennen kuin aiheuttavat suurta sosiaalista vahinkoa. Romaani etenee kirjeiden kautta, joissa juonitaan kostoa tai yksinkertaisesti aiheutetaan ongelmia. Luo näiden kirjeiden visualisointi löytääksesi narratiivin keskeiset hahmot visuaalisesti.

Toteutat verkkosovelluksen, joka näyttää animoidun näkymän tästä sosiaalisesta verkostosta. Sovellus käyttää kirjastoa, joka on rakennettu verkoston visualisointiin Vue.js:n ja D3:n avulla. Kun sovellus on käynnissä, voit siirtää solmuja näytöllä ja järjestellä dataa uudelleen.

Projekti: Rakenna kaavio, joka näyttää verkoston D3.js:llä

Tämän oppitunnin kansiossa on solution-kansio, josta löydät valmiin projektin viitteeksi.

Seuraa README.md-tiedoston ohjeita aloituskansion juurihakemistossa. Varmista, että NPM ja Node.js ovat asennettu koneellesi ennen projektin riippuvuuksien asentamista.
Avaa starter/src-kansio. Löydät assets-kansion, jossa on .json-tiedosto, joka sisältää kaikki kirjeet romaanista, numeroituina, 'to' ja 'from' -merkinnöillä.
Täydennä koodi components/Nodes.vue-tiedostossa, jotta visualisointi toimii. Etsi metodi nimeltä createLinks() ja lisää seuraava sisäkkäinen silmukka.

Käy läpi .json-objekti, jotta saat kirjeiden 'to' ja 'from' -datan ja rakenna links-objekti, jotta visualisointikirjasto voi käyttää sitä:

//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 });
      }

Käynnistä sovelluksesi terminaalista (npm run serve) ja nauti visualisoinnista!

🚀 Haaste

Tutki internetiä löytääksesi harhaanjohtavia visualisointeja. Kuinka tekijä harhauttaa käyttäjää, ja onko se tarkoituksellista? Yritä korjata visualisoinnit näyttämään, miltä niiden pitäisi näyttää.

Jälkikysely

Kertaus ja itseopiskelu

Tässä muutamia artikkeleita harhaanjohtavista datavisualisoinneista:

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

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

Tutustu näihin kiinnostaviin visualisointeihin historiallisista aineistoista ja esineistä:

https://handbook.pubpub.org/

Lue tämä artikkeli siitä, kuinka animaatio voi parantaa visualisointeja:

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

Tehtävä

Rakenna oma mukautettu visualisointi

Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.

12 KiB Raw Blame History