T Studio 4. Tiedon visualisointi. virikkeitä 1. harjoitukseen Tassu Takala 1

Transkriptio

1 T Studio 4 Tiedon visualisointi virikkeitä 1. harjoitukseen Tassu Takala 1

2 Visualisoinnin tarkoitus Tiedon havainnollistaminen the purpose of visualization is insight, not numbers hyvä kuva kertoo enemmän kuin tuhat sanaa Tärkeiden tietojen korostaminen ( ja enemmän kuin miljoona numeroa) valintoja: mitä näytetään, mitä ei? eettinen varoitus: katsoja manipuloitavissa! Käyttötilanteita uutisointi: tapahtuman konteksti, ilmiön laajuus tutkimus: havaitut trendit ja anomaliat, ennusteet (esim. sääkartta) päätöksenteko: mikä asia tarvitsee muutosta Tassu Takala 2

3 Kvalitatiivinen Visualisoinnin lajeja, millaista tietoa esitetään? käsitteitä, erillisiä havaintoja Kvantitatiivinen mitattavia suureita (dimensiot vaihtelevia) Geograafinen sijainnin mukaan organisoituva tieto Selittävä ilmiön syy-seuraus-suhteita Exploratiivinen (tutkiva) haetaan merkityksiä kokeilevasti yrittäen usein interaktiivista Tassu Takala 3

4 Esimerkki: lämpötilamittauksia Numeerinen lähtödata: esitys 2-ulotteisena (=sijainti) taulukkona. Mitä ymmärrystä haetaan? Tassu Takala 4

5 Taulukon rivit diagrammeina anomalia korostettuna Tassu Takala 5

6 Spatiaalinen esitystapa auttaa tunnistamaan, missä kiinnostava data on 3D-kuva helppo hahmottaa, mutta vaikea lukea tarkasti johdannaistieto (käyrät) tarkempaa kuin alkuperäinen tieto saattaa olla vääristävää Tassu Takala 6

7 Keskustelua! 1. Esimerkkejä ja arviointeja visualisoinneista? 2. Mitä tietoa haluaisit tarkastella? Tassu Takala 7

8 HeSa Tassu Takala 8

9 Semiotiikkaa Esitystapojen kolmijako [Peirce] 1. iconic (yhdennäköisyys, välitön samankaltaisuus) 2. symbolic (sovittu merkitys, merkkijärjestelmä) 3. indexical (yhteys johdettavissa assosiaatioilla) Visualisoinnit usein yhdistelmiä näistä Tassu Takala 9

10 Ikoninen vs. symbolinen? Tassu Takala 10

11 Kuvalliset symbolit pictogram = yhdennäköisyyteen perustuva ideogram = sovittu symboli "No Dogs!" sign in Spain. The dog illustration is a pictograph. The red circle and bar is an ideogram representing the idea of "no" or "not allowed." Teaser: visuaalisen lukutaidon tehtävä J &type=1&theater Tassu Takala 11

12 Symbolinen järjestelmä: aakkosto Greek Name Transliteration Latin Spelling Roman Name Αθηνη Athênê Athena Minerva 木 mù "tree" 林 lín "grove" 森 sēn "forest" logogram Tassu Takala 12

13 Indeksisen esityksen moniselitteisyys Tassu Takala 13

14 Visualisointi prosessina data valikointi, järjestäminen muunnos geometrisiksi kuvioiksi katselu (näkökulma) näyttö usein dataa liikaa valikointi välttämätöntä geometrinen muoto ja järjestys ratkaisevia sille, onko tiedosta mahdollista havaita haluttuja piirteitä näkökulman valinta ohjaa lopullista hahmottamista Tassu Takala 14

15 Esimerkki datan runsaudesta: koko Internet Tassu Takala 15

16 Valikointi, dimension reduction poimitaan muutama dimensio kerrallaan muuttuja, taulukon sarake, tms. muodostetaan uusia merkityksiä faktorianalyysi, pääkomponenttianalyysi, yms. klusterointi toisiaan muistuttavat dimensiot yhdistetään esim. viinisanasto, tunneilmaisut Tassu Takala 16

17 Esimerkki reduktiosta 25 poliittista profiilikysymystä è samaa / eri mieltä Tassu Takala 17

18 E.Tuften klassikkokirjat: Datan muuntaminen geometriaksi numeerinen esitys vain pieni määrä kerrallaan! symbolit (glyyfit) markkeri mittari säädin kaaviot l. diagrammit tilastot (viiva/pylväs/piirakka) kytkennät kokoonpanot spatiaalinen sijoittelu asteikot (=koordinaatisto) karttapohja kvantitatiivinen koodaus sijainti, pituus pinta-ala väri osien väliset yhteydet pieni etäisyys (klusterit) yhdistävät viivat (verkko) samat ominaisuudet (väri, muoto, asento, koko ) hahmopsykologian perussäännöt!! Tassu Takala 18

