Cr
eër
en
van
hi
ër
ar
chi
e
Het
vi
s
ual
i
s
er
en
van
hi
ër
ar
chi
s
che
t
aal
kundi
ge
s
t
r
uct
ur
en
i
n
SynTr
ee
Creëren van hiërarchie
Het visualiseren van hiërarchische taalkundige structuren in SynTree
Jan-Willem Maris
Augustus 2013
Ma-scriptie Informatiekunde Faculteit der Letteren Rijksuniversiteit Groningen
Begeleiders:
Samenvatting
Een boomstructuur wordt over het algemeen veel gebruikt om hiërarchische informatie te visualiseren. Mede afhankelijk van het doel van de visualisatie bestaan er ook andere visualisatiemogelijkheden die hiervoor zeer geschikt kunnen zijn. Een goede visualisatie moet namelijk inzicht geven en het liefst ook uitdagen, met het uiteindelijke doel om nieuwe inzichten te genereren.
In deze scriptie wordt gewerkt met gevisualiseerde linguïstische hiërarchische constituentinformatie in SynTree. SynTree is interactieve software en is ontwikkeld in de programmeertaal Java aan de Rijksuniversiteit Groningen in het kader van het ERC-project ‘Incomplete Parenthesis’. Op dit moment is SynTree primair bedoeld om syntaxisbomen mee te tekenen. SynTree kent alle benodigdheden om syntaxisbomen te creëren, te wijzigen en op te slaan in een SVG-bestand. In de toekomst wil men graag zien dat SynTree ook wordt ingezet om andere hiërarchische informatie te visualiseren. Op het moment van schrijven is de ondersteuning voor bracketed diagrams net ingebouwd.
Voor het visualiseren van het boomdiagram in SynTree wordt gebruik gemaakt van een zelf uitgedacht uitlijnalgoritme dat ervoor zorgt dat het boomdiagram altijd volgens een vaste set regels wordt weergegeven. Het boomdiagram in SynTree wordt van onderaf opgebouwd waarbij rekening wordt gehouden met zowel zusterknopen als lager liggende knopen. In deze scriptie is dit algoritme in detail uitgewerkt. Hierbij zijn fouten met betrekking tot het positioneren van knopen en bomen gevonden. Dit resulteert in onnodig en onhandig brede diagrammen. Deze fouten zijn uitgewerkt en in mijn eigen geprogrammeerde versie (pySynTree) in de programmeertaal Python verholpen.
Een boomdiagram zal niet altijd het gewenste inzicht geven aan de gebruiker. Hierom wil men onderzocht hebben welke andere visualisatiemogelijkheden bestaan die dezelfde constituent linguïstische hiërarchische informatie kunnen visualiseren. Deze mogelijkheden kunnen hopelijk bijdragen om tot een nieuw inzicht op basis van de hiërarchische informatie te komen.
Om duidelijk te krijgen wat ik met dit onderzoek wil bereiken is er een onderzoeksvraag opgesteld: “Wat zijn goede en realiseerbare visualisatiemogelijkheden voor het representeren van een linguïstische hiërarchische constituentstructuur in SynTree?”
Om antwoord op de bovengenoemde onderzoeksvraag te krijgen zijn er een deskresearch, vergelijkend onderzoek en een evaluerend onderzoek uitgevoerd. Er zijn verschillende visualisatiemogelijkheden gevonden op basis van de beschikbare literatuur. Dit zijn het dendrogram,
cladogram, gelijk gekoppelde zusterschap, boxnotatie en transition network. Daarnaast is gekeken
welke boomvarianten er mogelijk zijn door visuele variabelen aan te passen. Onder deze visuele variabelen wordt bijvoorbeeld het mogelijk plaatsen van eindknopen naar de grond en het veranderen van de hoek van de getekende takken verstaan.
visualisatiemogelijkheden zijn vervolgens afgezet tegen de weergave van het huidige boomdiagram in SynTree. Het is de bedoeling dat de gekozen visualisatiemogelijkheid functioneel aansluit bij het huidige boomdiagram in SynTree (op basis van het geprogrammeerde uitlijnalgoritme) en het moet daarnaast tenminste één extra visuele variabele van Bertin kennen ten opzichte van het huidige boomdiagram.
1
Inhoudsopgave
Dankwoord ... 3 1. Inleiding ... 4 2. Theoretisch kader ... 6 2.1 Visualisatie en interactie ... 6 2.1.1 Informatievisualisatie ... 6 2.1.2 Cognitieve interactie ... 82.1.3 Visuele variabelen / representatie ... 8
2.2 Hiërarchieën ... 10 2.2.1 Boomdiagram ... 10 2.2.2 Bracketed diagram ... 11 2.3 Uitlijnalgoritme ... 11 2.3.1 Uitlijnen ... 12 2.3.2 Algoritme ... 12 2.3.3 Samengevoegd: uitlijnalgoritme ... 13 3. Methodologie ... 15 3.1 Deskresearch (inventarisatie) ... 15
3.2 Vergelijkend onderzoek (analyse) ... 15
3.3 Evaluerend onderzoek ... 16
3.4 Instrument: de programmeertaal Python ... 16
3.4.1 Python ... 16
3.4.2 pyCairo ... 17
3.4.3 xml.sax ... 18
4. Visualisatie in SynTree ... 20
4.1 SynTree ... 20
4.2 Toegepaste visualisatiemogelijkheden in vergelijkbare software ... 20
4.3 Boomdiagram in SynTree ... 22 4.4 SVG-structuur ... 23 4.5 Intern uitlijnalgoritme ... 24 4.6 pySynTree ... 31 5. Visualisatiemogelijkheden ... 33 5.1 Boomvarianten ... 33
2
5.1.2 Eindknopen naar de grond ... 35
5.1.3 Zwevende eindknopen ... 36
5.1.4 De hoek van getekende takken ... 36
5.1.5 Ruimte-optimalisatie in de uitlijning ... 37
5.1.6 Verticaal gecentreerde uitlijning knopen ... 38
5.1.7 Gehoekte takken ... 38
5.1.8 Omgedraaide boom ... 39
5.2 Afgeleide boomvisualisaties ... 39
5.2.1 Dendrogram ... 39
5.2.2 Cladogram ... 42
5.2.3 Gelijk gekoppelde zusterschap ... 44
5.3 Alternatieve representaties ... 45
5.3.1 Boxnotatie ... 45
5.3.2 Transition network ... 46
5.4 Visuele variabelen van de visualisatiemogelijkheden ... 47
6. Discussie van mogelijke representaties ... 49
7. Proof of Concept... 53
7.1 Dendrogram ... 53
7.1.1 Eindknopen naar de grond ... 54
7.1.2 Gehoekte takken ... 54
8. Conclusie en toekomstig onderzoek ... 57
Literatuurlijst ... 60
Bijlage I: opmaak van een SVG-bestand door SynTree ... 62
Bijlage II: pseudocode voor de positionering van de x-positie van een knoop in een boomdiagram .. 65
Bijlage III: output boomdiagrammen van SynTree en pySynTree ... 66
3
Dankwoord
Middels dit dankwoord wil ik een aantal mensen met nadruk bedanken.
Ten eerste is dit mijn eerste begeleidster: Leonie Bosveld-de Smet. Toen ik zoekende was naar een onderwerp kwam zij met het onderwerp van deze scriptie. Aangezien ik weinig specifieke kennis had van visualisatiemogelijkheden en linguïstiek heeft zij mij keer op keer relevante theorieën aangereikt en mij de juiste richting ingestuurd. Ik heb het (mijn hele studie al) bewonderingswaardig gevonden dat zij altijd tijd weet vrij te maken voor haar studenten, hoeveel overig werk er ook op haar ligt te wachten.
Natuurlijk wil ik ook mijn tweede begeleider Mark de Vries bedanken. Ik ben bevoorrecht geweest met een tweede begeleider die mij in het proces van het schrijven van deze scriptie veel meer hulp bood dan menig ander tweede begeleider zal aanbieden. De rust en goede onderbouwing van zijn feedback gaven mij telkens weer nieuwe energie om verder te gaan.
Mario Ganzeboom, hoofdontwikkelaar van SynTree, kan ik niet overslaan in mijn dankwoord. Hij heeft mij onder andere geholpen met de technische kneepjes om de werking van SynTree ‘onder de motorkap’ beter te kunnen begrijpen.
Voor mijn beide begeleiders geldt dat ik het erg fijn vond dat ze meer waren dan mijn begeleiders. Naast een scriptie begeleidende rol is het erg fijn om ‘menselijke’ begeleiders te hebben die ook in jou als mens geïnteresseerd zijn en een luisterend oor kunnen bieden wanneer nodig.
Tenslotte gaat mijn grootste dank uit naar mijn ouders voor de onafgebroken financiële en morele steun bij het doorlopen van mijn studies.
4
1. Inleiding
Eén van de doelen van deze scriptie is om de verschillende visualisaties van hiërarchieën in kaart te brengen. Hierbij ligt de focus op het visualiseren van linguïstische hiërarchische constituentstructuren. Een boomdiagram is in dit veld een algemeen toegepaste visualisatie. In deze scriptie wordt ook gekeken welke visuele eigenschappen van een boomdiagram kunnen worden aangepast. In de huidige theorie is hier geen allesomvattend overzicht van te vinden. Deze eigenschappen zullen worden gebruikt om daarnaast op basis van de theorie van Bertin de visuele verschillen en doelen tussen de te onderzoeken visualisatiemogelijkheden te vergelijken.
Het doel van dit onderzoek is om uiteindelijk een visualisatie te vinden die in staat is om de exploratie van een, door een onderzoeker opgestelde, hypothese te vergemakkelijken. Deze visualisatie zal in de vorm van Python programmeercode en als pseudocode worden opgeleverd. Om dit te bewerkstelligen zal stap voor stap worden gekeken welke functies nodig zijn om deze visualisatie te kunnen realiseren door middel van programmeercode.
Tijdens deze scriptie zal rekening worden gehouden met de software SynTree. SynTree is een programma waarin boomdiagrammen kunnen worden getekend. Het is interactieve software: binnen SynTree kan de gebruiker onder andere knopen en takken toevoegen, wijzigen en verwijderen. De primaire doelgroep van SynTree zijn taalkundigen, die SynTree kunnen gebruiken om taalkundige boomstructuren te tekenen die de grammaticale opbouw van één of meerdere zinnen weergegeven. SynTree is op dit moment nog in de fase van actieve softwareontwikkeling binnen de Rijksuniversiteit Groningen.
De vraag die in het onderzoek centraal staat is:
Wat zijn goede en realiseerbare visualisatiemogelijkheden voor het representeren van een linguïstische hiërarchische constituentstructuur in SynTree?
Om de onderzoeksvraag te kunnen beantwoorden is deze opgedeeld in meerdere deelvragen: 1. Welke grafische elementen zijn bepalend voor het vormgeven van een boomdiagram? 2. Welke visuele alternatieve representaties ten opzichte van een boomdiagram bestaan er om
linguïstische hiërarchieën weer te geven?
3. Hoe verschillen de beschikbare representaties onderling op basis van grafische variabelen? 4. In hoeverre kunnen de ingebouwde visualisatiefuncties voor het weergeven van de huidige
boomdiagram in SynTree worden aangepast voor het visualiseren van de verschillende beschikbare representaties?
6
2. Theoretisch kader
In dit theoretische kader worden theorieën aangekaart die zullen worden gebruikt om uiteindelijk de onderzoeksvraag te kunnen beantwoorden. In paragraaf 2.1 wordt uitgelegd wat onder visuele representaties wordt verstaan en waarom het interessant is om (linguïstische) informatie interactief voor een gebruiker te visualiseren. Ook worden visuele variabelen onderscheiden. Het doel hiervan is om deze variabelen als middel in te zetten bij het vergelijken van de verschillende mogelijkheden voor het visualiseren van hiërarchische informatie. Zo kan worden onderzocht welke visualisatiemogelijkheden voor welk visueel doel kunnen worden gebruikt. Over het algemeen genomen zijn er vele verschillende soorten hiërarchische informatie, niet alleen op linguïstisch maar ook op bijvoorbeeld biologisch gebied (Stewart, 1976). In deze scriptie wordt gekeken naar linguïstische hiërarchieën. In paragraaf 2.2 worden de visualisatiemogelijkheden van linguïstische hiërarchische informatie in SynTree toegelicht: het boomdiagram (een syntaxisboom) en het bracketed diagram. De notatie van een bracketed diagram wordt in deze scriptie gebruikt om de opzet van visualisatiemogelijkheden te verduidelijken. Ten slotte wordt er dieper ingegaan op de term uitlijnalgoritme in paragraaf 2.3. En op het specifieke algoritme dat gebruikt is voor het uitlijnen van het boomdiagram in SynTree.
2.1 Visualisatie en interactie
In deze paragraaf worden verschillende relevante aspecten van visualisatie van informatie toegelicht. Ten eerste wordt er in subparagraaf 2.1.1 dieper ingegaan op informatievisualisatie. In subparagraaf 2.1.2 wordt gekeken naar de cognitieve interactie van de gebruiker met informatievisualisatie. In subparagraaf 2.1.3 worden de door Bertin gedefinieerde visuele variabelen van informatievisualisatie besproken.
2.1.1 Informatievisualisatie
Visualisatie is het presenteren van allerlei type informatie op een visuele manier. Dit gebeurt (hoofdzakelijk) om mensen te helpen inzicht te krijgen in een bepaald type informatie. Een belangrijk gegeven hierbij is het type data dat weergegeven moet worden. Spence (2007) onderscheidt de volgende typen data: kwantitatief, ordinaal, categorisch en relationeel.
In algemene zin kunnen deze vier typen data op drie verschillende manieren worden gevisualiseerd: wetenschappelijk, geografisch en informatiegericht. Een wetenschappelijke visualisatie is bijvoorbeeld een X-ray CT scan waarin de afstand tot de botten wordt gevisualiseerd door gebruik te maken van verschillende kleuren. Geografische visualisatie is bijvoorbeeld een kaart met data per provincie waarin de hoeveelheid mensen met een bepaalde voornaam wonen wordt getoond door middel van het gebruik van verschillende kleuren. Deze scriptie zal zich richten op de laatstgenoemde visualisatie: informatiegerichte visualisatie, oftewel: informatievisualisatie. Card et al. (1999, 6) kent de volgende definitie toe aan informatievisualisatie: “The use of computer-supported, interactive,
visual representations of abstract data to amplify cognition”. Hierbij is de abstracte data de informatie die door middel van computers op een interactieve wijs visueel wordt gepresenteerd om
7 In deze scriptie wordt toegespitst op de visualisatie van linguïstische informatie. Er is hier sprake van informatievisualisatie van syntactische structuurdata. Het doel hiervan is om informatie over de zinsstructuur over te brengen.
Cheng (1996) toont aan dat het cruciaal is om de juiste representatie in de juiste situatie toe te passen om overzicht te geven van en inzicht te bieden in informatie. Novick & Hurley (2001) introduceren ditzelfde idee door het vinden van de juiste representatie te vergelijken met het gebruik van het juiste gereedschap: in verschillende situaties heb je verschillend gereedschap nodig. Een hamer en een schroevendraaier kunnen beide goed gereedschap zijn, maar bij een spijker heb je een hamer nodig en bij een schroef een schroevendraaier. Zo heb je bij informatievisualisatie van specifieke informatie ook keuze uit verschillende visualisaties. Een boomdiagram zal bijvoorbeeld beter hiërarchische informatie kunnen visualiseren dan een histogram.
Maar visualisatie is niet het weergeven van mooie plaatjes. Zoals Card et al. (1999, 6) het goed verwoorden: “The purpose of visualization is insight, not pictures”. Een goede visualisatie moet inzicht geven en het liefst ook uitdagen, met het uiteindelijke doel om nieuwe inzichten te genereren.
Card et al. (1999) hebben het proces vanaf ruwe data tot het tonen van deze data in een visuele vorm aan de gebruiker uitgewerkt (zie figuur 1).
figuur 1: het reference model of visualization van Card et al. (1999)
8 structuur aan kan passen zoals bijvoorbeeld het veranderen van de positie en het schalen van de structuur. Dit gebeurt als gevolg van de interactie tussen het systeem en de gebruiker.
2.1.2 Cognitieve interactie
Naast het fysieke werk zoals het aanklikken van de knop om de te onderzoeken representatie te tonen is er ook een bepaalde mate van cognitieve inspanning van de gebruiker vereist om tot het ‘ah, ha!’ moment te komen. De representatie zal zich baseren op de ingevoerde informatie in de boomstructuur in SynTree. Het gevoerde proces van aanklikken naar interpretatie naar uiteindelijk besluitvorming valt onder stepped interaction (Spence, 2007). De gebruiker kan de boomstructuur zo aanpassen dat deze beter valt in de nieuwe representatie. Er kan onderscheid worden gemaakt in visuele middelen zoals kleur en vorm. Zo kan de gebruiker doen aan cognitive offloading: de mens kan visueel zeer veel informatie detecteren, alleen kan het menselijk brein maar een beperkte hoeveelheid verwerken. Een afbeelding is makkelijker voor de mens te verwerken dan tekst (Larkin & Simon, 1995 geciteerd door Bosveld-de Smet, 2005). Door een alternatieve visuele representatie te tonen, genereert het menselijke brein van de gebruiker mogelijk nieuwe inzichten.
2.1.3 Visuele variabelen / representatie
Bertin wordt gezien als één van de grondleggers van informatievisualisatie. Hij heeft een leidraad opgesteld om de geschiktheid te kunnen testen van visualisaties voor verschillende einddoelen. Bertin heeft vier doelen gedefinieerd die zijn gericht op informatievisualisatie: associatie, selectie, volgorde en kwantiteit. Daartegenover stelt hij meerdere mechanismen voor waarmee deze taken het beste uitgevoerd kunnen worden, te weten: veranderingen van grootte, waarde, structuur/textuur, kleur, oriëntatie en vorm. Deze mechanismen en doelen zijn afgebeeld in figuur 2 en zijn middelen om overeenkomsten en verschillen tussen informatie-eenheden weer te geven. Bovenaan figuur 2 staan de vier kolommen met basisdoelen. Hierbij is een markering een representatie van informatie anders dan de zelf gepresenteerde informatie. Dit zijn (Spence, 2007):
Association: het doel hiervan is om te kijken in hoeverre de markeringen als vergelijkbaar kunnen worden waargenomen.
Selection: de bedoeling hiervan is om te kijken of de (families van) markeringen als verschillend kunnen worden waargenomen.
Order: hier ligt de focus of de markeringen kunnen worden waargenomen als geordend. Quantity: het doel hiervan is om te kijken of de markeringen als evenredig aan elkaar kunnen worden waargenomen.
De visuele variabelen worden ook wel retinale1 variabelen genoemd. Deze zijn in figuur 2 weergegeven op de verticale as. Deze zijn niet gerangschikt op relevantie, Bertin heeft deze geplaatst op basis van het aantal taken dat elk mechanisme kan ondersteunen.
9 figuur 2: Bertin zijn variabelen die onderscheid kunnen maken tussen informatie-eenheden (Spence, 2007).
Size
Met grootte (size) is het mogelijk om markeringen te laten variëren in grootte met het doel een verschil in waarde van betreffende informatie-eenheden te laten zien, terwijl het type informatie wel vergelijkbaar is. Zo kunnen cirkels van klein naar groot zijn gerangschikt. In figuur 3 wordt dit geïllustreerd.
10 Value
De waarde (value) geeft aan hoe licht of donker een bepaalde kleur is weergegeven. Dit komt bijvoorbeeld voor als elementen in een bepaalde volgorde op kleur zijn gerangschikt. De lichte kleuren (zoals grijs) zijn dan bijvoorbeeld de minste waarde en de elementen met de meeste waarde hebben donkere kleuren (zoals zwart).
Texture
De structuur (texture) is de ruimtelijke frequentie van de patroon van componenten. Een voorbeeld is bijvoorbeeld de dikte van een lijn. Snelwegen worden bijvoorbeeld vaak dikker aangegeven op kaarten dan landweggetjes.
Colour
Onder kleur (colour) wordt het verschil in kleuren in elementen bedoeld, zoals geel, blauw en rood. Orientation
Oriëntatie (orientation) wordt gebruikt voor terugkerende attributen die zich op specifieke punten richten. Zo kan bijvoorbeeld een pijl worden onderscheiden die de windrichting aangeeft. Het is anders misschien lastig om als gebruiker de richting in te kunnen schatten als deze bijvoorbeeld enkel bestaat uit een lijn.
Shape
Vorm (shape) houdt in hoe een element is weergegeven. Meestal worden elementen met dezelfde vorm samen gecategoriseerd. Vormen kunnen bijvoorbeeld sterren zijn, maar ook cirkels en vierkanten.
2.2 Hiërarchieën
De Oxford dictionary omschrijft een hiërarchie als volgt: “a system in which members of an
organization or society are ranked according to relative status or authority”2. De leden (members) zijn in dit geval de knopen van een boomdiagram (organization or society) welke ook weer gerangschikt (ranked) zijn op moeder- en kind(eren)relatie (relative status or authority). In SynTree wordt primair gebruik gemaakt van een boomdiagram (subparagraaf 2.2.1). In de nieuwste versie van SynTree is ook de mogelijkheid aanwezig om de weergave uit te breiden met een bracketed diagram (subparagraaf 2.2.2).
2.2.1 Boomdiagram
Een hiërarchie is duidelijk terug te vinden in een boomdiagram, de standaardweergave in SynTree (zie figuur 4). Het wordt een boomdiagram genoemd omdat het op een boom lijkt, maar dan omgedraaid (de bladeren bevinden zich onderaan). Boomdiagrammen worden ook binnen de linguïstiek toegepast. Deze boomdiagrammen woorden syntaxisbomen genoemd (Stewart, 1976). Ze geven de hiërarchische constituentstructuren van zinnen weer. Voor deze weergave is SynTree dan ook geoptimaliseerd.
11 figuur 4: een boomdiagram in SynTree
In een boomdiagram wordt het begin van de boom bovenaan getekend. Dit wordt de root (of wortel) genoemd, S in figuur 4. Elk element in het boomdiagram is een knoop. Bij een verbinding tussen twee knopen op een verschillend niveau (zoals tussen NP en John in figuur 4) is de bovenste knoop (NP) de
ouder van zijn kind (John). Knopen zoals V en NP hebben dezelfde ouder (VP) en heten daarom broers
of zussen. Een knoop zonder kinderen wordt ook wel een blad of een eindknoop genoemd.
2.2.2 Bracketed diagram
Naast boomrepresentaties worden ook tekstuele representaties steeds meer alledaags (Culy et al., 2012). Dit zijn de zogeheten haakjesdiagrammen (bracketed diagrams). Ook dit diagram is gebaseerd op de hiërarchische constituentstructuren van zinnen. De laatste versie van SynTree kent deze uitbreiding ook, na onderzoek van Siliakus (2011) en implementatie door Hofstra in 2013.
Het haakjesdiagram van figuur 4 is:
[S [NP John] [VP [V lost] [NP [DET his] [N pants]]]]
Zoals hierin te zien is, wordt elke ouderknoop in subscript weergegeven. Om elke ouder met kind(eren) staan twee haken om de scheiding aan te geven. Elke spatie voor een openingshaak betekent dat er sprak is van een nieuwe knoop. Volgt de spatie een subscript dan betreft het een kind, volgt het een sluitende haak, dan betreft het een zusterknoop.
2.3 Uitlijnalgoritme
In deze scriptie wordt onder andere naar het uitlijnalgoritme van het boomdiagram in SynTree gekeken. Het uitlijnalgoritme is programmeer-technisch een zeer belangrijk onderdeel van SynTree. Deze reeks stappen zorgt ervoor dat de huidige visuele weergave, het boomdiagram, altijd hetzelfde en consistent wordt weergegeven. Een algoritme wordt als volgt gedefinieerd: “een reeks stappen die
bepalen hoe de verschillende knopen in een boomstructuur worden gepositioneerd ten opzichte van elkaar”. De term uitlijnalgoritme bestaat uit twee woorden: uitlijnen en algoritme. In de komende
12
2.3.1 Uitlijnen
Het begrip uitlijning wordt in vele verschillende gebieden gebruikt en heeft overal een (net iets) andere betekenis. In deze scriptie wordt uitgegaan van de set van regels die in SynTree worden toegepast. Afhankelijk van de toegepaste lay-outkenmerken worden de verschillende knopen ten opzichte van elkaar geplaatst. Hierbij moet ook rekening worden gehouden met de marge (witruimte) tussen de verschillende knopen op hetzelfde niveau en op verschillende niveaus. Het positioneren en de toegepaste marge bij elkaar genomen heeft als resultaat de uiteindelijke lay-out.
2.3.2 Algoritme
Een algoritme is een reeks stappen die bepalen hoe een taak wordt uitgevoerd (Brookshear, 2011). Het is een stappenplan waarbij vanaf een begintoestand een einddoel wordt bereikt. Dit einddoel kan van alles zijn, maar heeft wel een duidelijk resultaat. Een voorbeeld van een algoritme is het bouwplan van een zelfbouwpakket. Door het bouwplan stap voor stap te doorlopen zal het eindresultaat dat zijn waarvoor het pakket is aangeschaft. Diverse uitlijnalgoritmen voor boomdiagrammen zijn door Kurvers (2010) geïnventariseerd en gedocumenteerd.
Besturingsprocessen, zoals opeenvolging, keuze en herhaling van stappen vormen een belangrijk onderdeel van algoritmen. Gangbare begrippen die van toepassing zijn op herhaling zijn iteratie en recursie. Iteratie impliceert een lus-structuur. Recursie is een herhaling in zichzelf, een soort ‘ingebedde’ herhaling totdat een bepaald gesteld einde (doel) is bereikt. In het voorbeeld in figuur 5 wordt het eerste beeld in een kader met de tekst “RECURSION Here we go again” herhaald. Bij de plaatsing van een nieuw scherm wordt de grootte en positie van het laatste kader genomen en wordt het volgende kader iets verkleind en juist geplaatst ten opzichte van het vorige kader. Volgens ontwikkelaar Mario Ganzeboom maakt het uitlijnalgoritme in SynTree gebruik van recursie. De knopen worden van onderaf recurisef op dezelfde manier gepositioneerd, net zolang tot de wortelknoop is bereikt.
figuur 5: een voorbeeld van recursie3
13 Het werk dat met recursie wordt gedaan kan ook met een iteratie worden gedaan. Dit is een herhalend proces tot een doel is bereikt. Hiervoor wordt in de informatica vaak lus-constructies gebruikt. Veelgebruikte lussen zijn de for-lus en de while-lus.
Om het verschil tussen recursie en iteratie te verduidelijken, heb ik een voorbeeld in een simpele programmeertaal bijgevoegd. Het voorbeeld gaat over het berekenen van de faculteit van een getal in Python, 6! in mijn voorbeeld (6! = 6 * 5 * 4 * 3 * 2 * 1).
Iteratie:
def faculteit(getal):
uitkomst = 1 while(getal > 0): uitkomst *= getal getal -= 1 return uitkomst print(faculteit(6)) Recursie:
def faculteit(getal):
if(getal < 2):
return 1
else:
return (getal * faculteit(getal-1))
print(faculteit(6))
In de recursieve functie wordt dezelfde functie (onderstreept in het voorbeeld) telkens opnieuw aangeroepen. Zo wordt de berekening uitgevoerd binnen de functie door deze te blijven aanroepen totdat een meegegeven eindpunt is bereikt. Voor simpele berekeningen is recursie vaak lastiger om uit te werken dan een iteratieve aanpak. Ook dan is een iteratieve aanpak vaak veel duidelijker. Naarmate de code voor een herhalend proces complexer wordt, zoals bij recursieve structuren van bijvoorbeeld bomen, kan een recursieve aanpak voor leesbaardere code zorgen.
2.3.3 Samengevoegd: uitlijnalgoritme
Als nu de twee begrippen uitlijnen en algoritme worden samengevoegd, kan de volgende betekenis hieraan worden gegeven: een reeks stappen die bepalen hoe de verschillende knopen in een
boomstructuur worden gepositioneerd ten opzichte van elkaar. Het plaatsen van elke knoop gebeurt
in SynTree (Kurvers, 2010) van onderaf de boom naar boven. Hiernaast wordt voor de positionering regelmatig naar knopen die zich op een lager niveau en zowel links als rechts op hetzelfde niveau naast de te plaatsen knoop bevinden gekeken.
Samenvattend
14 een ‘ah, ha!’ moment komen. De methoden om geschikte visualisaties te vinden en hoe je er achter kunt komen welke hiervan aansluiten bij codefuncties van SynTree worden in het volgende hoofdstuk besproken.
15
3. Methodologie
In dit hoofdstuk zal de onderzoeksstrategie van deze scriptie worden besproken om uiteindelijk met deze methoden een antwoord te kunnen geven op de onderzoeksvraag. In paragraaf 3.1 wordt ingegaan op de toegepaste deskresearch methode om een inventarisatie van hiërarchische visualisatiemogelijkheden te geven. In paragraaf 3.2 wordt de opzet van het vergelijkende onderzoek toegelicht waarin de beschikbare visualisatiemogelijkheden uit de deskresearch worden vergeleken aan de hand van visuele variabelen uit de theorie. Daarnaast wordt ook gekeken in hoeverre de mogelijkheden aansluiten bij de bestaande visualisatiefuncties in SynTree. In paragraaf 3.3 wordt toegelicht hoe de resultaten uit paragraaf 3.2 zullen worden geëvalueerd om zo de meest geschikte visualisatiemogelijkheid te vinden. Uiteindelijk zal de implementatie van de geschikte visualisatiemogelijkheid stap voor stap worden uitgewerkt en worden geprogrammeerd en getest in Python (paragraaf 3.4).
3.1 Deskresearch (inventarisatie)
In de eerste fase van het onderzoek wordt er deskresearch uitgevoerd. Waar dit voorheen voornamelijk in de bibliotheek plaatsvond, zal ik voornamelijk papers via scholar.google.nl opzoeken en doorlezen. In de verschillende papers wordt vaak ook weer verwezen naar relevante papers welke ook zeer relevant voor mijn scriptie kunnen zijn. Daarnaast zijn mijn scriptiebegeleiders een bron van informatie qua beschikbare relevante papers en boeken. Zo maak ik op basis van de doorgenomen theorie een inventarisatie van visualisatiemogelijkheden voor het visualiseren van hiërarchische informatie.
Er wordt gezocht naar algemene visuele representaties die in het veld van de syntaxis al eerder zijn gebruikt, en het liefst al meerdere malen. Als de verschillende visualisatiemogelijkheden in kaart zijn gebracht, zullen per mogelijkheid papers over de specifieke mogelijkheid worden doorgenomen. Zo kan ik gedetailleerde kennis per visualisatie documenteren.
Daarnaast zal worden gekeken naar de verschillende visuele verschijningsvormen van een syntaxisboom. Hiervoor zal worden gezocht naar boomdiagrammen in het algemeen en toegepaste visuele variabelen in SynTree, zoals witruimte (marge) tussen knopen. In het verlengde hiervan zal ik zelf ook logisch beredeneren op basis van de gevonden boomdiagrammen welke visualisaties ook nog meer mogelijk zijn. Zo wordt er één groot overzicht gegenereerd van mogelijkheden voor het weergeven van een boomdiagram.
3.2 Vergelijkend onderzoek (analyse)
16 Ook wordt er gekeken naar het uitlijnalgoritme in SynTree. De wijze waarop een boom op basis van dit algoritme wordt opgebouwd moet zoveel mogelijk hergebruikt worden. Een boom wordt bijvoorbeeld in SynTree van onderaf opgebouwd. Een eis is daarom bijvoorbeeld dat een visualisatiemogelijkheid niet vanaf de wortelknoop wordt opgebouwd. Dit vereist anders teveel aanpassingen in het uitlijnalgoritme.
Het is de bedoeling dat een nieuwe visualisatiemogelijkheid aansluit bij de al bestaande visualisatiefuncties in SynTree. Voor het tekenen van de huidige boomweergave in SynTree zijn er al verschillende functies geprogrammeerd en wordt er gebruik gemaakt van bestaande functies uit externe bibliotheken. Er wordt in dit onderzoek rekening gehouden met het hergebruiken van zowel de geschreven functies als de bestaande kennis van de geïmporteerde functies.
De relevante visuele variabelen van Bertin voor dit onderzoek zullen samen met de al beschikbare visualisatiefuncties in SynTree (zie paragraaf 4.3) in een tabel worden geplaatst. Hierna zal per visualisatiemogelijkheid worden gekeken in hoeverre deze de visuele variabelen uit de tabel ondersteunt.
3.3 Evaluerend onderzoek
Uiteindelijk zal op basis van de resultaten uit het vergelijkende onderzoek worden gekeken welke van de geïnventariseerde visualisatiemogelijkheden voldoet of voldoen aan de volgende eisen:
- Er zijn (op basis van de variabelen van Bertin) extra doel(en) beschikbaar ten opzichte van het huidige boomdiagram in SynTree.
- Er is aansluiting bij de huidige ingebouwde visualisatiemogelijkheden die SynTree al kent. De visualisatiemogelijkheid die het best aansluit op de twee bovenstaande punten zal in detail stap voor stap worden uitgewerkt om te kijken of de implementatie in SynTree met het huidige uitlijnalgoritme zonder te veel grote wijzigingen in het huidige uitlijnalgoritme aan te brengen kan worden geïmplementeerd.
3.4 Instrument: de programmeertaal Python
In deze paragraaf wordt eerst kort ingegaan op de programmeertaal Python en waarom deze is gebruikt (subparagraaf 3.4.1). Vervolgens worden twee bibliotheken toegelicht die zijn gebruikt voor het programmeren van het uitlijnalgoritme van SynTree in Python. Deze bibliotheken zijn pyCairo (subparagraaf 3.4.2) voor het grafische werk en xml.sax (subparagraaf 3.4.3) om een SVG-bestand in en uit te kunnen lezen.
3.4.1 Python
Python is een programmeercode die begin jaren ‘90 is verschenen en is ontworpen door Guido van Rossum4. Het kent een interpreter die alle programmeercode in één keer omzet zodat de
17 programmeercode meteen uitvoerbaar is, in tegenstelling tot bijvoorbeeld Java waar de programmeercode eerst middels een compiler gecompileerd wordt opgeslagen (Zelle, 2010). Python kent een grote bibliotheek aan ingebouwde functies en deze bibliotheek is ook uit te breiden met (extern) te downloaden bibliotheken.
Om het uitlijnalgoritme goed te begrijpen heb ik het nagebouwd in Python. De hoofdreden hiervoor is dat ik geen Java ken, de programmeertaal waarin SynTree is opgemaakt. Door zelf een duplicaat van de basis van SynTree te bouwen met enkel de basisfuncties heb ik veel inzicht gekregen in de werking van het uitlijnalgoritme.
Uiteindelijk zal er een stappenplan worden opgesteld waarin stap voor stap wordt uitgelegd hoe de voorgestelde visualisatiemogelijkheid kan worden geïmplementeerd. Daarnaast zal er ook pseudocode worden geschreven om de visualisatie te kunnen verwezenlijken. Hierdoor kan de representatie later in SynTree door middel van Java relatief eenvoudig worden ingebouwd. Door een replica van SynTree in Python te bouwen, kan ik deze later uitbreiden met daadwerkelijk werkende programmeercode. Zo kan ik testen in hoeverre de uiteindelijke optimaal bevonden representatie aansluit op het huidige uitlijnalgoritme in SynTree.
3.4.2 pyCairo
In deze subparagraaf wordt op technisch niveau ingegaan op de gebruikte functies van pyCairo in pySynTree. Enige kennis van programmeren is wellicht vereist om deze subparagraaf goed te kunnen begrijpen.
Cairo is een bibliotheek waarmee 2D grafische vectoren kunnen worden getekend. Het is geschreven in C, en ondersteunt meerdere programmeertalen naast Python: Perl, C++, C# en Java. Met de bibliotheek kunnen grafische bestanden worden gecreëerd, zoals PNG-, PostScript (PS) en PDF-bestanden. pyCairo is de naam van de variant van Cairo die is geschreven voor Python. Qua mogelijkheden kan het worden vergeleken met de GDI+ bibliotheek in Windows en Quartz 2D op Mac. Cairo is een open source initiatief.
Om van onder andere de tekenfuncties van pyCairo gebruik te kunnen maken, moet er eerst een tekenoppervlak worden gecreëerd met pyCairo. Dit wordt ook wel het surface oppervlak genoemd. Ik gebruik hier primair de functie ImageSurface() voor, waarmee de breedte en de kwaliteit van het te exporteren grafische bestand kan worden opgemaakt waarmee wordt gewerkt. De surface wordt vervolgens in de Content() functie geplaatst, waarna alle overige functies hiermee kunnen communiceren. De volgende stap is het verfijnd afstemmen van de weergave door het lettertype met select_font_face() en de lettergrootte met set_font_size() in te stellen.
Een zeer fijne ondersteunde optie is het kunnen laten uitrekenen van de breedte van tekst. Met de functie text_extents() kan een tekst worden meegegeven welke vervolgens onder andere de breedte en de hoogte van de tekst kan teruggeven, op basis van de eerder ingestelde lettertype en lettergrootte. Deze functie wordt gebruikt om coördinaten uit te rekenen.
18 coördinaten wordt het eindpunt van een lijn bepaald en met het meegeven van een waarde aan
set_line_width() wordt de dikte van de lijn ingesteld. Met stroke() wordt de lijn getekend. Voor het
plaatsen van de tekst van een knoop is de functie show_text() nodig.
Uiteindelijk worden er verschillende functies gebruikt voor het exporteren van verschillende grafische bestanden. Voor het exporteren van een PNG-bestand wordt gebruik gemaakt van de
write_to_png() functie. Voor het exporteren van een PDF- en PS-bestand werkt het allemaal net iets
anders. Hiervoor moet eerst een surface worden opgemaakt met de PDFSurface() functie, in plaats van de ImageSurface() functie. Ook de PS-bestanden worden met de PDFSurface() functie opgemaakt, anders dan de naam doet vermoeden. Vervolgens worden alle vectoren op dezelfde manier geplaatst als in een PNG-bestand, maar wordt de export naar een PDF- of PS-bestand verzorgd door middel van de show_page() functie.
3.4.3 xml.sax
Voor Python zijn er verschillende mogelijkheden om bestanden met XML-inhoud in te kunnen lezen. Een voorbeeld hiervan is het vroeger veelgebruikte MiniDom. Deze bibliotheek is echter heel traag, doordat het meteen het hele XML-/SVG-bestand inleest in het geheugen5. Een andere mogelijkheid is ElementTree dat vele malen sneller is, maar bij het testen liep ik tegen meerdere beperkingen op voor het inlezen van het gecreëerde SVG-bestand door SynTree. De documentatie voor ElementTree is ook zeer slecht onderhouden en erg beperkt. De laatste stabiele release dateert ook al uit 2007 6. Uiteindelijk ben ik bij de xml.sax bibliotheek7 van Python terecht gekomen. SAX8 (Simple API for XML) is een standaard die is gebaseerd op de standaard van de originele Java implementatie. Deze bibliotheek kent een goede documentatie en op het internet zijn meerdere recente voorbeelden met werkbare programmeercode te vinden.
De eerste stap is om een bestand met XML-inhoud te definiëren en deze aan te roepen. De parser van xml.sax zal deze vervolgens ontleden volgens vastgelegde grammatica (parset). Vervolgens leest de xml.sax bibliotheek het SVG-bestand regel voor regel in. De ContentHandler() functie maakt dit proces mogelijk en is in feite één van de belangrijkste functies van xml.sax. Hierdoor kan een programmeur aan elke afzonderlijk ingelezen regel uit het SVG-bestand specifieke geprogrammeerde acties koppelen. Het verwerkingsproces wordt schematisch weergegeven in figuur 6.
figuur 6: verwerkingsproces van een bestand met XML-inhoud door xml.sax
5
http://wiki.python.org/moin/MiniDom (laatst bezocht: 29 juni 2013)
6
http://effbot.org/downloads#elementtree (laatst bezocht: 29 juni 2013)
7
http://docs.python.org/3.3/library/xml.sax.html (laatst bezocht: 29 juni 2013)
20
4. Visualisatie in SynTree
De optimaal bevonden visualisatie zal worden geïmplementeerd in SynTree. Een korte toelichting over de achtergrond van SynTree wordt in paragraaf 4.1 gegeven. Naast SynTree bestaat er ook andere software om boomstructuren te tekenen. De functies van deze software zullen worden bekeken in paragraaf 4.2, voortbordurend op de bevindingen van Siliakus (2011). In paragraaf 4.3 wordt gekeken hoe het boomdiagram wordt weergegeven in SynTree. De boomstructuur wordt opgeslagen in een SVG-bestand (paragraaf 4.4) en uitgelijnd in SynTree door middel van een algoritme (paragraaf 4.5). Dit hoofdstuk wordt afgesloten met een uitleg van de door mij ontwikkelde software in Python welke ook een geschikt SVG-bestand kan converteren tot een boomdiagram op basis van het uitlijnalgoritme van SynTree.
4.1 SynTree
SynTree is interactieve software waarmee boomstructuren kunnen worden getekend. De primaire doelgroep van SynTree zijn taalkundigen. SynTree kent specifieke functies voor het creëren van een syntactische boom zoals het tekenen van multidominantie tussen knopen en het toevoegen van driehoeken.
SynTree is geschreven in de programmeertaal Java. Er is onder meer voor Java gekozen, omdat dit een multiplatform programmeertaal is. Dit betekent dat SynTree op meerdere besturingssystemen werkt, zoals Windows, Linux en Mac. SynTree wordt ontwikkeld aan de Rijksuniversiteit Groningen in het kader van het ERC-project ‘Incomplete Parenthesis’. De getekende boomstructuren worden geëxporteerd en geïmporteerd in SVG-formaat.
4.2 Toegepaste visualisatiemogelijkheden in vergelijkbare software
In deze paragraaf worden de visualisatiemogelijkheden in verschillende andere software bekeken. De lijst die als basis hiervoor wordt genomen komt uit de scriptie van Siliakus (2011). Er zal worden gekeken of de bekende software van destijds nog verder is ontwikkeld. Het doel van dit onderzoek is om te ontdekken of andere visualisatiemogelijkheden, naast het boomdiagram, in andere softwarepakketten zijn toegevoegd. Als dit het geval is, dan is hier misschien wetenschappelijke onderbouwing voor gedocumenteerd. Ook kan worden geconcludeerd dat een bepaalde toegevoegde visualisatiemogelijkheid meer is geaccepteerd voor het visualiseren van hiërarchische informatie.
21 tabel 1: details van informatievisualisatiesoftware
Naam Ontwikkelaar Versie Datum laatste versie Linguistic Tree
Constructor9
Ulrik Sandborg-Petersen. 3.1.0 31 oktober 2011 - Vis. mogelijkheden: Boomdiagram
phpSyntaxTree10 Mei Eisenbach & André Eisenbach
1.10 7 mei 2005 - Vis. mogelijkheden: Boomdiagram
Syntactica11 Richard K. Larson 1.0 December 2009 - Vis. mogelijkheden: Boomdiagram
Syntax Tree Editor12
Jeff Epstein & Edmund O'Neil
0.9.0.2 2009 - Vis. mogelijkheden: Boomdiagram
Tree Builder13 Laura Marik & David Dever
1.2.2 - beta 4 mei 2008 - Vis. mogelijkheden: Boomdiagram
TreeForm14 Donald Derrick 1.0.3 28 maart 2008 - Vis. mogelijkheden: Boomdiagram
Trees15 Sean Crist & Anthony Kroch 1.2.2 12 april 2003 - Vis. mogelijkheden: Boomdiagram
ProD16 Chris Culy, Corina Dima, & Emanuel Dima
0.3.1 25 september 2012 - Vis. mogelijkheden: Dendrogram, boomdiagram, dendroboom i.c.m. kromme,
diagonale en gehoekte takken
Wat opvalt aan de resultaten uit tabel 1 is dat bijna alle onderzochte software geen actieve ontwikkeling meer kent. Sinds het onderzoek van Siliakus (2011) is alle onderzochte software uit zijn scriptie niet meer bijgewerkt. De software Linguistic Tree Constructor bleef zelfs crashen op mijn computer. Op basis van de specificaties en screenshots zijn de visualisatiemogelijkheden van deze software geïnventariseerd.
De nieuwkomer in dit lijstje is ProD. Deze software is ontwikkeld in 2012 en kent als enige in de lijst meerdere visualisatiemogelijkheden. Hierin wordt ook de optie geboden om de takken op verschillende manieren weer te geven. De visualisatie in ProD wordt opgebouwd door het gebruik van de JavaScript-bibliotheek d3.js. Met deze bibliotheek kan op simpele wijze data verschillend worden gevisualiseerd. Een dendrogram, waar ProD gebruik van maakt, is daar één van17. De lijst van allerlei ondersteunde visualisatiemogelijkheden in d3.js is echter erg groot18. Voorbeelden zijn boxplot, treemap en een spreidingsdiagram.
9
http://ltc.sourceforge.net/ (laatst bezocht: 22 juli 2013)
10
http://www.ironcreek.net/phpsyntaxtree/ (laatst bezocht: 22 juli 2013)
11 http://mitpress.mit.edu/books/grammar-science (laatst bezocht: 22 juli 2013) 12
http://www.ductape.net/~eppie/tree/index.html (laatst bezocht: 22 juli 2013)
13
http://www.sittac.com/index.html (laatst bezocht: 22 juli 2013)
14 http://www.ece.ubc.ca/~donaldd/treeform.htm (laatst bezocht: 22 juli 2013) 15
http://www.ling.upenn.edu/~kroch/Trees.html (laatst bezocht: 22 juli 2013)
16
http://www.sfs.uni-tuebingen.de/~cculy/software/ProD/ (laatst bezocht: 22 juli 2013)
17
http://bl.ocks.org/mbostock/4063570 (laatst bezocht: 29 juli 2013)
22
4.3 Boomdiagram in SynTree
In deze paragraaf laat ik zien hoe een boom wordt weergegeven in SynTree. Het gebruikte boomdiagram zal in detail worden verkend. De aanwezige visuele variabelen zullen worden uitgelicht en later worden gebruikt voor een overzicht met beschikbare visuele variabelen (zie paragraaf 5.1). In figuur 7 is een syntaxisboom in SynTree getekend. Deze weergave is opgebouwd op basis van enkele eigenschappen die terugkeren in elke getekende boom in SynTree. Een opsomming van de grafische eigenschappen waarmee SynTree bij het tekenen van een boom rekening houdt:
er is een vaste hoogte gesteld voor de knoop tussen een ouder- en kinderknoop;
er wordt rekening gehouden met de breedte van een knoop, de rest van de boom past zich daarop aan. Hierdoor zijn de hoeken van de takken niet altijd even groot (subparagraaf 5.1.4);
knopen kunnen meerdere regels tekst bevatten (zoals T ↵ [PAST]);
eindknopen worden met een lijn vanaf de ouder geplaatst en worden niet doorgetrokken naar de grond (het laagste niveau) als de kinderknoop zich niet op het laagste niveau bevindt (subparagraaf 5.1.2);
de zusterknopen worden horizontaal naast elkaar uitgelijnd ten opzichte van elkaar (subparagraaf 5.1.5);
SynTree ondersteunt multidominantie en driehoeken (zoals ‘DP the dog’) (zie subparagraaf 2.2.1);
figuur 7: een boomdiagram in SynTree
23
4.4 SVG-structuur
Een boomdiagram dat in SynTree is aangemaakt kan worden opgeslagen voor bijvoorbeeld later hergebruik. Het opslaan van de data uit de boomstructuur gebeurt in een bestand. Een SVG-bestand is een SVG-bestandsformaat dat op XML is gebaseerd. Met SVG-SVG-bestanden kunnen vectorafbeeldingen worden opgemaakt. Dit zijn afbeeldingen die zijn opgebouwd op basis van meetkundige begrippen zoals punten en lijnen. Naast SynTree ondersteunen bijvoorbeeld browsers ook steeds beter het opmaken van vectorafbeeldingen middels het inladen van een SVG-bestand. SVG-bestanden zijn gemaakt voor het weergeven van tweedimensionale vectoren19.
Een SVG-bestand bevat een serie van tekenopdrachten. Dit zijn onder andere de coördinaten en de vorm hoe de vectoren moeten worden weergegeven. Zo kan bijvoorbeeld een cirkel, vierkant of driehoek worden gecreëerd. Doordat een SVG-bestand met te definiëren begin- en eindpunten werkt, gaat er bij het inzoomen van een vectorafbeelding geen kwaliteit verloren. Bij bijvoorbeeld een PNG-afbeelding wordt ingezoomd op de pixels van de afbeelding. Hoe verder wordt ingezoomd, hoe minder scherp de pixels worden.
De structuur van het SVG-bestand dat wordt opgemaakt in SynTree is geoptimaliseerd voor het gebruik in SynTree. Om deze structuur te begrijpen zal ik deze ontleden. Hiervoor heb ik eerst een boomdiagram aangemaakt in SynTree (figuur 8).
figuur 8: simpele boom in SynTree
De complete SVG-structuur van het boomdiagram in figuur 8 is in bijlage I weergegeven. Het boomdiagram is van boven naar onder opgeslagen in het SVG-bestand. Dit betekent dat de wortelknoop als eerste zal worden teruggevonden (top-down gelezen). De dochterknopen worden vervolgens genoteerd onder de ouderknoop. Als ‘Dochter 1’ uit figuur 8 een dochterknoop zou hebben, dan zou deze hoger dan ‘Dochter 2’ in het SVG-bestand staan opgeslagen. Op basis van de diepte (aantal) van de tags kan wel worden gezien dat deze dochter van ‘Dochter 1’ dieper zou liggen dan ‘Dochter 2’. De belangrijkste elementen uit dit SVG-bestand zullen worden samengevat. De content van de verschillende knopen (labels) staan altijd in de flowPara of flowSpan tag. Als een knoop één opmaak heeft wordt deze in de flowPara tag geplaatst. Als een knoop meerdere soorten opmaak binnen dezelfde knoop kent, zoals tekst in combinatie met subscript (V1), wordt deze in meerdere flowSpan tags geplaatst per opmaakgebied. Een tak wordt vormgegeven door middel van de path tag. In het aangemaakte SVG-bestand door SynTree staan de coördinaten aangegeven per knoop en tak. Voor een tak is de begin- en eindcoördinaat gedefinieerd. Een driehoek heeft drie coördinaten gedefinieerd. Hierdoor kan dit SVG-bestand ook goed worden weergegeven in andere software. De aangemaakte SVG-bestanden door SynTree vertonen echter problemen bij het openen in een browser (getest met Google Chrome 29, Internet Explorer 10 en Opera 16). De takken en
24 positionering worden goed weergegeven, maar de labels worden niet weergegeven (zie figuur 9). Alle grote browsers ondersteunen het weergeven van SVG-bestanden al jaren20. Hierdoor is SynTree vereist om de gecreëerde SVG-bestanden weer te kunnen geven. Wellicht kan later naar deze ondersteuning worden gekeken.
figuur 9: het door SynTree gecreëerde SVG-bestand wordt niet goed weergegeven in een browser
4.5 Intern uitlijnalgoritme
Een unieke eigenschap van SynTree is het gebruikte uitlijnalgoritme. Met dit algoritme wordt elke knoop, tak en dus de gehele boom automatisch gepositioneerd. Het uitlijnalgoritme maakt gebruik van zowel horizontale als verticale uitlijning van de knopen en takken.
Na elke voltooide wijziging in de boom wordt het boomdiagram opnieuw uitgelijnd. Een wijziging kan bijvoorbeeld zijn: het toevoegen of verwijderen van een knoop, de tekst in het label van een knoop wijzigen of het toevoegen van een multidominantierelatie. Daarnaast kunnen er één of meer bomen toegevoegd worden.
Het uitlijnalgoritme bouwt de boom van onderaf op. Het algoritme werkt echter niet enkel volgens het bottom-up principe. Tijdens het plaatsen van knopen op hogere niveaus wordt er rekening gehouden met de kinderen (top-down) en ook met knopen die zich zowel aan de linker- als aan de rechterkant kunnen bevinden. Het algoritme houdt ook rekening met het feit dat knopen kunnen variëren in labelbreedte. Andere bekende algoritmen houden hier geen rekening mee (Kurvers, 2010).
Voor het uitleggen van de werking van het uitlijnalgoritme in SynTree zullen de boomdiagrammen in figuur 10 en figuur 12 worden gebruikt. Om tot de getoonde visualisaties te komen zal stap voor stap door het proces dat het uitlijnalgoritme doorloopt worden gegaan.
Het boomdiagram wordt van onderaf opgebouwd. Stap voor stap zullen de knopen worden geplaatst met de nodige uitleg. De kennis hiervoor is opgedaan tijdens het verwerken van het uitlijnalgoritme beschreven door Ganzeboom & Bosveld-de Smet (2011). Tijdens het programmeren en het analyseren van de output van SynTree werd duidelijk dat het uitlijnalgoritme niet helemaal naar behoren werkt. Omdat niet duidelijk was wat er mis ging in de originele programmeercode in
25 SynTree is gebruik gemaakt van een blackboxtest21. Het besproken interne uitlijnalgoritme in deze paragraaf wordt op de juiste manier toegepast in de door mijzelf ontwikkelde programmeercode in Python (zie voor meer informatie paragraaf 4.6).
Doordat het SVG-bestand top-down wordt ingelezen, wordt eerst de rootknoop gelezen (zie bijlage I voor een voorbeeld van een SVG-bestand door SynTree). Vervolgens zal van links naar rechts per niveau stapsgewijs elke knoop worden doorlopen en opgeslagen. Hierdoor is het mogelijk dat SynTree weet welke knoop het meest links staat per niveau.
Y-positie berekenen
De y-positie van elke knoop wordt bij haar verwerking opnieuw berekend. Het proces zal aan de hand van het boomdiagram in figuur 10 worden uitgewerkt. Deze figuur kent een niveau van vier niveaus diep. Er wordt gestart met tellen vanaf één. label0 bevindt zich op niveau één en label5 op niveau vier.
figuur 10: een boomdiagram met één knoop met meerdere regels tekst
1. de knoop krijgt de grootte van de diepte (zie figuur 10) maal een ingestelde hoogte. Als de ingestelde hoogte bijvoorbeeld 40 pixels is, dan zal label5 (op niveau vier) de y-positie ‘120’ krijgen.
2. Deze knoop bestaat uit één regel, hierdoor hoeft er geen verdere actie te worden ondernomen.
3. Vervolgens wordt er één niveau omhoog gegaan. Hier bevinden zich de knopen label3 en
label4. Deze knopen krijgen ook het niveau (twee) maal het aantal ingestelde pixels, dus
bijvoorbeeld 40 * 2 = 80. Ook deze knopen zijn één regel hoog, er is weer geen vervolgactie nodig.
4. Weer één niveau hoger staat label2. Deze knoop krijgt de y-positie ‘40’ (niveau één maal 40 pixels). Deze knoop kent meerdere regels tekst. De hoogte van deze tekst wordt uitgerekend en opgeteld bij alle knopen met een hogere y-positie dan die van label2 (dit zijn label3, label4 en label5).
5. Ook label1 staat op niveau twee en kent één regel tekst. Hierdoor krijgt ook deze de y-positie ‘40’.
26 6. Vervolgens wordt label0 geplaatst, die ook maar één regel tekst kent en krijgt dus y-positie
‘0’ mee.
Notitie: omdat de y-positie ‘0’ in het midden van het label0 wordt geplaatst, zal het bovenste helft van het woord ‘label0’ boven buiten beeld vallen. Hierdoor wordt bij het plaatsen van elke knoop een kleine extra vaste marge opgeteld van bijvoorbeeld vijf pixels.
Een uitzondering op bovenstaande lijst stappen van berekeningen wordt weergegeven in figuur 11 waarbij label2 meerdere regels tekst heeft en ook de eindknoop is. Zusterknoop label1 heeft meerdere kinderen met elk één regel tekst. Hierbij wordt label4 niet gepositioneerd ter hoogte van het punt waar label2 eindigt (onder ‘laagst’). In figuur 10 werd label4 nog wel gepositioneerd ter hoogte van dit punt, omdat label2 nog één kinderknoop heeft.
figuur 11: een eindknoop met meerdere regels
De volgende pseudocode voor het berekenen van de y-positie is opgesteld door Leonie Bosveld-de Smet op basis van de uitleg uit deze paragraaf:
maximale diepte <-- maximale boomdiepte diepte <-- maximale diepte;
while (diepte > 0)
node list <-- alle nodes op niveau diepte for each node in node list:
y van node <-- diepte * VERTICALE_MARGE
if ((node is not terminal) and (label van node bestaat uit meer dan
1 regel)) then
hoogte <-- aantal regels van label van node;
for each y van dieper liggende nodes:
y van node <-- y van node + hoogte diepte <-- diepte - 1
X-positie berekenen
27 figuur 12: het boomdiagram dat wordt uitgelegd
Deze opzet bevat de volgende bijzonderheden:
De eindknopen bevinden zich niet volledig en ‘netjes’ verdeeld op het diepste niveau. Op niveau drie zijn dit: label2a, label2b, label4a en label4b. Op niveau twee zijn dit de eindknopen: label1 en label3.
Er is tenminste één eindknoop met rechts hiervan op hetzelfde niveau een ouderknoop. Dit geldt voor zowel label1 als label3.
Eén ouderknoop is breder is dan de breedte van haar kind(eren) tezamen. Namelijk:
label2-die-breder-is-dan-de-kinderen.
Eén ouderknoop heeft meer dan twee, in dit geval vier, kinderen. Het proces is als volgt:
1. De diepte van het boomdiagram wordt bepaald, in dit geval drie niveaus diep (zie figuur 13).
figuur 13: de diepte van het boomdiagram
2. Alle knopen op het diepste niveau (niveau drie) worden verzameld. Te weten: label2a,
label2b, label4a en label4b.
3. De eerste knoop (label2a) wordt helemaal links op het canvas geplaatst.
4. De volgende knoop (label2b) wordt hier rechts naast geplaatst, met een vastgestelde horizontale marge aan pixels tussen de knopen.
5. Uiteindelijk worden alle vier de knopen op niveau drie met bijbehorende marge naast elkaar geplaatst.
6. Vervolgens worden de knopen verzameld die zich één niveau hoger bevinden: label1,
28 7. De eerstvolgende te plaatsen knoop is label1. De knoop wordt op basis van een vaste marge aan pixels boven het vorige niveau (niveau drie) geplaatst. Voor deze knoop wordt gekeken of deze kinderen bevat. Dit is niet het geval. Dit betekent in dit geval dat alle knopen op het diepere niveau moeten worden opgeschoven.
Hiervoor wordt gekeken naar knopen die dezelfde x-positie of hoger hebben. Dat zijn in dit geval
label2a, label2b, label4a en label4b. Vervolgens wordt de breedte van label1 plus de vaste marge
tussen de knopen genomen en opgeteld bij de x-positie van label2a, label2b, label4a en label4b. Hierdoor verschuiven deze vier knopen naar rechts zoals in figuur 14 is weergegeven.
figuur 14: de reeds geplaatste knopen worden opgeschoven
8. De volgende te plaatsen knoop is label2-die-breder-is-dan-de-kinderen. Deze knoop kent de kinderen label2a en label2b. Het middelpunt van deze ouderknoop zal worden geplaatst ten opzichte van het middelpunt van de breedte van alle kinderen tezamen. Hiervoor wordt als volgt te werk gegaan:
bepaal het eerste kind (label2a);
neem de x-positie (dit is het middelpunt) van label2a;
bepaal het laatste kind (label2b);
neem de x-positie (dit is het middelpunt) van label2b;
tel de berekende x-positie van label2a op bij de x-positie van label2b, deel de uitkomst vervolgens door twee. De uitkomst hiervan is het x-middelpunt van
label2-die-breder-is-dan-de-kinderen.
9. Er wordt vervolgens gekeken naar de totale breedte van zowel de ouderknoop als de kinderknopen. Dit gebeurt om te bepalen welke breder is, op basis hiervan wordt een eventuele vervolgactie bepaald.
Het uitrekenen van de breedte van de ouderknoop (label2-die-breder-is-dan-de-kinderen) betreft altijd één knoop waardoor de breedte door middel van een ingebouwde functie kan worden opgevraagd.
Het berekenen van de breedte van de kind(eren) gebeurt als volgt (zie ook figuur 15):
bepaal het eerste kind (label2a);
neem de x-positie (dit is het middelpunt) van label2a;
vraag de breedte op van label2a en deel dit door twee;
trek de breedte gedeeld door twee af van de x-positie van label2a.
Bepaal het laatste kind (label2b);
neem de x-positie (dit is het middelpunt) van label2b;
29
tel de breedte gedeeld door twee op bij de x-positie van label2b.
Trek de berekende x-eindwaarde van label2b af van het x-beginpunt van label2a.
figuur 15: het bepalen van de breedte van de ouderknoop en kind(eren)
Hieruit blijkt dat ouderknoop label2-die-breder-is-dan-de-kinderen breder is dan de kinderen tezamen.
10. Doordat de ouder (label2-die-breder-is-dan-de-kinderen) breder is dan de kinderen tezamen, moeten de ouderknoop, de kinderen en alle reeds geplaatste knopen aan de rechterzijde van de ouderknoop worden verplaatst. In figuur 16 wordt geïllustreerd wat anders zal gebeuren, de tekst is hier gecentreerd boven de twee kinderen. De tekst zal over de tekst van de linker knoop heenlopen. Als er geen knoop aan de linkerkant staat, zal de ouderknoop
(label2-die-breder-is-dan-de-kinderen) deels buiten het canvas vallen.
figuur 16: de tweede knoop loopt door de linker knoop heen
Op basis van de breedte van de ouderknoop worden de ouderknoop, de al geplaatste kinderen (label2a en label2b) en de reeds geplaatste knopen aan de rechterzijde van de ouderknoop (label4a en label4b) opzij geschoven. Hiervoor worden de volgende stappen aangehouden:
1. neem de breedte van de ouderknoop en deel deze door twee;
2. neem de breedte van de gecombineerde kinderknopen en deel deze door twee; 3. trek de waarde van punt twee af van de waarde uit punt één.
De formule wordt hierdoor: (breedte ouderknoop / 2) - (breedte kinderknopen / 2), of korter geformuleerd: (breedte ouderknoop - breedte kinderknopen) / 2.
30 figuur 17: het opschuiven van de reeds geplaatste knopen
11. De volgende te plaatsen knoop is een eindknoop op niveau twee: label3.
Deze knoop kijkt naar het meest rechtse punt bij de linker buren. Vervolgens positioneert
label3 zich op basis van deze x-positie plus de ingestelde marge.
Om deze te plaatsen moeten de knopen aan de rechterkant (label4a en label4b) worden opgeschoven. Hiervoor wordt dezelfde aanpak toegepast als in stap zeven.
12. De laatste knoop op niveau twee is label4. Deze knoop kent kinderen (label4a en label4b). De ouderknoop zal volgens de methode in stap acht in het midden ten opzichte van de kinderen worden geplaatst.
Vervolgens wordt gekeken of de ouderknoop breder is dan de kinderen, net als in stap negen. De ouderknoop is in dit geval minder breed dan de kinderen. Hierdoor zijn er geen vervolgacties nodig, de knopen staan zo goed gepositioneerd.
13. Nu zijn alle knopen op niveau twee geplaatst. Hierdoor wordt weer gekeken naar het hoger liggende niveau (label0). Deze wortelknoop wordt net als in stap acht gepositioneerd op basis van de kinderen. De meest linker knoop is in dit geval label1 en de meest rechterknoop is label4. Ook deze knoop is niet breder dan de kinderen tezamen waardoor er geen vervolgacties nodig zijn.
De bovengenoemde procedure is de meest gangbare voor het positioneren van de knopen in de verschillende situaties waarin een knoop kan staan. In figuur 12 wordt echter al duidelijk dat SynTree hier niet correct mee omgaat. De witruimte om label2-die-breder-is-dan-de-kinderen heen is breder dan die om de overige knopen. Het probleem doet zich hier voor wanneer de kinderen breder worden, de witruimte er omheen ook toeneemt. Zodra de kinderen breder zijn dan de ouderknoop verdwijnt dit probleem weer. Als de kinderen breder worden gemaakt, verandert de breedte van witruimte evenredig hard mee. Een test met als ouderknoop label2-die-breder-is-dan-de-kinderen en drie kinderen met verschillende lengtes geeft de volgende resultaten:
tabel 2: resultaten afstand witruimte t.o.v. breedte kinderen
Namen van de drie knopen: Breedte kinderen (in cm.): Breedte witruimte (in cm.) label2a - label2b - bla 4,55 2,9
label2a - label2b - blaas 5 3,2
label2a - label2b - blaasasf 5,5 3,6 label2a - label2b - blaasasas 5,8 3,85 label2a - label2b - blaasasas2 6 4
31 Wanneer een extra boom wordt ingevoegd, dan wordt deze rechts naast de bestaande boom geplaatst. Tussen de twee bomen wordt een hoeveelheid witruimte geplaatst. Deze witruimte verschilt echter op basis van de breedte van de linkerboom. Als de linkerboom breder wordt gemaakt, dan wordt de witruimte tussen die boom en de eerstvolgende rechtse boom vergroot. In figuur 7 is het verschil in witruimte tussen de brede boom helemaal links en de eerste boom aan de rechterkant zeer groot. Deze volgende (middelste) boom is zelf smal, wat dus resulteert in een minder brede witruimte tussen de middelste boom en de volgende rechtse boom ten opzichte van de eerste witruimte.
figuur 18: de witruimte tussen meerdere bomen verschilt
Dit ziet er uit als een nieuwe fout in SynTree: brede bomen genereren op deze manier een enorme witruimte wanneer een extra boom wordt ingevoegd. Het verschijnen van een horizontale scrollbalk is dan snel het geval, want de tweede boom verdwijnt onnodig snel uit beeld.
Hieronder volgt de versimpelde pseudocode om de x-positie van de knopen in het boomdiagram uit te rekenen. In bijlage II is de pseudocode terug te vinden waar alle uitzonderingen in detail zijn uitgewerkt.
diepte <-- maximale boomdiepte
while(diepte > 0)
node list <-- alle nodes als objecten met attributen for each node in node list:
if(diepte node is gelijk aan diepte) then if(node heeft geen kinderen) then
x van node <-- x van rechterzijde eerste node aan de linkerhand + HORIZONTALE_MARGE
x van dieper geplaatste nodes rechts van node <-- x van dieper geplaatste nodes rechts van node + breedte node +
HORIZONTALE_MARGE else
x van node <-- (x middelpunt van eerste kind + x van middelpunt laatste kind) / 2
if(node is breder dan breedte kinderen tezamen) then x van dieper geplaatste nodes rechts van node en de
kinderknopen van node en node zelf <-- x van dieper geplaatste nodes rechts van node en de kinderknopen van node en node zelf + ((breedte node - breedte kinderen node) / 2)
diepte <-- diepte - 1
4.6 pySynTree
32 Doordat Python en vooral de bibliotheken in Python net iets anders functioneren, zijn er enkele kleine wijzigingen doorgevoerd ten opzichte van het huidige uitlijnalgoritme om het functionerend te krijgen in Python. Zo kent de gebruikte XML-bibliotheek in SynTree (Java) bijvoorbeeld een ingebouwde functie om een ouder van een lager liggende waarde op te halen. Deze functie heb ik zelf moeten programmeren, want deze miste in de xml.sax versie voor Python. In tegenstelling tot SynTree houdt pySynTree geen rekening met de opmaak van de knopen, zoals lettertype, lettergrootte en kleur. Deze waarden zijn niet belangrijk voor het uitlijnalgoritme.
Bij het gebruik van pySynTree wordt rekening gehouden met de juiste manier van uitlijnen van de knopen. Dit houdt in dat de marges tussen de knopen en bomen altijd constant/correct blijven. Het uitlijnalgoritme is geprogrammeerd zoals beschreven in paragraaf 4.5. In figuur 19 is de weergave van de boom uit figuur 12 gegenereerd door pySynTree weergegeven. Er is enkel geen ondersteuning voor het positioneren van knopen met meerdere regels tekst. Alle fouten in het positioneren van knopen in de huidige versie van SynTree zijn in pySynTree opgelost. In bijlage III is een overzicht van screenshots te vinden van de output van boomdiagrammen door zowel SynTree als pySynTree.
