Introduktion till Informationsvisualisering Staffan Björk staffanb@cs.chalmers.se

Vad är informationsvisualisering? The use of computer-supported, interactive, visual representations of abstract data to amplify cognition (Card, Mackinlay & Shneiderman) Dvs: Att med hjälp av datorer översätta abstrakta data till en mera lättförståelig och interaktiv visuell presentation

Vad är informationsvisualisering? Externaliserad Kognition Användande av den externa världen för att uppnå kognition Informationsdesign Formgivning av externa representationer för att förstärka kognition Datagrafik Användande av abstrakta, icke-representativa visuella representationer av data för att förstärka kognition (Card, Mackinlay & Shneiderman)

Vad är informationsvisualisering? Användande av datorbaserade interaktiva visuella representationer av data för att förstärka kognition Vetenskaplig Visualisering Användande av interaktiva visuella representationer för mätdata data för att förstärka kognition Informationsvisualisering Användande av interaktiva visuella representationer för abstrakt data för att förstärka kognition (Card, Mackinlay & Shneiderman)

Varför Informationsvisualisering? Ögat är mycket bra på att upptäcka mönster och samband snabbt (eller avbrott i mönster!) Därför är det lämpligt att utnyttja denna egenskap för att underlätta förståelse av komplex data Genom att tillåta användaren interagera med en visualisering – göra den interaktiv - kan man dessutom ”finjustera” presentationen och komma fram till nya samband

Kunskapskristallisering Uppgift Datasökning Beslut/Handling Struktursökning Problemlösning Strukturimplementering (Russell et al., 1993 i Card, Mackinlay, & Shneiderman, 1999)

Hur kan informationsvisualisering förstärka kognition? Ökad resurser Hierarkisk interaktion med hög bandbredd Parallell behandling av data Förflytta arbete från att vara kognitivt belastande eller perceptuellt belastande Fungera som utökat korttidsminne Utöka mängden information som finns tillgänglig Förenkla sökning Lokalisera sökningen till regioner Hög densitet av information i en region Undvika indexering genom utplacering i rummet (Card, Mackinlay & Shneiderman, 1999)

Hur kan informationsvisualisering förstärka kognition?, forts. Förenkla upptäckten av mönster Igenkänning istället för ihågkomning Abstraktioner och sammanslagningar Perceptuell slutledning Visuella representationer kan göra lösningar till problem självklara Grafiska beräkningar (Card, Mackinlay & Shneiderman, 1999)

Hur kan informationsvisualisering förstärka kognition?, forts. Perceptuell övervakning Händelser som är ovanliga kan fås att framträda tydligare Manipulerbart medium Visualiseringar kan anpassas för specifika behov Visualiseringar kan ses från olika vyer vilket kan ge bättre överblick över större förmåga att utforska informationsmängden (Card, Mackinlay & Shneiderman, 1999)

Begrepp från Envisioning Information - Escaping Flatland Grundproblem Informationsvisualiseringar har 2(+1) dimensioner att använda för att visa all information Nästan all information har mer än 2 intressanta egenskaper Alltså kan inte en dimension används till varje egenskap

Begrepp från Envisioning Information - Escaping Flatland Inga generella lösningar ”nearly every escape from flatland demands extensive compromise, trading off one virtue against another” Spotfire, www.sportfire.se

Begrepp från Envisioning Information - Escaping Flatland Verktyg Färger Mönster Position Form Kluster Lager Små multipler Prosection Matrix, Spence, 1996

Begrepp från Envisioning Information - Escaping Flatland Chartjunk Irrelevant information Utsmyckning som inte förtydligar Detta beror naturligtvis på målgruppen Exempel: Inkomst i USA mer ojämnt fördelad än i resten av världen Världskarta är irrelevant 2 sorters 3D diagram från två olika vyer Upprepning av namn på länder 28 tal behöver för att visa skalorna som visar 24 informationsenheter Ländernas ordning oförklarad Bokstaven I används för att separera länderna Klass, G. Lecture notes, Illinois State University

