Displaying the architecture of a software system is not a simple task. Showing all of the available information will unnecessarily complicate the view, while showing too little might render the view unhelpful. Furthermore, showing the dynamics of the operation of such a system is even more challenging. This thesis project describes the development of a graphical tool that can both display the configuration of an advanced authentication, authorization, and accounting (AAA) system and the messages passed between nodes in the system.  The solution described uses force-based graph layouts coupled with adaptive filters as well as vector-based rendering to deliver a view of the status of the system. Force-based layout spreads out the nodes in an adaptive fashion. The adaptive filters starts by showing what is most often the most relevant information, but can be configured by the user. Finally, the vector based rendering offers unlimited zoom into the individual nodes in the graph in order to display additional detailed information. Unified Modeling Language (UML) sequence charts are used to display the message flow inside the system (both between nodes and inside individual nodes). To validate the results of this thesis project each iteration of the design was evaluated through meetings with the staff at Aptilo Networks. These meetings provided feedback on the direction the project was taking as well as provided input (such as ideas for features to implement). The result of this thesis project shows a way to display the status of an AAA system with multiple properties displayed at the same time. It combines this with a view of the flow of messages and application of policies in the network via a dynamically generated UML sequence diagram. As a result human operators are able to see both the system’s architecture and the dynamics of its operation using the same user interface. This integrated view should enable more effective management of the AAA system and facilitate responding to problems and attacks. / Att visualisera arkitekturen av ett mjukvarusystem är inte lätt. Visas all tillgänglig information så blir vyn för komplicerad medan ifall för lite visas så blir vyn onödig. Att samtidigt visa dynamiken som uppstår när systemet arbetar är ytterligare en utmaning. Detta examensprojektet beskriver hur utvecklingen av ett grafiskt verktyg, som både kan visa konfigurationen av ett avancerat autentisering-, tillåtelse- och bokförings-system (AAA) och meddelanden som skickas mellan noder i systemet.<p> Lösningen använder en kraftriktad graflayout tillsammans med adaptiva filter och vektorbaserad rendering för att visa en vy av systemets status. De adaptiva filtren börjar med att visa den information som oftast är mest relevant men kan ställas in av användaren. Nyttjandet av vektorbaserad grafik tillhandahåller obegränsade möjligheter för användaren att zooma in på delar av grafen för att visa mer detaljerad information. UML sekvensdiagram används för att visa medelandeflödet inuti systemet (både mellan noder och inuti noder). För att utvärdera resultatet av examensprojektet blev varje iteration av designen utvärderad vid möten med personalen på Aptilo Networks. Dessa möten gav återkoppling på vilken rikting projektet tog samt input med t. ex. id´eer på nya egenskaper att lägga till. Resultatet av detta examensarbete visar ett sätt att visa statusen för ett AAA system med många av systemets egenskaper visade samtidigt. Det kombinerar detta med en vy av flödet av meddelanden och applikationpolicies i nätverket via ett dynamiskt genererat UML sekvensdiagram. Resultatet av detta är att mänskliga operatörer kan se både systemets arkitektur och dynamiken i hur det fungerar i samma gränssnitt. Detta gränssnitt bör möjliggöra mer effektiv hantering av AAA systemet och underlätta lösningar på både problem i systemet och attacker mot systemet.

