ME-C2400 Vuorovaikutustekniikan studio Tiedon visualisointi virikkeitä 1. ryhmätyöhön 20.10.2016 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 valintoja: mitä näytetään, mitä ei? ( ja enemmän kuin miljoona numeroa) 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 20.10.2016 Tassu Takala 2
Visualisoinnin lajeja, millaista tietoa esitetään? Kvalitatiivinen 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 20.10.2016 Tassu Takala 3
Esimerkki: lämpötilamittauksia Numeerinen lähtödata: esitys 2-ulotteisena (=sijainti) taulukkona. Mitä ymmärrystä haetaan? 20.10.2016 Tassu Takala 4
Taulukon rivit diagrammeina anomalia korostettuna 20.10.2016 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ää 20.10.2016 Tassu Takala 6
Keskustelua! 1. Esimerkkejä ja arviointeja visualisoinneista? 2. Mitä tietoa haluaisit tarkastella? 20.10.2016 Tassu Takala 7
HeSa 23.9.2012 20.10.2016 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ä 20.10.2016 Tassu Takala 9
Ikoninen vs. symbolinen? 20.10.2016 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 20.10.2016 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 20.10.2016 Tassu Takala 12
Indeksisen esityksen moniselitteisyys 20.10.2016 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 20.10.2016 Tassu Takala 14
Esimerkki datan runsaudesta: koko Internet http://www-personal.umich.edu/~mejn/networks/ 20.10.2016 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 20.10.2016 Tassu Takala 16
Esimerkki reduktiosta 25 poliittista profiilikysymystä è samaa / eri mieltä 20.10.2016 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!! 20.10.2016 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. 20.10.2016 Tassu Takala 19
Esimerkki: metrokartta 20.10.2016 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 20.10.2016 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://li129-107.members.linode.com/ accessibility/design/accessible-printdesign/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 20.10.2016 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 20.10.2016 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.bewitched.com/marketmap.html Ben Fry: Organic Information Design http://acg.media.mit.edu/people/fry/thesis/ online social networks http://homes.cs.washington.edu/~jheer//projects/vizster/ Gapminder: world trends http://www.gapminder.org/ taiteellista visualisointia sanoista http://www.wordle.net/ 20.10.2016 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/ Information is Beautiful http://www.informationisbeautiful.net Data-aineistoja Yleisiä tietolähteitä http://kdd.ics.uci.edu/ http://linkeddata.org/ http://rs.io/100-interesting-data-sets-for-statistics/ Suomen avoimia tietoaineistoja https://www.avoindata.fi/data/fi/dataset Earth data http://data.giss.nasa.gov/ 20.10.2016 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 selvitystyötä, analyysiä, koodausta, interaktiota deadlines tapaaminen ohjaajan kanssa mahd. pian 1 viikon kuluttua (to 27.10.) suunnitelman esittely lopputulokset 3 vkon päästä pe 11.11. ensi viikon luennoilla: ryhmäohjelmointi, työn organisointi tekniikkaa ideoittenne toteuttamiseksi ideoinnin avuksi: *) tehkää piirroksia! *) luovuus = kyky nähdä asioita eri tavalla kuin ilmiselvästi 20.10.2016 Tassu Takala 26