Begrepp från Envisioning Information - Micro/Macro Readings Berör stora informationsmängder Se enskilda delar Förstå sammanhang Se mönster to clarify, add detail

Begrepp från Envisioning Information - Micro/Macro Readings Exempel Hitta orsaken till koleraepidemi i London Baserad på karta över epidemiområdet Markera ut varje hus där någon insjuknat Hitta området med högst koncentration

Begrepp från Envisioning Information - Micro/Macro Readings Kalendervy över arbete Traditionell kalender Färgkodad automatgenererad klustering Diagram som visar fördelning tid/antal närvarande Medelvärden för kluster visas Enskilda dagar kan väljas (Van Wijk & van Selow, 1999)

Begrepp från Envisioning Information - Layering & Separation Layering – överlagring Ha flera olika lager av information tillgänglig Separation – Uppdelning Gör så att lagren tydligt kan skiljas från varandra Men så att deras relation bevaras

Begrepp från Envisioning Information - Layering & Serparation – 1+ 1 = 3 1 + 1 = 3 Negativa ytor Ytor definierade av andra ytor Most of the time, that surplus visual activity is non-information, noise, and clutter + =

Begrepp från Envisioning Information - Layering & Serparation – 1+ 1 = 3

Begrepp från Envisioning Information - Layering & Serparation – 1+ 1 = 3

Begrepp från Envisioning Information - Layering & Serparation – 1+ 1 = 3

Begrepp från Envisioning Information - Layering & Serparation – 1+ 1 = 3

Rast

Exempel – Information Visualizer (och relaterad projekt)

Information Visualizer Ett projekt för att utforska nya användargränssnitt Ge användaren mer (virtuellt) utrymme genom 3D Höja informationsdensiteten genom att använda animation och 3D perspektiv Byggde på 3D-systemet Rooms

Information Visualizer – Cone Trees Visualisering av hierarkisk information Problemet med breda träd löses genom att utnyttja extra utrymme som 3D ger Skugga ger överblick över hela trädet Varje delträd är roterbart

Information Visualizer - Perspective wall Kalendervy Använder perspektiv för att på ett ”naturligt” sätt minska informationen som visas Fokus kan ändras genom att ”dra” i kalendern

Information Visualizer - Document Lens Utforska text dokument (i mikrofiche format) Dokumentet modelleras som ett töjbart duk Duken sträcks ut över en pyramid utan top Interaktion sker genom att flytta pyramiden

[Information Visualizer] – Butterfly Application För sökande av referenser Komponenter Huvud: vald artikel Vänster vinge: använda referenser Höger vinge: referenser till artikeln Referenser kan väljas för att skapa nya vyer

[Information Visualizer] - Table Lens Applikation för att undersöka information i tabellformat Varje rad/kolumn kan öppnas upp för att visa detaljer Rader/kolumner kan sorteras om efter innehåll i valda kolumner/rader

[Information Visualizer] - Spiral Calendar Kalenderapplikation Flera vyer motsvarande olika skalnivåer Dag Vecka Månad År Person? Avdelning? Detaljvy samt överblick på flera olika nivåer Möjlighet att navigera på flera olika nivåer

Exempel - Fisheye views

Fisheye views Grundproblem Det användaren vill se av en informationsmängd får inte plats på skärmen samtidigt Ta bort irrelevant information Hur ska man veta vad som bör visas? Antagande: hierarkisk strukturerad information

Fisheye views - Grundidé Information högre upp i strukturen viktigare Men detaljinformation där användaren fokuserar också viktigt Beräkna hur viktig varje informationsdel är utifrån detta

Fisheye views - Koncept API(x) A Priori Importance Viktning av information oberoende av användarens intresse Negativt värde D(x,y) Avståndsfunktion mellan användarens fokus och informationen Ger ett nummeriskt värde

Fisheye views - Koncept DOI(x!=y) Hur viktig en enskild informationsdel är API(x) – D(x,y) Presentation görs beroende på värden och hur mycket utrymme som finns

Fisheye views Fisheye presentation Normal presentation