Grafisk visualisering med hjälp av olinjär förstoring

Grafisk visualisering med hjälp av olinjär förstoring Ett projektarbete i kursen Informationsvisualisering, TNM048, vid Linköpings universitet vårterminen 2005. Projektdeltagare: Ulrika Dreifaldt, 811207-6941, ulrdr649@student.liu.se Anna Nordell, 800405-1929, annno548@student.liu.se Johan Åkesson, 790717-3335 johak133@student.liu.se

Innehållsförteckning 1. Inledande del... 3 1.1 Inledning... 3 1.2 Yttre förutsättningar... 3 1.3 Vision... 3 1.4 Mål... 4 1.5 Avgränsningar... 4 2. Tillvägagångssätt... 5 2.1 Programmeringsspråk... 5 2.2 Bedömning och tolkning av informationen i datasetet.... 5 2.3 Tekniska lösningar... 5 2.4 Problemlösning... 6 2.4.1 Datasetet... 6 2.4.2 Flash... 6 2.4.3 Färgkodning... 7 2.4.4 Tidslinjen... 7 3. Resultat... 8 3.1 Val av visualiseringsverktyg... 8 3.1.1 F&C... 8 3.1.2 Treshhold... 8 3.1.3 Linjediagram... 8 3.2 Presentation av visualiseringen... 9 3.3 Motivering... 10 3.3.1 Användare... 10 3.3.2 Visuellt... 10 3.4 Vidareutveckling... 11 4. Avslutande del... 12 4.1 Slutsatser... 12 4.1.1 Flash... 12 4.1.2 Vår applikation... 12 4.2 Avslutning... 12 5 Referenser... 13 5.1 Böcker och rapporter... 13 5.2 Föreläsningar... 13 5.3 Internet... 13 Appendix - Användarhandledning till applikationen 2

1. Inledande del 1.1 Inledning I takt med att datorer blir allt viktigare informationslagringsredskap ökar också behovet av att presentera data visuellt. I dagens samhälle vill människor inte bara kunna använda datorer utan även want to interact directly with the information resources. 1 Vid stora informationsmängder och många olika parametrar kan det vara svårt att hitta optimala visualiseringsmetoder något som detta projekt visar. 1.2 Yttre förutsättningar Vi tilldelades datasetet Visits. Detta innehåller ett antal turistattraktioner i Italien och diverse information om dessa. Projektets tilltänkta kund är en turistbyrå av valfri sort som vill kunna överskåda informationen visuellt. Datasetet innehöll följande information: Det aktuella områdets olika regioner och koordinaterna för dessa. Attraktionernas namn och ID-nummer. Attraktionernas koordinater och höjddata. Besöksstatistik per timme för respektive attraktion under en tredygnsperiod. 1.3 Vision Vår vision var att ta fram en applikation som skiljde sig från mängden. I denna plan ingick både av att göra applikationen i ett annat språk än Visual Basic och att använda någon av de informationsvisualiseringsmetoder som inte använts i kursens laborationer. Alla medlemmarna fascinerades av speciellt ett exempel 2 som tagits upp på föreläsningar i kursen, där metoden Focus&Context använts. Applikationen visade hur en bokhandel med hjälp av ett hyperboliskt träd kunde representera en stor mängd ämnesområden och boktitlar ner på detaljnivå samtidigt som användaren hela tiden behåller överblicken över all information. (Se figur 1.1) Figur 1.1: Hyperboliskt träd 1 Thomas mfl.: Human computer Interaction sid.1 2 Mikael Jern: Föreläsning 3 slide 3. 3

När arbetet inleddes var vår främsta ambition därför, baserat på de visioner vi hade, att göra en applikation som innehöll någon visuell effekt av typen Focus&Context (F&C) eller Overview&Detail(O&D) applicerad på en karta. Vi insåg redan då problemet med att dessa metoder förstör kartor, då de faktiska avstånden i dessa förändras med metoderna. (De relativa avstånden är dock hela tiden intakta.) 1.4 Mål Målet med projektet är att göra en informatonsvisualiseringsapplikation i Flash som innehåller antingen F&C eller O&D. Applikationen ska vara anpassad för användare utan större datorvana. 1.5 Avgränsningar Vi har i arbetet prioriterat att ta fram tekniska lösningar anpassade för informationsvisualisering framför att anpassa applikationen för den tilltänkta kunden på ett optimalt sätt. Anledningen till detta var främst att de tekniska lösningarna, som till exempel inläsning av XML-data, tog längre tid än beräknat att utveckla. 4

