Group Project No.1:
Information Visualization
Sus Lundgren
1 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
2 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”
3 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
4 24
enlighet med algoritmen
Bakgrund
• Penser-affären
5 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
6 24
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
7 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
8 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.
9 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
10 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…
11 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.
12 24
Släktträd 1
1
2
3
4
13 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
14 24
Släktträd 2
1
2
3
4
15 24
5
Släktträd 2
1
16 24
2
6
9
3
5
7
8
4
11
12
13
10
Fast i en ideal värld…
1
2
3
4
6
5
7
9
8
11
10
12
• Och då har vi inte lagt till makar/makor och
färgkodning ännu…
17 24
13
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.
18 24
Algoritmen ska beskriva
• Hur komponenter i trädet läggs ut på
skärmen
19 24
Koddokumentationen
ska beskriva
Tengel den God
av Isfolkete
1642 - 1732
Tarjei
Lind av Isfolket
1672-1698
Mikael
Lind av Isfolket
1672-1698
Cornelia
Furestenberg
182 - 1743
Nette Nånting
1722 - 1789
Tengel III
Lind av Isfolket
1746-1812
Silje
Arngrimsdotter
1652 - 1732
Villemo
Kalebsdotter
1677 - 1768
Martina Lind
av Isfolket
1674 - 1723
Christer
Havgrim
1756 - 1805
Dominic
St Colombe
1677 - 1768
Tula I Backe
av Isfolket
1762 - 1845
Johanne
i Hagen
1744-1812
• Kod för att lägga ut trädet och ge
komponenterna rätt utseende och
”innehåll”
20 24
Heike
Sölvesson
1642-1735
Ulvhedin
Paladin
1746 - 1848
Vinga Grip
Paladin
1649 - 1723
Vendela
Heiked.Paladin
1680 – 17-56
Anna Maria
Gard
1799 -1834
André
Gard
1802 - 1889
Joakim Gard
1672 - 1745
Benedikte
Gard
1808 - 1900
Rapporten och prototypen skall beskriva
•
•
•
•
Hur GUI:t ser ut
Hur GUI:t fungerar
Tankar bakom informationsvisualiseringen
Designval, designbeslut, designutvärdering
21 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.
22 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”
23 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
24 24
