24 1 Group Project No.1: Information Visualization Sus Lundgren

24 2 Mål Alla: Att öva informationsvisualisering Alla: Att öva på det inledande arbetet (systemeringen) med att sätta upp ett komplext program/system/datastruktur För icke-programmerare: Att förstå vilka möjligheter och begränsningar som finns i programmeringen För programmerare: Att kommunicera vilka möjligheter och begränsningar som finns i programmeringen

24 3 Uppgift Att visualisera en ägandestruktur bestående av företag och personer Ni skall också visa minst tre övriga egenskaper hos varje företag Det skall gå att navigera/söka i strukturen Ni får tre ”kluster” att leka med –Kluster 1: 15 företag, 5 personer. Enkel struktur –Kluster 2: 15 företag, 5 personer.Mer komplex struktur, företag deläger varann –Kluster 3: 30 företag, 11 personer. Mycket komplex struktur; företag deläger varann och kan äga sig själva i ”loopar”

24 4 Ni ska leverera… En projektrapport, ca 5000 ord, 29/9 –Den algoritm ni använder för att lägga ut strukturen, skall beskrivas i rapporten –Koddokumentation som bilaga (ingår alltså inte i de 5000 orden) En muntlig redovisning 27/9 –10 minuter + 5 minuter för frågor –Alla måste inte presentera, men alla måste vara med och vara redo att svara på frågor En prototyp –Godtyckligt program –Skall visa hur interaktionen med gränssnittet går till –Skall visa det största klustret (nr 3), utlagt i enlighet med algoritmen

24 5 Bakgrund Penser-affären

24 6 Ett Företag… ID: C04 name: Tainton-Rogu ownership(s): C03 10% Subsidiary(ies): C14 financial value (MSEK): 1444 turnover (MSEK): 414 solvency: 79,4% operating margin:-16,8 % profit margin: -16,1% No. of employees: 120 Situated: Worldwide

24 7 En Person ID:P01 first name: Peder last name: Schnürer ownership(s): C04 51%, C12 40% CEO positions(s): C04 Chairman position(s): C01, C10, C12 Town: Copenhagen Country: Denmark

24 8 Uppgift: Disclaimer Starkt förenklad Alla data är påhittade, så det kanske finns logiska fel någonstans i dem Alla klusterfiler är handknackade så det kanske finns formateringsfel i dem Vi tar ingen hänsyn till A- och B-aktier; 51% av ägande = full kontroll

24 9 Att tänka på… Hur skall strukturen läggas ut på skärmen? Hur utnyttjar vi platsen på bästa sätt? Hur ”långt bort” i strukturen är ägande intressant? Är maktstrukturen intressant? Hur ska man kunna navigera? –”Vanlig” navigering med scrollbars är inte tillåten; hitta på ett annat sätt. ;) Hur visualiserar man… –Procentandel ägande –Övriga egenskaper som vinstmarginal, Omsättning, Rörelsemarginal etc.

24 10 Tänk er att… Er visualisering är fronten till ett mycket komplext program (som utvecklas av andra utvecklarteam) Användarna är finansanalytiker och långivare på en bank –De kan antas få litet träning i ert gränssnitt –De kommer att använda ert gränssnitt dagligen

24 11 Om Algoritmen ™ Ni måste ta fram en algoritm för att lägga ut strukturen på skärmen. Detta är det svåraste i hela uppgiften! Sedan måste ni följa algoritmen i era visualiseringar och prototyper –Ni får inte rita om strukturer så att säga ”för hand” för att de skall se snyggare ut!!! Låt oss ta ett släktträd som exempel…

24 12 Släktträd 1 Leta reda på stamfadern (= den person som inte har några föräldrar) Om personen har barn, rita ut det äldsta så långt till vänster som möjligt på raden under. Fortsätt med det tills du kommer till en individ som inte har några barn.

24 13 Släktträd

24 14 Släktträd 2 Leta reda på stamfadern (= den person som inte har några föräldrar) –if personen du ”står” på har barn, rita ut det äldsta så långt till vänster som möjligt på raden under, om du inte redan gjort det –else if Om personen har ett yngre syskon, rita ut det till höger om personen –else if Om personen inte har något syskon, gå upp en generation om du kan –else Om du inte kan gå uppåt är du klar

24 15 Släktträd

24 16 Släktträd

24 17 Fast i en ideal värld… Och då har vi inte lagt till makar/makor och färgkodning ännu…

24 18 Algoritmen ™ och koden Ingen kod behöver egentligen implementeras om ni inte vill. –Prototyper får som sagt göras i vilket program som helst Men! Det skall finnas koddokumentation i form av javadoc/UML –Det räcker alltså med att ni har tänkt ut hur det skall fungera! Denna koddokumentation behöver endast omfatta hur objekten läggs ut på skärmen (i enlighet med algoritmen) och hur de får rätt utseende. Beteenden, navigation och sökning behöver ni inte koddokumentera.

24 19 Hur komponenter i trädet läggs ut på skärmen Algoritmen ska beskriva

24 20 Koddokumentationen ska beskriva Kod för att lägga ut trädet och ge komponenterna rätt utseende och ”innehåll” Nette Nånting Tarjei Lind av Isfolket Tengel III Lind av Isfolket Villemo Kalebsdotter Heike Sölvesson Martina Lind av Isfolket Christer Havgrim Tula I Backe av Isfolket Vendela Heiked.Paladin 1680 – Anna Maria Gard André Gard Benedikte Gard Tengel den God av Isfolkete Silje Arngrimsdotter Cornelia Furestenberg Dominic St Colombe Vinga Grip Paladin Joakim Gard Ulvhedin Paladin Johanne i Hagen Mikael Lind av Isfolket

24 21 Rapporten och proto- typen skall beskriva Hur GUI:t ser ut Hur GUI:t fungerar Tankar bakom informationsvisualiseringen Designval, designbeslut, designutvärdering

24 22 Ni behöver inte… Implementera någon kod alls, om ni inte vill. Det räcker med algoritmen och en koddokumentation i Java/UML Bry er om att räkna ut/visa hur ett företags värde påverkas av dess ägande av andra företag. Det är redan uträknat åt er i ”värdet” Kunna beräkna hur många procent ett visst företag äger av ett godtyckligt annat företag.

24 23 Betygsättning “Programming”: 8 –description of layout algorithm, code documentation Information visualization: 12 – Final design, design decisions made and why, evaluation of final design Presentation: 2 – Clarity, consistency, professionalism, ability to keep time limit Report: 3 – Language, structure, spelling, fluency, “understandability”

24 Viktigast av allt! En fullständig uppdragsbeskrivning samt filer finns på kursens webb!!! Titta där! Där finns också en zip-fil med klustren i