2. Tillvägagångssätt 2.1 Programmeringsspråk Som redskap för informationsvisualiseringen valdes programmet Flash MX, i fortsättningen refererat till som Flash. Anledningen till att vi inte jobbade i Visual Basic, det programmeringsspråk som genomgående använts i kursen, är att Flash ökade gruppens frihet att själva designa de visuella redskapen. Vi hade även önskemål om att testa relativt avancerade visuella effekter, vilket gjorde Flash till ett bättre val än Visual Basic. Dessa fördelar ansågs av gruppen väga tyngre än den ökade arbetsbelastning som valet innebar. Flash har även fördelar när det gäller distribution till presumtiva kunder, eftersom det är designat för att visas via en webbläsare och finns tillgänglig för många plattformar. 2.2 Bedömning och tolkning av informationen i datasetet. Aktörer inom turistnäringen har på senare år blivit allt mer konkurrensutsatta. Vi tror därför att projektets kund främst kommer använda applikationen för att på olika sätt optimera sin verksamhet. Exempel på detta kan vara att geografiskt optimera vart företaget ska placera sina turistkontor och vilka öppettider dessa ska ha för att tillfredställa kunderna på bästa sätt. Andra tillämpningar kan vara att underlätta hantering av personalbemanningen, utvärdera olika regioners popularitet samt att lättare se attraktioner med potential. 2.3 Tekniska lösningar Tanken är att denna applikation ska gå att använda på andra dataset som liknar det tilldelade, vilket begränsade oss ur vissa synvinklar. Vi har bland annat gjort funktioner som hittar exempelvis extremvärden i vår kod istället för att sätta dessa till fasta värden. För att visa mycket information samtidigt ville vi ha möjlighet att skala den rumsliga informationen, det vill säga positionerna för attraktionerna. Till en början tänkte vi oss en radiell förflyttning som ökade med avståndet mellan aktuell fokuspunkt och attraktionens orginalposition. En radiell skalning är tyvärr beräkningstung och skulle inverka på interaktiviteten. En mer attraktiv lösning ur beräkningssynpunkt är att titta på avståndet i X- och Y-led var för sig. Det är inte heller önskvärt att förflytta ut attraktionerna utanför kartan, vilket gör att hänsyn måste tas till attraktionens närhet till kartans kanter. Den metod för skalning av attraktionernas positioner vi valt bygger på distorsion i både X- och Y-led, se figur 2.1. Koordinaterna skalas enligt följande formel, där m står för musenpekarens position samt max- och minvärdena är kartans koordinater i kanterna: 5

x m x' = x m x x min x x max x max x x max x om m om m x x > x < x Figur 2.1: Distorsion i X- och Y-led 2.4 Problemlösning 2.4.1 Datasetet Två av regionerna i datasetet innehåller inte några turistattraktioner. Innan vi plottade de olika regionerna och attraktionerna mot varandra och insåg detta så rådde stor förvirring. När vi fick klarhet om regionernas innehåll löstes många av de databehandlingsproblem som vi trodde fanns, men som i själva verket var tomma regioner. 2.4.2 Flash Då vi valt att göra projektet i ett programmeringsspråk som inte uppmärksammats i den aktuella kursen begränsades möjligheterna till hjälp från handledare. Tack vare att programmets hjälpfunktion är väl utvecklad, denna innehåller både utförliga förklaringar och bra exempel, lyckades vi dock lösa de flesta problem själva vissa snabbare än andra Eftersom Flash är byggt för användning över internet, har den av säkerhetsskäl inte möjlighet att behandla binärafilformat såsom ett Excel-blad. För att Flash skulle kunna hantera informationen sparade vi därför om de givna Excel-bladen till formatet XML ett format som Flash har bra stöd för. I samband med detta stötte vi på ett av projektet största problem; Hur all data skulle läsas in i Flash. Programmet visade sig vara väldigt förlåtande, det vill säga koden kan innehålla vissa typer av fel utan att Flash protesterar. Ett exempel på detta är längden på arrayer, där Flash automatiskt utökar arrayers längd i de fall det behövs. Den okunskap som fanns i projektets inledning ledde bland annat därför till att mycket kod fick skrivas om efterhand. I Flash existerar endast endimensionella arrayer. Vid hanteringen av datasetet ledde detta till stora problem eftersom vår data i princip alltid beror av minst två variabler. Många funktioner blev därmed invecklade med variabler som beror av andra i flera led en stor nackdel vid felsökning i koden. Vår lösning till detta problem blev att data som används ofta beräknas och sparas i separata arrayer, se till exempel arrayen med medelvärden över regioner och tid. 6

