restructure entire website

studenten/graphqltijdreizen/graphql_tijdreizen.md

@@ -24,8 +24,8 @@ Het Kadaster heeft twee andere Object Viewers ontwikkeld. Een gebaseerd op [SPAR
 Topotijdreis (https://www.topotijdreis.nl/) heeft als inspiratie gediend voor de ontwikkeling van de applicatie. Deze applicatie heeft een soortgelijke use case. De gebruiker kan een tijdreis maken over de topografische kaarten van Nederland. Het grootste verschil tussen Topotijdreis en Tijdreizen met GraphQL zit in de databronnen die worden gebruikt. In Topotijdreis zijn dit statische afbeeldingen en Tijdreizen met GraphQL is dit dynamische geografische informatie. Desondanks is vooral de werking van de slider in Topotijdreis heel waardevol gebleken voor de ontwikkeling van de applicatie.
 
 <figure id="figuur-1">
-  <a href="/menutegels/studenten/graphqltijdreizen/afbeeldingen/topotijdreis.png">
-    <img src="/menutegels/studenten/graphqltijdreizen/afbeeldingen/topotijdreis.png" alt="Topotijdreis">
+  <a href="/studenten/graphqltijdreizen/afbeeldingen/topotijdreis.png">
+    <img src="/studenten/graphqltijdreizen/afbeeldingen/topotijdreis.png" alt="Topotijdreis">
   </a>
   <figcaption>
     Figuur 1 ― Topotijdreis.
@@ -37,8 +37,8 @@ Topotijdreis (https://www.topotijdreis.nl/) heeft als inspiratie gediend voor de
 De Kadaster huisstijl en Angular Material zijn gebruikt voor de styling van de applicatie. In eerste instantie was ervoor gekozen om een dashboard te bouwen met drie panelen filter-menu, kaart, en resultaten lijst. Zie de onderstaande scherm afbeelding.
 
 <figure id="figuur-2">
-  <a href="/menutegels/studenten/graphqltijdreizen/afbeeldingen/user-interface-1.png">
-    <img src="/menutegels/studenten/graphqltijdreizen/afbeeldingen/user-interface-1.png" alt="UI iteratie 1">
+  <a href="/studenten/graphqltijdreizen/afbeeldingen/user-interface-1.png">
+    <img src="/studenten/graphqltijdreizen/afbeeldingen/user-interface-1.png" alt="UI iteratie 1">
   </a>
   <figcaption>
     Figuur 2 ― User interface eerste iteratie.
@@ -50,8 +50,8 @@ De Kadaster huisstijl en Angular Material zijn gebruikt voor de styling van de a
 Dit zorgde echter voor een onoverzichtelijke gebruikerservaring zodoende is er uiteindelijk voor gekozen om de kaart de hoogste prioriteit te geven in de user interface. Dit resulteerde in de volgende uitwerking:
 
 <figure id="figuur-3">
-  <a href="/menutegels/studenten/graphqltijdreizen/afbeeldingen/dashlegend.png">
-    <img src="/menutegels/studenten/graphqltijdreizen/afbeeldingen/dashlegend.png" alt="UI iteratie 1">
+  <a href="/studenten/graphqltijdreizen/afbeeldingen/dashlegend.png">
+    <img src="/studenten/graphqltijdreizen/afbeeldingen/dashlegend.png" alt="UI iteratie 1">
   </a>
   <figcaption>
     Figuur 3 ― User interface iteratie 2.
@@ -63,8 +63,8 @@ Dit zorgde echter voor een onoverzichtelijke gebruikerservaring zodoende is er u
 In het huidige ontwerp is het filter-menu uitschuifbaar en zit verborgen achter een knop, het resultaat scherm is verwijderd en er is ervoor gekozen om het object informatie te weergeven in de legenda links onderin het scherm.  
 
 <figure id="figuur-4">
-  <a href="/menutegels/studenten/graphqltijdreizen/afbeeldingen/legenda.png">
-    <img src="/menutegels/studenten/graphqltijdreizen/afbeeldingen/legenda.png" alt="legenda">
+  <a href="/studenten/graphqltijdreizen/afbeeldingen/legenda.png">
+    <img src="/studenten/graphqltijdreizen/afbeeldingen/legenda.png" alt="legenda">
   </a>
   <figcaption>
     Figuur 4 ― Legenda met object info van een pand.
@@ -92,8 +92,8 @@ In het huidige ontwerp is het filter-menu uitschuifbaar en zit verborgen achter
 - De service wordt gebruikt om query's te maken naar de back-end (GraphQL gateway, en de gekoppelde databronnen) voor de visualisatie van de data.
 
 <figure id="figuur-5">
-  <a href="/menutegels/studenten/graphqltijdreizen/afbeeldingen/application-architecture.jpg">
-    <img src="/menutegels/studenten/graphqltijdreizen/afbeeldingen/application-architecture.jpg" alt="applicatie architectuur">
+  <a href="/studenten/graphqltijdreizen/afbeeldingen/application-architecture.jpg">
+    <img src="/studenten/graphqltijdreizen/afbeeldingen/application-architecture.jpg" alt="applicatie architectuur">
   </a>
   <figcaption>
     Figuur 5 ― Applicatie architectuur.
@@ -112,8 +112,8 @@ In het huidige ontwerp is het filter-menu uitschuifbaar en zit verborgen achter
 6. De kaart luistert ook naar de min en max waarde van de slider om de juiste objecten te kunnen tonen wanneer de slider begint af te spelen of handmatig van waarde veranderd. (De componenten hebben een Parent, Child relatie).
 
 <figure id="figuur-6">
-  <a href="/menutegels/studenten/graphqltijdreizen/afbeeldingen/tijdreizen-clear.png">
-    <img src="/menutegels/studenten/graphqltijdreizen/afbeeldingen/tijdreizen-clear.png" alt="werking slider">
+  <a href="/studenten/graphqltijdreizen/afbeeldingen/tijdreizen-clear.png">
+    <img src="/studenten/graphqltijdreizen/afbeeldingen/tijdreizen-clear.png" alt="werking slider">
   </a>
   <figcaption>
     Figuur 6 ― Werking slider.
@@ -125,8 +125,8 @@ In het huidige ontwerp is het filter-menu uitschuifbaar en zit verborgen achter
 In de applicatie worden momenteel de volgende twaalf kleuren gebruikt (zie onderstaande figuur) om de polygonen van de Features een kleur te geven.
 
 <figure id="figuur-7">
-  <a href="/menutegels/studenten/graphqltijdreizen/afbeeldingen/kleuren.png">
-    <img src="/menutegels/studenten/graphqltijdreizen/afbeeldingen/kleuren.png" alt="kleuren">
+  <a href="/studenten/graphqltijdreizen/afbeeldingen/kleuren.png">
+    <img src="/studenten/graphqltijdreizen/afbeeldingen/kleuren.png" alt="kleuren">
   </a>
   <figcaption>
     Figuur 7 ― Kleur palette polygonen.
@@ -189,8 +189,8 @@ De applicatie stelt de gebruiker instaat om op een visuele manier GraphQL query'
 Bijvoorbeeld een simpel BAG pand verzoek met pand status in gebruik kan in de applicatie op de volgende manier uitgevoerd worden:
 
 <figure id="figuur-8">
-  <a href="/menutegels/studenten/graphqltijdreizen/afbeeldingen/basis-query.png">
-    <img src="/menutegels/studenten/graphqltijdreizen/afbeeldingen/basis-query.png" alt="basis query">
+  <a href="/studenten/graphqltijdreizen/afbeeldingen/basis-query.png">
+    <img src="/studenten/graphqltijdreizen/afbeeldingen/basis-query.png" alt="basis query">
   </a>
   <figcaption>
     Figuur 8 ― Basis verzoek BAG panden.
@@ -220,8 +220,8 @@ In de GraphQL playground zou de query er zo uitzien:
 Zie de onderstaande afbeelding voor de uitkomst van dit verzoek.
 
 <figure id="figuur-9">
-  <a href="/menutegels/studenten/graphqltijdreizen/afbeeldingen/query-uitkomst.png">
-    <img src="/menutegels/studenten/graphqltijdreizen/afbeeldingen/query-uitkomst.png" alt="query uitkomst">
+  <a href="/studenten/graphqltijdreizen/afbeeldingen/query-uitkomst.png">
+    <img src="/studenten/graphqltijdreizen/afbeeldingen/query-uitkomst.png" alt="query uitkomst">
   </a>
   <figcaption>
     Figuur 9 ― Resultaat van de aanvraag nadat de slider helemaal afgespeeld is.

studenten/validatiemethode/validatiemethode_verrijking_brt.md

@@ -19,8 +19,8 @@ Momenteel wordt er bij de BRT weinig gebruik gemaakt van community data bij het
 De ontwikkelde validatiemethode bestaat uit het classificeren van een gebouwtype aan de hand van straatfoto's door middel van een Convolutioneel Neuraal Netwerk model. De structuur van het onderzoek en de stappen die worden genomen worden afgebeeld in figuur 1.
 
 <figure id="figuur-1">
-  <a href="/menutegels/studenten/validatiemethode/afbeeldingen/proces.jpg">
-    <img src="/menutegels/studenten/validatiemethode/afbeeldingen/proces.jpg" alt="Proces">
+  <a href="/studenten/validatiemethode/afbeeldingen/proces.jpg">
+    <img src="/studenten/validatiemethode/afbeeldingen/proces.jpg" alt="Proces">
   </a>
   <figcaption>
     Figuur 1 ― Het proces van het ontwikkelen van een model.
@@ -36,8 +36,8 @@ De straatfoto’s van supermarkten halen we op via Cyclomedia en gebruiken we bi
 Een gedeelte van de straatbeelden labelen we vervolgens in 2 klassen; 1 – supermarkt; 2 geen supermarkt. In figuur 2 is een overzicht weergegeven van verschillende straatfoto’s per klasse. De straatfoto’s, waarvan duidelijk te zien is dat het een supermarkt is zoals een foto van de ingang of waar het logo of naam duidelijk in beeld is, labelen we in de klasse ‘supermarkt’. Foto’s waarvan het minder duidelijk is of het een supermarkt is zoals de achterkant van het gebouw of waar een grote vrachtwagen voor staat, labelen we in de klasse ‘geen supermarkt. Uiteindelijk bestaat de gelabelde dataset uit 1800 foto’s uit de klasse ‘supermarkt’, 429 foto’s uit de klasse ‘geen supermarkt’ en vullen we de klasse aan met 1371 foto’s van andere gebouwtypes. 
 
 <figure id="figuur-2">
-  <a href="/menutegels/studenten/validatiemethode/afbeeldingen/voorbeeldklassen.png">
-    <img src="/menutegels/studenten/validatiemethode/afbeeldingen/voorbeeldklassen.png" alt="Voorbeeld foto's per klasse">
+  <a href="/studenten/validatiemethode/afbeeldingen/voorbeeldklassen.png">
+    <img src="/studenten/validatiemethode/afbeeldingen/voorbeeldklassen.png" alt="Voorbeeld foto's per klasse">
   </a>
   <figcaption>
     Figuur 2 ― Overzicht van de verschillende afbeeldingen die aanwezig zijn in de invoer.
@@ -53,8 +53,8 @@ De gelabelde dataset splitsen we vervolgens in 3 sets:
 Om het aantal gelabelde foto’s in de trainset te verhogen, maken we gebruik van data augmentatie. Data augmentatie is een techniek die gebruikt wordt om de dataset te vergroten voor het trainen van het model zonder daadwerkelijk nieuwe data te verzamelen. Augmentatie technieken zoals inzoomen, herschalen, roteren en verschuiven zijn toegepast op de beelden die gebruikt zijn voor het trainen van het model. In figuur 3 is weergegeven hoe de data augmentatie strategie voor de traindataset eruit ziet. Uiteindelijk bestaat de traindataset uit 4200 foto’s per klasse, validatieset uit 360 foto's per klasse en de testset uit 360 foto's per klasse.
 
 <figure id="figuur-3">
-  <a href="/menutegels/studenten/validatiemethode/afbeeldingen/voorbeeldaugmentatie.png">
-    <img src="/menutegels/studenten/validatiemethode/afbeeldingen/voorbeeldaugmentatie.png" alt="Voorbeeld augmentatie">
+  <a href="/studenten/validatiemethode/afbeeldingen/voorbeeldaugmentatie.png">
+    <img src="/studenten/validatiemethode/afbeeldingen/voorbeeldaugmentatie.png" alt="Voorbeeld augmentatie">
   </a>
   <figcaption>
     Figuur 3 ― Voorbeeld van het augmenteren van een straatfoto. Linksboven is de originele straatfoto en op de overige drie foto’s zijn verschillende augmentatie technieken gebruikt.
@@ -74,8 +74,8 @@ Na het analyseren van het probleem, verkrijgen van de data en het ontwikkelen va
 Het beste model is gebaseerd op de Convolutioneel Neuraal Netwerk (CNN) tutorial van TensorFlow waarbij enkele aanpassingen zijn gemaakt. In de figuur 4a & b is de prestatie van het model geëvalueerd. 
 
 <figure id="figuur-4a">
-  <a href="/menutegels/studenten/validatiemethode/afbeeldingen/accuracyplot.png">
-    <img src="/menutegels/studenten/validatiemethode/afbeeldingen/accuracyplot.png" alt="Accuracy plot">
+  <a href="/studenten/validatiemethode/afbeeldingen/accuracyplot.png">
+    <img src="/studenten/validatiemethode/afbeeldingen/accuracyplot.png" alt="Accuracy plot">
   </a>
   <figcaption>
     Figuur 4a ― De accuracy grafiek voor train- en validatiedata van het beste model.
@@ -85,8 +85,8 @@ Het beste model is gebaseerd op de Convolutioneel Neuraal Netwerk (CNN) tutorial
 Zoals te zien is in figuur 14a, stijgt de accuracy van de trainingsdata geleidelijk over de 15 epochs en blijft de curve ook stijgen. Hoewel de curve in dit model blijft stijgen en niet vlakker wordt, heeft het verhogen van de epochs geresulteerd tot overfitting. Net als de accuracy grafiek uit model 1, is de accuracy curve van de validatiedata hoger dan de accuracy van de trainingsdata. Wat wel opvalt is dat de curve van de validatiedata fluctueert over de epochs heen. Een verklaring hiervoor kan zijn dat de grootte van de validatie set te klein is, dit kan resulteren in het schommelen van de validatie accuracy. Dit kan voor deze Use Case het geval zijn aangezien de verhouding tussen de trainingsdata en validatiedata groot is (91,4% train vs. 4,3% validatie). Dit heeft over het algemeen geen invloed op de prestaties van het model als de accuracy curve van de validatiedata mee stijgt met de curve van de trainingsdata. 
 
 <figure id="figuur-4b">
-  <a href="/menutegels/studenten/validatiemethode/afbeeldingen/lossplot.png">
-    <img src="/menutegels/studenten/validatiemethode/afbeeldingen/lossplot.png" alt="Loss plot">
+  <a href="/studenten/validatiemethode/afbeeldingen/lossplot.png">
+    <img src="/studenten/validatiemethode/afbeeldingen/lossplot.png" alt="Loss plot">
   </a>
   <figcaption>
     Figuur 4b ― De loss grafiek voor train- en validatiedata van het beste model.