T-111.2211 Studio 4 Tiedon visualisointi virikkeitä 1. harjoitukseen 23.9.2013 Tassu Takala 1
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 23.9.2013 Tassu Takala 2
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 23.9.2013 Tassu Takala 3
Esimerkki: lämpötilamittauksia Numeerinen lähtödata: esitys 2-ulotteisena (=sijainti) taulukkona. Mitä ymmärrystä haetaan? 23.9.2013 Tassu Takala 4
Taulukon rivit diagrammeina anomalia korostettuna 23.9.2013 Tassu Takala 5
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ää 23.9.2013 Tassu Takala 6
Keskustelua! 1. Esimerkkejä ja arviointeja visualisoinneista? 2. Mitä tietoa haluaisit tarkastella? 23.9.2013 Tassu Takala 7
HeSa 23.9.2012 23.9.2013 Tassu Takala 8
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ä 23.9.2013 Tassu Takala 9
Ikoninen vs. symbolinen? 23.9.2013 Tassu Takala 10
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 https://www.facebook.com/photo.php?fbid=587327241308458&set=a. 450955688278948.96839.100000935625977&type=1&theater 23.9.2013 Tassu Takala 11
Symbolinen järjestelmä: aakkosto Greek Name Transliteration Latin Spelling Roman Name Αθηνη Athênê Athena Minerva 木 mù "tree" 林 lín "grove" 森 sēn "forest" logogram 23.9.2013 Tassu Takala 12
Indeksisen esityksen moniselitteisyys 23.9.2013 Tassu Takala 13
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 23.9.2013 Tassu Takala 14
Esimerkki datan runsaudesta: koko Internet http://www-personal.umich.edu/~mejn/networks/ 23.9.2013 Tassu Takala 15
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 23.9.2013 Tassu Takala 16
Esimerkki reduktiosta 25 poliittista profiilikysymystä è samaa / eri mieltä 23.9.2013 Tassu Takala 17
E.Tuften klassikkokirjat: http://www.edwardtufte.com/tufte/books_vdqi 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!! 23.9.2013 Tassu Takala 18
Lähde http://matwww.ee.tut.fi/hmopetus/sistuot/luennot/luento10/sistuotluento10.pdf 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. 23.9.2013 Tassu Takala 19
Esimerkki: metrokartta 23.9.2013 Tassu Takala 20
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 http://www.informationmanagement.com/issues/ 20050101/1016296-1.html 23.9.2013 Tassu Takala 21
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 http://www.lighthouse.org/ 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 23.9.2013 Tassu Takala 22
Laajennuksia Ei tarvitse rajoittua vain visuaaliseen aistiin auralization / "auditory display" datan esittämistä äänen avulla http://www.icad.org/ 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 23.9.2013 Tassu Takala 23
Esimerkkejä, tietolähteitä Periodic Table of Visualization Methods http://www.visual-literacy.org/periodic_table/periodic_table.html information visualisation http://www.infovis.net/printmag.php?num=0&lang=2#2005 interactive visualisation http://www.tml.hut.fi/opinnot/t-111.210/2005/materiaalia/interactive %20visualization.pdf Atlas of Cyberspaces http://personalpages.manchester.ac.uk/staff/m.dodge/cybergeography/atlas/atlas.html Map of the Market http://www.smartmoney.com/marketmap/ Ben Fry: Organic Information Design http://acg.media.mit.edu/people/fry/thesis/ online social networks http://jheer.org/vizster/ Gapminder: world trends http://www.gapminder.org/ taiteellista visualisointia sanoista http://www.wordle.net/ 23.9.2013 Tassu Takala 24
jatkuu Map Catalog http://mapcatalog2008.blogspot.fi/ 40 Maps That Will Help http://twistedsifter.com/2013/08/maps-that-will-help-you-make-sense-of-the-world/ Data-aineistoja Yleisiä tietolähteitä http://kdd.ics.uci.edu/ http://linkeddata.org/ Earth data http://data.giss.nasa.gov/ Valtion talousarvioesitykset http://users.ics.tkk.fi/kaip/vis/talousarvioesitys2010.html Visualisointikurssin materiaalia http://www.cis.hut.fi/opinnot/t-61.5010/2008/project 23.9.2013 Tassu Takala 25
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 11.10. ensi kerralla: tekniikkaa ideoittenne toteuttamiseksi *) luovuus = kyky nähdä asioita eri tavalla kuin ilmiselvästi 23.9.2013 Tassu Takala 26