Flash har ett koordinatsystem som är anpassat för grafik. Detta medför att y-axeln är nedåtriktad och de norra regionerna kommer därför att ligga nederst på kartan. Vi är medvetna om problemet men har inte haft tid att prioritera det. 2.4.3 Färgkodning Under lång tid hade vi svårt att skapa generella färgval som till exempel baseras på ett viss värde beroende på att Flash färgrepresentation bygger på hexadecimala värden. Vi trodde att vi var tvungna att bestämma färger i förhand och med andra ord därför inte generera dessa när applikationen körs. När vi tillslut insåg hur man hanterar hexadecimala värden i Flash löste sig ovanstående problem relativt lätt och vi fick ett tillfredställande resultat. Vid representationen av olika attraktioner och statistik för dessa kan flera valda objekt få samma färg, vilket självklart försvårar överskådligheten i vår grafrepresentation. Övergångarna mellan de olika regionernas färger blev också skarpare än önskat. Tyvärr lyckades vi inte hitta en bra lösning på detta problem. Tresholdfunktionen för att tröskla regionernas medelantal besökare fungerar för närvarande inte på ett tillfredställande sätt. Självklart överensstämmer dock färgskalan i tresholdfunktionen med regionernas färgkodning i kartan. 2.4.4 Tidslinjen Under arbetets gång har vi haft stora problem med att få tidslinjen att bete sig som vi önskat. Trots att mycket tid har lagts på att lösa problemen har vi inte lyckats. I dagsläget uppdateras kartan när tidslinjen flyttas men det finns ingen fungerande visuell stoppfunktion för hur långt användaren kan flytta den. 7

3. Resultat 3.1 Val av visualiseringsverktyg 3.1.1 F&C Den funktion som vi har utvecklat fungerar ungefär som ett förstoringsglas med olinjär distorsion, se även avsnitt 2.3. När användaren för musen över de olika attraktionerna så kommer de punkter närmast muspekaren att centreras och öka i storlek och övriga bli mindre och försvinna från fokus ut mot kartans kanter. I figur 3.1. nedan illustreras i en testfunktion hur det ser ut när användaren håller muspekaren i övre vänstra hörnet och figur 3.2 i nedre högra hörnet. Notera de olika prickarnas positioner. De svaga prickarna representerar orginalpositioner. Figur 3.1: Muspekaren i övre vänstra hörnet Figur 3.2: Muspekaren i nedre högra hörnet 3.1.2 Treshhold Vi tror att det ligger i användarnas intresse att ha möjlighet att lätt urskilja tendenser i datan. Det finns därför en treshold-funktion som visar de attraktioner vars besöksdata ligger inom ett visst intervall. Funktionen ger användaren möjlighet att tröskla besöksdatan mellan både en övre och nedre gräns. 3.1.3 Linjediagram Det kändes naturligt att använda linjediagram för att visa hur besöksantalet i de olika attraktionerna varierar över tiden. Det enda alternativet till detta hade i princip varit stapeldiagram, men vi ansåg att linjediagram i många avseenden är tydligare. Att vi även ville ha en generell applikation som ska kunna hantera stora datamängder, med exempelvis statistik för ett helt år, motiverade valet av linjediagram framför stapeldiagram ytterligare. Forskare inom området anser även att linjediagram är det bästa möjliga sättet att representera data över tiden på. 4 4 Krider&Turner: Visual interactive data analysis sid. 6 8