In an era of increasingly complex data, the balance between detailed information presentation and maintaining an overview during visualisation is crucial. This thesis investigates the application of the ´magic lens' technique to network visualisations, specifically focusing on visualising dynamic network attributes such as temporal node changes and evolving network topology. Traditional network visualisation methods often struggle to reveal underlying multivariate characteristics, necessitating more innovative approaches like focus plus context visualisations. The lens is also to be used for comparison between different parts of the network, where multivariate node attributes and dynamic network topology is integrated. Our research aims to enhance the usability and effectiveness of network visualisations by integrating a magic lens for dynamic data exploration. This study re-implements and extends the Network Lens tool using modern web technologies (Cytoscape.js and D3.js) and conducts a user study to evaluate its design and functionality. The research questions address essential design requirements for a comparison lens, methods for integrating temporal network comparisons within the magic lens, and user preference for different visual representations. Through careful study and implementation, we identify key design requirements for effective comparison lenses, including intuitive node selection, multi-selection comparison, and longitudinal observation capabilities. The dynamic network topology was visualised using a timeline representation, positioned adjacent to the main lens to maintain clarity and ease of use. User evaluations highlighted the practicality of dual-lens setups for side-by-side comparison, although initial usability of the dynamic display suggests room for refinement. Three visual representations - bar charts, parallel coordinates plots, and star plots - were integrated within the magic lens to enhance multivariate data exploration. User feedback indicated a preference for bar charts due to their straightforward interpretation, despite their limitations in displaying small relative values. Parallel coordinates plot were favoured at second place for their ability to maintain visual clarity across a range of values, while star plots, though less preferred, were recognised for their potential in displaying numerous dimensions. Future work should extend the tool's application to real-world datasets, incorporate dynamic nominal data, and explore alternative dynamic display methods. Broader user studies across various domains will further validate andrefine the tool, ensuring its effectiveness and adaptability for diverse data visualisation needs. / I en tid av allt mer komplex data är balansen mellan detaljerad informationspresentation och upprätthållande av överblick under visualisering avgörande. Detta projekt undersöker tillämpningen av den "magiska linsen"-tekniken för nätverksvisualiseringar, speciellt med fokus på visualisering av dynamiska nätverksattribut såsom temporala nodförändringar och förändrande nätverkstopologi. Traditionella nätverksvisualiseringsmetoder har ofta besvär för att avslöja underliggande multivariata egenskaper, vilket kräver mer innovativa tillvägagångssätt som fokus och kontextvisualiseringar. Linsen ska också användas för jämförelse mellan olika delar av nätverket, där multivariata nodattribut och dynamisk nätverkstopologi är integrerade. Vår forskning syftar till att förbättra användbarheten och effektiviteten av nätverksvisualiseringar genom att integrera en magisk lins för dynamisk datautforskning. Den här studien omimplementerar och utökar verktyget Network Lens med modern webbteknologi (Cytoscape.js och D3.js) och genomför en användarstudie för att utvärdera dess design och funktionalitet. Forskningsfrågorna tar upp väsentliga designkrav för en jämförelselins, metoder för att integrera tidsmässiga nätverksjämförelser inom den magiska linsen och användarpreferenser för olika visuella representationer. Genom noggranna studier och implementering identifierar vi nyckeldesignkrav för effektiva jämförelselinser, inklusive intuitivt nodval, jämförelse med flera val och longitudinella observationsmöjligheter. Den dynamiska nätverkstopologin visualiserades med hjälp av en tidslinjerepresentation, placerad intill huvudlinsen för att bibehålla klarhet och användarvänlighet. Användarutvärderingar lyfte fram det praktiska i funktionen med dubbla linser för jämförelse sida vid sida, även om den initiala användbarheten av den dynamiska displayen antyder utrymme för förfining. Tre visuella representationer - stapeldiagram, parallella koordinater och stjärndiagram - integrerades i den magiska linsen för att förbättra multivariat datautforskning. Användarfeedback indikerade en preferens för stapeldiagram på grund av deras enkla tolkning, trots deras begränsningar i att visa små relativa värden. Parallella koordinater gynnades på andra plats för dens förmåga att bibehålla visuell klarhet över en rad värden, medan stjärndiagram, även om de var mindre föredragna, erkändes för sin potential i att visa många dimensioner. Framtida arbete bör utvidga verktygets tillämpning till datauppsättningar i verkliga världen, inkludera dynamiska nominella data och utforska alternativa dynamiska visningsmetoder. Bredare användarstudier över olika domäner kommer att ytterligare validera och förfina verktyget, vilket säkerställer dess effektivitet och anpassningsförmåga för olika datavisualiseringsbehov.