19 Lähde Hahmolakeja Alue (area) ihminen hahmottaa yleensä pienemmän alueen kuvioksi ja suuremman taustaksi. Läheisyys (proximity) lähellä toisiaan olevat visuaaliset ärsykkeet mielletään helposti yhteenkuuluviksi. Esimerkiksi painikkeet, jotka liittyvät samaan toimintoon tai tehtävään on hyvä asettaa lähekkäin. Samaten esimerkiksi lomakkeen ja siihen liittyvien painikkeiden tulee olla lähekkäin. Samankaltaisuus (similarity) myös muoto, koko ja väri voivat toimia visuaalisina koodeina muodoiltaan tai väreiltään samankaltaiset katsotaan yhteenkuuluviksi. Jatkuvuus (continuity) yhteneväinen viiva koetaan kuvioksi. Tuttuus (familiarity) tutut alueet koetaan kuvioina. Sulkeutuvuus (closure) jos visuaaliset ärsykkeet näyttävät ikään kuin sulkevan sisäänsä jonkin alueen, niin katsoja mieltää ko. alueen erilliseksi alueeksi. Ihmisellä on taipumus myös täydentää hahmoja "kokonaisiksi". Valiomuotoisuus (good shape) kuviot pyritään ymmärtämään yksinkertaisina ja symmetrisinä ts. ne pyritään ryhmittelemään niin, että niistä muodostuu säännöllinen, kokonainen ja symmetrinen hahmo todennäköisemmin kuin epäsymmetrinen. Yhteinen liike (common fate) sellaiset kohteet, jotka näyttävät liikkuvan samaan suuntaan samalla nopeudella, mielletään kuuluvan samaan ryhmään. Liikehavainnon synnyttämiseksi riittää myös se, että staattiset hahmot seuraavat toisiaan sarjassa Tassu Takala 19

20 Esimerkki: metrokartta Tassu Takala 20

21 Kuvioiden esittäminen, katselu tärkein asia aina näkyville riittävän suuri koko tilaa ympärille sekottumista vältettävä ei päällekkäisiä osia yhdistävät viivat eivät leikkaa 3D-perspektiivi vahva vaikutelma usein heikentää luettavuutta varo artefaktoja esim. väriasteikon kvantisoituminen Bad Graphs: The Stealth Virus / html Tassu Takala 21

22 Värien ja liikkeen käytöstä Värit yhteensopivat värit rauhoittavat värikylläisyys, etäisyys väriavaruudessa varoitusvärejä: punainen, keltamusta vierekkäiset värit vaikuttavat toisiinsa Processing: color è relativity muista myös värirajoitteiset accessibility/design/ accessible-print-design/ effective-color-contrast Animaatio synkronoitu liike yhdistää kuvan osan korostaminen pehmentää transitioita ikkunan avaaminen (Mac) turha liike häiritsee stop ei spektrin ääripäitä vierekkäin Tassu Takala 22

23 Laajennuksia Ei tarvitse rajoittua vain visuaaliseen aistiin auralization / "auditory display" datan esittämistä äänen avulla esim. maanjäristysten kuuntelu 1000 x nopeutettuna auditoriset käyttöliittymät haptiikka tuntoaistille annettavia ärsykkeitä käytössä lähinnä virtuaaliympäristöissä (esineiden koskettaminen, materiaalin tuntu) ja koneiden ohjaamoissa (ohjaustehosteet) myös esim. sokeiden lukulaitteissa Tärkeitä näkövammaisille Tassu Takala 23

24 Esimerkkejä, tietolähteitä Periodic Table of Visualization Methods information visualisation interactive visualisation %20visualization.pdf Atlas of Cyberspaces Map of the Market Ben Fry: Organic Information Design online social networks Gapminder: world trends taiteellista visualisointia sanoista Tassu Takala 24

25 jatkuu Map Catalog 40 Maps That Will Help Data-aineistoja Yleisiä tietolähteitä Earth data Valtion talousarvioesitykset Visualisointikurssin materiaalia Tassu Takala 25

26 OLO-ryhmät ongelman hahmottaminen sovellus: minkä tiedon/ilmiön haluan visualisoida? kuinka saan tarvittavan data-aineiston? millä peruselementeillä esitän informaatiota? kuinka näytän dataa ruudulla? työnjako, kuka tekee ideoinnin avuksi: selvitystyötä, esseet *) analyysiä ja koodausta tehkää piirroksia! deadlines tapaaminen tuutorin kanssa mahd. pian (tänään/huomenna) tällä viikolla (vko 39) päätös tavoitteista lopputulokset pe ensi kerralla: tekniikkaa ideoittenne toteuttamiseksi *) luovuus = kyky nähdä asioita eri tavalla kuin ilmiselvästi Tassu Takala 26