3.1.4 Färgkodning För att illustrera hur statistiken för de olika attraktionerna ändras över tiden har vi använt oss av färgkodning. Bevandrade inom informationsvisualisering anser att färgkodning bör användas med försiktighet. 5 Vi har därför valt att endast använda komplementfärgerna röd och blå när vi visualiserar datan i kartan blå för de olika attraktionerna och röd för regionerna. I båda fallen gäller att ju starkare färg desto högre värde. Observera att färgkodningen på själva attraktionens prick är det enda som är färgkodat mot antalet besökare. Atraktionernas namn är också färgkodade, men dessa är kopplade till respektive attraktions statistik i grafen istället för antalet besökare i den aktuella tidpunkten. När en attraktion markeras kommer statistiken för denna upp i grafen och visas i samma färg som texten på kartan har. På så sätt kan användaren snabbt koppla den geografiska positionen med grafdatan. 3.1.5 Korrelerade vyer De flesta av vyerna i applikation korrelerar med varandra. Som nämnts i avsnitt 3.1.4 så är kartan kopplad till grafen via attraktionsnamnet. Trösklingsfunktionerna är kopplade till kartan och grafen, då de sistnämnda visar olika statistik beroende på vilket intervall användaren är intresserad av. Tidsaxeln är kopplad till kartan eftersom att kartan väljer vilken statistik som ska visas efter aktuell tidpunkt, samt till grafen eftersom när tiden ändras kan trösklingvärdena göra att visa linjer ska tonas ut. 3.2 Presentation av visualiseringen I figur 3.3 nedan visas en skärmdump av hur applikationen ser ut. För vidare information hänsvisar vi till det appendix som finns i slutet av rapporten. Figur 3.3: Skärmdump av applikationen 5 Spence: Information Visualization sid. 66 f 9

3.3 Motivering 3.3.1 Användare Vi tror att användaren av programmet har relativt knapphändig datorvana. Vid utformandet av det grafiska gränssnittet har prioriteringen därför främst legat på att göra detta så enkelt och lättförståeligt som möjligt och samtidigt rikt på information. De olika interaktionsverktygen har grafiskt utformats med bland annat bilder så att det inte ska vara någon tvekan om vilken funktion de har. Vi tror att den grupp av användare som applikationen riktar sig till uppskattar detta. 3.3.2 Visuellt Vi har valt att använda oss av visualiseringstekniker som presenterar informationen på ett så enkelt sätt som möjligt. Vi ville skapa en applikation som helt bortser från data representerad i tabeller. Detta val kan bland annat motiveras med följande citat: Numerical data are rarely comprehensible in raw form: Tables of numbers tend to confuse the content and hide the essential patterns prensent within the data. In essence, visualisation transforms data into information. 6 Det är ett medvetet val att inte ha med någon bakgrundskarta i applikationen. Anledningen till detta var främst att en karta gjorde informationen väldigt svåröverskådlig, men även att detta skulle göra applikationen mindre generellt användbar. Nackdelen med att inte ha en karta är att det försvårar möjligheten att tolka till exempel besöksfrekvensen på en turistattraktion utifrån geografisk placering. En attraktion som ligger nära ett populärt turistmål har antagligen lättare att locka turister än en likvärdig på landsbygden. Närhet till större vägar, övernattningsmöjligheter och terrängens utseende i området är andra saker som vi tror spelar in när man som turist väljer ut turistmål. Ursprungligen visades alla attraktioners namn på kartan hela tiden. Detta gjorde dock informationen svåröverskådlig då vissa av attraktionerna ligger nära varandra geografiskt. Vår lösning blev att endast visa namn då musen förs över objektet alternativt objektet markeras på kartan. När en attraktion kommer i fokus eller markeras visas även dennas besöksstatistik för den aktuella tidpunkten samt dess höjd, vilken vi antar vara i höjd i meter över havet då Italien använder sig av det metriska systemet med SI-enheter. Från början hade vi tänkt storlekskoda prickarna som representerar attraktionerna efter antalet besökare som uppmätts. Detta fungerade dock inte tillsammans med vår F&C-funktion, då denna förstorar upp alla punkter på kartan och därmed försvårar för användaren att utvärdera informationen. Vi ansåg därför att färgkodning av attraktionerna skulle visualisera informationen tydligare än storlekskodning. 6 Krider&Turner: Visual interactive data analysis sid. 3 10

