Vuorovaikutteiset visualisoinnit Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto 1 Tänään Dynaamiset visualisoinnit olennaista vuorovaikutteinen käsittely Tiedon sisällön esittäminen tehokkaasti dynaamiset kyselyt dokumenttilinssi Tiedon rakenteen esittäminen tehokkaasti puukartat kalansilmänäkymät tötteröpuut ja nokkapuut perspektiiviseinät Visualisoinnit, joissa voi liikkua kolmiulotteisesti Tavoitteena tiedon nopeampi löytyminen Näkeminen auttaa ymmärtämistä (I see!) 2 Saila.Ovaska@uta.fi 1
Informaation visualisointi Shneiderman yhdistää suorakäyttöisyyden erityisesti vuorovaikutteisiin informaation visualisointeihin Informaation visualisointi Compact graphical presentation and user interface for manipulating large numbers of items (10 2-10 6 ), possibly extracted from far larger datasets. Enables users to make discoveries, decisions, or explanations about patterns (trend, cluster, gap, outlier...), groups of items, or individual items. 3 Dynaaminen tiedon visualisointi Sovellusalueita: Dynaamiset kyselyt: haun rajaus liukusäätimillä, tulokset heti nähtävissä Suurten tietomäärien visualisointi: tiivistys ja havainnollistus käyttämällä visuaalisia koodauksia Nykysijainnin näyttäminen isossa aineistossa: esimerkiksi kartan lukeminen on vaikeaa, jos et näe kokonaisuutta, vain sen kohdan, johon olet tarkentanut Rakenteiden hahmottaminen: kohteiden liikuttelu animaation avulla, erilaiset vääristystekniikat 4 Saila.Ovaska@uta.fi 2
Esimerkki: HomeFinder Ben Shneiderman, Dynamic queries for visual information seeking. IEEE Software 11, 6 (November 1994), 70-77. http://www.cs.umd.edu/hcil/spotfire/ 5 Dynaamiset kyselyt: tavoitteita Kyselymahdollisuuksien visualisointi ei tarvitse muistaa tapoja tehdä kysely Kyselyn tulosten visualisointi yhdellä näytöllä Kyselyn nopea, inkrementaalinen ja peruutettavissa oleva ohjaus Valinta osoittamalla, ei kirjoittamalla Välitön ja jatkuva palaute Portaittainen tarkennus: tulosnäytössä näkyvän tiedon tarkkuus riippuu kerralla näytettävän tiedon määrästä, ja tietoon voi porautua syvemmälle 6 Saila.Ovaska@uta.fi 3
Esimerkki: FilmFinder Keskeisiä käsitteitä: Dynaamiset kyselyt Tähtikenttä näyttö Tiukat kytkennät (tight couplings) 7 FilmFinder: tarkempi näkymä 8 Saila.Ovaska@uta.fi 4
FilmFinder: valinta 9 Dynaamiset kyselyt Valintojen tekeminen tietystä arvojoukosta Erilaiset säätimet keskeisiä 10 Saila.Ovaska@uta.fi 5
Dynaamiset kyselyt: kaupallinen sovellus Spotfire Visualisoitava data tuodaan ohjelmaan tietokannasta tai taulukkolaskennasta Visualisointi osin automaattista Käyttäjä voi valita tähtikenttäesityksen akseleina olevat muuttujat Java-toteutus, liitettävissä myös esim. verkkosivuille http://spotfire.tibco.com/ http://spotfire.tibco.com/tour/ 11 Kouriintuntuvat ohjaimet Tangible query interfaces HomeFinder kouriintuntuvien ohjainten avulla toteutettuna: Pöytäpinnalla karttanäkymä oikealla, parametrit (ja tietokantahaun tulospisteparvi) vasemmalla Haun parametrit (tässä) kiekkoja - RFID-tagi - nimilappu Kiekkopesän ympärillä LED-näyttö, joka antaa palautetta asetuksista Voidaan yhdistellä eri tavoin ja kääntää eri asentoihin Näytön X ja Y määräytyvät kahden vasemmanpuoleisen kiekon perusteella muitakin kiekkoja tai muunmuotoisia hakutekijöitä voi olla käytössä Vrt. Ullmer, Ishii & Jacob, Physically constrained tokens for manipulating database queries. Proc. INTERACT 03. 12 Saila.Ovaska@uta.fi 6
RAKENTEIDEN JA HIERARKIAN VISUALISOINTI 13 Tiedon rakenteen visualisointi Erilaisia keinoja visualisoida rakennetta Esimerkiksi levyllä olevien kansioiden ja tiedostojen hierarkiaa Konkreettinen ongelma: mitkä tiedostot tai kansiot kuluttavat eniten levytilaa? Ratkaisu visualisoinnin avulla: puukartta (treemap) Visualisointi-idean isä Ben Shneiderman http://www.cs.umd.edu/hcil/treemap-history/ 14 Saila.Ovaska@uta.fi 7
http://www.cs.umd.edu/hcil/treemap-history/ Puukartan perusidea Käytetään käytettävissä oleva tila Jaetaan tila puun eri osille puun muodon mukaisesti Esimerkki (jos vain jaetaan tasasuhteessa) Lisäksi levytilaesimerkissä solmujen painon (esim. hakemiston koon) huomiointi ja pinta-alojen suhteuttaminen vastaavasti 16 Saila.Ovaska@uta.fi 8
Puukarttoja käytännössä The SmartMoney Map of the Market http://www.smartmoney.com/marketmap/ http://talousarvio.juuso.org/ 17 FOKUS JA KONTEKSTI -ONGELMA 18 Saila.Ovaska@uta.fi 9
Fokus ja konteksti -ongelma Kun tarkennetaan yksityiskohtaan, kokonaisuutta on vaikea hahmottaa Esimerkiksi pitkässä dokumentissa kerralla näkyy vain 1 sivu Dokumenttilinssi-ideassa nykysivun konteksti näkyy perspektiivinäkymässä Yksi ratkaisu: Dokumenttilinssi George G. Robertson, Jock Mackinlay, The Document Lens. Proceedings of the ACM SIGGRAPH Symposium on User Interface Software and Technology (UIST'93), 101-108. 19 Perspektiivin muuttaminen erilaisia vääristystekniikoita 20 Saila.Ovaska@uta.fi 10
Kalansilmänäkymän laskeminen Yksinkertainen kalansilmänäkymä DOI(x,f) = API(x) - D(x,f) DOI: Degree Of Interest API: A Priori Interest D: Distance Sarkar & Brown, Graphical fisheye views. Communications of the ACM 37, 12 (Dec. 1994), 73-84. 21 Luonnollisempi kalansilmänäkymä solmun koko ja sijainti visualisoinnissa riippuu solmun koosta ja sijainnista normaalikoordinaatistossa, fokuksen sijainnista ja API-funktiosta API = A Priori Interest, erikseen asetettavissa oleva kiinnostus 22 Saila.Ovaska@uta.fi 11
Kalansilmänäkymän sovelluksia Kartalla erilaisia vääristystekniikoita Video http://www.open-video.org/details.php?videoid=8143 23 Kalansilmänäkymän sovelluksia 2 Kalansilmänäkymän avulla toteutettuja valikoita Macintosh dock Travelman: valikko pienessä laitteessa http://www.youtube.com/watch?v=bpvaqthtc3s Viereinen kuva: http://www.cs.umd.edu/hcil/fisheyemenu/ (viikkoharjoituksissa) 24 Saila.Ovaska@uta.fi 12
Paljon erilaisia puu- ja verkkovisualisointeja Hyperbolinen puu Laskennassa käytetään hyperbolista geometriaa Visualisoitava rakenne esitetään ympyrän kehän sisällä, kiinnostuskohde lähellä keskipistettä Alipuun paino (solmujen lukumäärä) määrää sen, minkä kokoisen sektorin alipuu saa ympyrästä. Visualisoinnissa voi näkökulmaa muuttaa saumattomasti tuotteistanut: http://www.inxight.com/ nyttemmin SAP http://www.youtube.com/watch?v=pwpze3rf55o John Lamping et al., A Focus+Context Technique Based on Hyperbolic Geometry for Visualizing Large Hierarchies. CHI'95, http://www.acm.org/sigchi/chi95/electronic/documnts/papers/jl_bdy.htm 25 Käytännön visualisointihaasteita: kartta-aineistot Kartoissa paljon erilaista (taso)tietoa millaisia tietoja käyttäjä tarvitsee? http://www.paikkatietoikkuna.fi/web/fi/kartta 2- ja 3-ulotteiset karttakäyttöliittymät Esimerkiksi Google Earth (kiertomatkat) vertaa Googlemaps (Maailman)kartan päälle luodut visualisoinnit lisäesim. http://www.gapminder.org/ Flickr-kuvat kartalla http://www.flickr.com/map/ 26 Saila.Ovaska@uta.fi 13
Visualisointitarvetta käytännössä Tutkimustiedon havainnollistus Gapminder-esitys, puhujan päällä http://www.gapminder.org/videos/200-years-that-changed-theworld-bbc/ Sosiaalisessa mediassa esim. Flickr Tagipilviä (ruudunkaappaus 21.11.11) Verkostoja, yhteyksiä ihmisten välillä, tapahtumia, esim. http://www.guardian.co.uk/uk/interactive/2011/aug/24/rio ts-twitter-traffic-interactive 2,5 miljoonaa twitter-postitusta visualisoitu 27 Visualisoinnit: yhteenveto Isojen tietomassojen hallinta suoravaikutteisesti vaatii laskentatehoa, muistia, isoa näyttölaitetta, Käyttäjälle suoravaikutteisuus on tärkeää antaa välittömästi tiedon siitä, millaista käsiteltävä aineisto on visuaalinen palaute toimii (ahaa!-elämykset) auttaa huomaamaan aineistosta löytyviä korrelaatioita osana hypoteesien generoimista tarkempaa tilastollista analyysiä varten Moniulotteisen tietomassan analysoinnin välineet osana esim. yritysjohdon työtä (vrt. Spotfire) opiskelijan / professorin / diplomaatin työtä (vrt. Gapminder) tiedonhakua mistä tahansa aihepiiristä ja kerätyn oman aineiston analyysiä 28 Saila.Ovaska@uta.fi 14