1 24

Group Project No.1:Information Visualization

Sus Lundgren

2 24

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

3 24

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”

4 24

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

5 24

Bakgrund• Penser-affären

6 24

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

7 24

En PersonID: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

8 24

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

9 24

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.

10 24

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

11 24

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…

12 24

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.

13 24

Släktträd 1

1

3

2

4

14 24

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

15 24

Släktträd 2

1

3

2

4

5

16 24

Släktträd 2

1

3

2

4

6 9

5 7 8 10

11 12 13

17 24

Fast i en ideal värld…

• Och då har vi inte lagt till makar/makor och färgkodning ännu…

3

2

4

6 9

5 7 8 10

11 12 13

1

18 24

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.

19 24

• Hur komponenter i trädet läggs ut på skärmen

Algoritmen ska beskriva

20 24

Koddokumentationenska beskriva

• Kod för att lägga ut trädet och ge komponenterna rätt utseende och ”innehåll”

Nette Nånting1722 - 1789

TarjeiLind av Isfolket

1672-1698

Tengel IIILind av Isfolket

1746-1812

Villemo Kalebsdotter1677 - 1768

HeikeSölvesson1642-1735

Martina Lind av Isfolket

1674 - 1723

Christer Havgrim

1756 - 1805

Tula I Backeav Isfolket

1762 - 1845

Vendela Heiked.Paladin1680 – 17-56

Anna MariaGard

1799 -1834

AndréGard

1802 - 1889

BenedikteGard

1808 - 1900

Tengel den Godav Isfolkete1642 - 1732

Silje Arngrimsdotter

1652 - 1732

Cornelia Furestenberg182 - 1743

Dominic St Colombe1677 - 1768

Vinga Grip Paladin

1649 - 1723

Joakim Gard1672 - 1745

UlvhedinPaladin

1746 - 1848

Johanne i Hagen

1744-1812

MikaelLind av Isfolket

1672-1698

21 24

Rapporten och proto-typen skall beskriva

• Hur GUI:t ser ut

• Hur GUI:t fungerar

• Tankar bakom informationsvisualiseringen

• Designval, designbeslut, designutvärdering

22 24

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.

23 24

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 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