3.4 Vidareutveckling Då Flash var en relativt ny bekantskap för alla gruppens medlemmar tog många projektmoment längre tid än vad vi från början trott och planerat. Vi insåg därför ganska snabbt att vi inte skulle hinna utveckla och färdigställa visualiseringen till den grad vi önskat och tvingades därför stryka ett par av punkterna på vår prioriteringslista. Exempel på önskvärda vidareutvecklingar av arbetet är följande: Använda arbitär komplexitet på regionerna. Förbättra F&C-algoritmen så att även regionernas gränser förändras när man drar musen över områden. Även matematiken bakom algoritmen skulle kunna optimeras. Möjlighet att plotta olika regioners besöksstatistik mot varandra. Detta var något som bortprioriterades under arbetets gång. Förutom tidsbrist var anledningen till detta att antalet besökare i de olika regionerna till viss del redan jämförs med varandra med hjälp av färgkodning. Skala regionerna enligt samma algoritm som attraktionerna. Visa tidsberoende data för regionerna samt tröskla dessa Kunna räkna ut fler statistiska parametrar som exempelvis variansen. Göra vår lösning ännu mer oberoende av vilket dataset som används i applikationen. 11

4. Avslutande del 4.1 Slutsatser 4.1.1 Flash Vi tycker fortfarande att Flash är ett bra visualiseringsverktyg eftersom att det är en utbredd programvara som dessutom finns till de flesta operativsystem, till skillnad från till exempel Visual Basic som bara finns för Windows. Detta gör vår applikation portabel och underlättar informationsöverföringen mellan olika användare. Till exempel skulle vår applikation kunna läggas upp på en intern hemsida och de anställda skulle därmed ha tillgång till informationen utan större problem. Detta anser vi vara en stor fördel jämfört med programvaror som till exempel Visual Basic. De största nackdelarna som vi ser med Flash när det gäller informationsvisualisering är att programmet inte är utvecklat för att kunna hantera stora datamängder. Flash är därför inte optimalt att använda till väsentligt större datamängder än de som vi har nu. 4.1.2 Vår applikation Målet med projektet var att göra en informatonsvisualiseringsapplikation i Flash som innehåller antingen F&C eller F&C.Applikationen ska vara anpassad för användare utan större datorvana I vår applikation finns en F&C-funktion som fungerar. Vi tycker därför att vi har uppnått målet ur teknisk synvinkel. Om man tittar på projektet ur en användarvänlighetssynvinkel så tycker vi tyvärr inte att vår lösning är optimal. Med tanke på hur lång tid som vi lagt ner på projektet, vilket överstiger den tilldelade, är vi dock nöjda med resultatet. 4.2 Avslutning Den frihet som gavs att själva välja visualiseringsmetoder uppskattades då detta gav oss möjlighet att vidga våra vyer och pröva nya saker. Vissa av de tekniska lösningarna, som till exempel inläsningen av datan, tog dock längre tid än beräknat vilket gjorde att vi inte hann fokusera så mycket på logiken i visualiseringen som vi velat. Vikten av att man gör detta tydliggjordes speciellt när vi utvecklade den användarhandledning som finns till applikationen. Sammanfattningsvis tycker vi att detta har varit ett mycket intressant projekt, framförallt då ämnet visar på ytterligare ett intressant område som datagenererad visualisering kan användas inom. 12

