Vuorovaikutteiset visualisoinnit Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto Tässä luentosetissä 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 Visualisoinnit, joissa voi liikkua kolmiulotteisesti Tavoitteena tiedon nopeampi löytyminen Näkeminen auttaa ymmärtämistä (I see!) 1 2 Informaation visualisointi Dynaaminen tiedon 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. 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 3 4 Esimerkki: HomeFinder 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 Ben Shneiderman, Dynamic queries for visual information seeking. IEEE Software 11, 6 (November 1994), 70-77. http://www.cs.umd.edu/hcil/spotfire/ 5 6 Saila.Ovaska@uta.fi 1
Esimerkki: FilmFinder FilmFinder: tarkempi näkymä Keskeisiä käsitteitä: Dynaamiset kyselyt Tähtikenttä näyttö Tiukat kytkennät (tight couplings) 7 8 FilmFinder: valinta Dynaamiset kyselyt Valintojen tekeminen tietystä arvojoukosta Erilaiset säätimet keskeisiä 9 10 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 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ä 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 Ullmer, Ishii & Jacob, Physically constrained tokens for manipulating database queries. Proc. INTERACT 03. Vrt. 12 Saila.Ovaska@uta.fi 2
Tiedon rakenteen visualisointi RAKENTEIDEN JA HIERARKIAN 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 13 http://www.cs.umd.edu/hcil/treemap-history/ 14 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 http://www.cs.umd.edu/hcil/treemap-history/ 16 Puukarttoja käytännössä The SmartMoney Map of the Market http://www.smartmoney.com/marketmap/ http://talousarvio.juuso.org/ FOKUS JA KONTEKSTI -ONGELMA 17 18 Saila.Ovaska@uta.fi 3
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ä Perspektiivin muuttaminen Yksi ratkaisu: Dokumenttilinssi erilaisia vääristystekniikoita 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 20 Kalansilmänäkymän laskeminen Luonnollisempi kalansilmänäkymä 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 solmun koko ja sijainti visualisoinnissa riippuusolmunkoostajasijainnista normaalikoordinaatistossa, fokuksen sijainnista ja API-funktiosta API = A Priori Interest, erikseen asetettavissa oleva kiinnostus 22 Kalansilmänäkymän sovelluksia Kalansilmänäkymän sovelluksia 2 Kartalla erilaisia vääristystekniikoita Brown, Meehan, and Sarkar, Browsing graphs using a fish-eye view. 1993. Video: http://www.open-video.org/details.php?videoid=8143 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/ 23 24 Saila.Ovaska@uta.fi 4
Paljon erilaisia puu- ja verkkovisualisointeja, esim. 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 Visualisointitarvetta käytännössä Visualisoinnit: yhteenveto Tutkimustiedon havainnollistus Gapminder-esitys, puhujan päällä http://www.gapminder.org/videos/200-years-that-changed-the-world-bbc/ Sosiaalisessa mediassa esim. Flickr Tagipilviä http://www.flickr.com/explore/ Verkostoja, yhteyksiä ihmisten välillä, tapahtumia, jne 2,5 miljoonaa twitter-postitusta visualisoitu http://www.guardian.co.uk/uk/interactive/2011/aug/24/riots-twitter-traffic-interactive 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ä 27 28 Saila.Ovaska@uta.fi 5