5 Referenser 5.1 Böcker och rapporter Spence: Information Visualization sid. 66 f Krider&Turner:Visual interactive data analysis an overview of the technology behind the company. Sid.3. Thomas mfl.: Human computer Interaction with lobal information Spaces Beyond Data mining sid.1 5.2 Föreläsningar Mikael Jern: Föreläsning 3. Slide 3. Mikael Jern: Föreläsning 3. Slide 26. 5.3 Internet Actionscript.org: http://www.actionscript.org/tutorials/intermediate/xml/index.shtml (Tutorials om inläsning av XML i Flash med hjälp av Actionscript) Besökt 2005-02-28 Flash Kit: http://www.flashkit.com/index.shtml (Diverse information om Flash) Besökt 2005-02-27 13

Appendix - Användarhandledning till applikationen Kartan Kartan består av nio olika rektanglar. Dessa representerar de olika regioner som finns i det aktuella området. I mitten på varje region står dess namn. Regionerna har olika färgnyanser, vilka representerar ett medel på antalet besökare i regionerna ju starkare nyans desto fler besökare har regionen. Skalan visas även i den röda trösklingsstapeln i kontrollpanelen, för mer information se avsnittet trösklingsfunktion. De prickar som är spridda över kartan representerar alla varsin turistattraktion och de är utplacerade efter deras geografiska koordinater. Punkterna är färglagda enligt en skala från vit till mörkblå, ju mörkare färg desto fler besökare har attraktionen vid den aktuella tidpunkten.

Kontrollpanel Verktyg Till vänster under rubriken verktyg finns olika knappar som kan användas för att titta närmare på informationen. Funktionerna som dessa har är följande: Fokuseringsfunktion: Skalan på kartan är ganska liten och vissa attraktioner ligger så nära varandra att de kan vara svåra att skilja på. Det kan därför vara bra att ha möjlighet att kunna zooma in på intressanta områden. För att fokusera, klicka först på knappen fokusera. Om ni sedan drar musen över prickarna samtidigt som ni håller in vänster musknapp så förstoras skalan i den aktuella kartdelen. Markeringsfunktionen: Denna funktion används för att få mer information om de olika attraktionerna. När ni rör musen över en prick visas attraktionens namn, dess aktuella besöksantal och attraktionens position i meter över havet, se figur till höger. För att markera en attraktion tryck på knappen markera och klicka på den prick som ni vill ha information om. Attraktionens namn ändrar då färg och i grafen nere i fönstrets högra hörn visas hur antalet besökare varierar över tiden på denna specifika attraktion med samma färg som attraktionsnamnet. Om ni vill kan flera olika attraktioner markeras samtidigt och därmed i graffönstret se skillnader i statistik mellan dessa. Göm regioner-funktionen: Om ni endast är intresserade av attraktionerna och inte av de regioner som existerar kan ni trycka på denna knapp. Regionerna döljs då och kartan visar endast de olika attraktionerna. Växla mellan de olika lägena genom att trycka på knappen. Filtrering I mitten under rubriken filtrering finns två staplar, den röda representerar medelantalet besökare i regionerna och den blåa medelantalet besökare för attraktionerna i den aktuella tidpunkten. Dessa fungerar som en färgförklaring till kartans färgskala. För att endast visa attraktionerna med ett valt antal besökare klicka på någon pilarna till höger om den blåa stapeln och flytta dem genom att röra på musen. Kartan kommer då att ändras för att tillfredställa er önskning. Den röda fungerar på liknande sätt för regionernas färgkodning.

Data Under rubriken data visas en ruta där antalet besökare över tiden för era valda attraktioner kommer att visas med hjälp av en linjegraf. När du med hjälp av markeringsverktyget har markerat en attraktion kommer en linje med samma färg som attraktionsnamnet att visas i grafen. På den horisontella x-axeln visas datum och tid samt på den vertikala y-axeln visas antalet besökare. Tidsaxeln Tidsaxeln visar vilka tidpunkter som det finns statistik lagrad för. Pilarna mitt på axeln visar vilken tidpunkt som ni befinner er i just nu. För att ändra tidpunkt: Klicka på tidsaxeln och håll ner vänster musknapp samtidigt som ni drar axeln åt det håll ni vill. Kartan kommer då att uppdateras och visa den nya aktuella tidpunkten som ni valt.