Loggning är en viktig del i utvecklingen av en hemsida för att kunna förstå sina användare och hur de använder applikationen. Med hjälp av visualisering går det att visa data på ett tydligare sätt och det blir enklare att dra slutsatser om vad datan faktiskt säger. Lagring är ett av de problem som finns med loggar eftersom de tenderar att växa snabbt. I denna studien utförst ett experiment för att svara på frågan  ”Är MongoDB mer effektiv än MySQL vid inläsning av sparad loggdata med avseende på prestanda”. Detta svaras på genom ett mäta svarstider för respektive databas. Hypotesen för arbetet är att MongoDB är mer effektiv än MySQL, men resultatet visar att MongoDB är långsammare i samtliga testfall som genomfördes i studien. I framtiden skulle det vara intressant att utöka arbetet med fler databaser samt att bygga om drivrutien för hur MongoDB och PHP kommunicerar med varandra.

In the age of Big data and exponential digitalization, data visualization is becoming a ubiquitous tool to understand trends, patterns and identify deviations that better help in decision making. The purpose of this thesis is to explore how a scalable data visualization interface can be designed with the open-source web library D3.js. The interface is designed to display a range of patients’ physiological measurements to help healthcare professionals with Covid-19 diagnosis. Several prerequisites were identified through a qualitative study, which proved to alleviate the implementation process, such as choosing a robust model that can support visualizations despite discontinuous and incomplete datasets. Since faulty visualizations may lead to potential harm in the highly sensitive medical setting, a dedicated risk analysis was deemed beneficial and thus formulated. The design of the interface also revealed functionality that could be considered when implementing any visualization interface, such as the rendering of different views and features that can further assist the user in interpreting the visualizations. / I en tid med Big Data och en exponentiellt växande digitalisering, blir datavisualisering ett mer förekommande verktyg för att förstå trender, mönster och identifiera avvikelser för att underlätta beslutsfattande. Syftet med studien är att utforska hur ett skalbart datavisualiseringsgränssnitt kan utformas med hjälp av det webbaserade biblioteket D3.js. Gränssnittet är utformat för att visa ett omfång av patienters fysiologiska mätvärden med syftet att hjälpa sjukvårdspersonal med diagnostiken av Covid-19. Flera förutsättningar kunde upptäckas med hjälp av en kvalitativ förstudie. Denna studie visade sig underlätta implementeringsprocessen, där bland annat en robust modell som stödjer visualiseringar trots diskontinuerliga och ofullständiga dataserier identifierades. Eftersom felaktiga, eller delvis fungerande visualiseringar kan leda till potentiell skada i den mycket känsliga medicinska miljön, ansågs en riskanalys vara fördelaktig. Därför utformades en sådan analys, som dessutom visade sig sedan kunna vara användbar i flera sammanhang. Gränssnittets design visade också på gemensam funktionalitet som kan övervägas vid implementeringen av andra visualiseringsgränssnitt, bland annat hur vyer renderas men även funktioner som vägleder användaren till att lättare kunna tolka de olika visualiseringarna.

Visualization of software systems is mainly used for understanding and modeling software architecture. Examples of what can be visualized are source code, systems during execution together with manipulated data or system architecture on either a detailed or a general level. The connection between all of these types of visualization is that they help computer engineers maintain or develop software systems. The largest challenge with visualizing software systems is when the systems in question are exceedingly large and containing an abundance of relations. A problem of this kind arise at the company DGC, where this study is performed. The company manages at present more than a couple hundred systems with over ten thousand relations between each other. The problem with the company’s existing visualization is that they are very difficult to follow and understand, since they mainly present raw data in the form of tables that do not show all relations optimally, and which can also easily distract the company stakeholders from their intended task. The aim of this study is to find a visualization method where a system and its underlying parts are shown together with their relations to other systems. The created visualization will be able to be used by several different stakeholders and will as clearly as possible present relevant information to them. Furthermore, it should also aim to contribute to a better understanding of the complex software systems and their relations. After the implementation of the chosen visualization method, a time-based study is performed to determine whether it poses an improvement of perception among the stakeholders or not. An interview is also conducted where these stakeholders provide their opinion on the created visualization and if they think it presents the necessary information in a pedagogical way. Analysis of the result of the timekeeping and the interview answers indicate that the aim of the study is met. The majority of the resulting times show that the created visualization is more efficient than the original ones, and the interview answers furthermore show how different stakeholders all together agree that the visualization can be used in both future development and maintenance. / Visualisering av mjukvarusystem används i stor utsträckning för att förstå och modellera mjukvaruarkitektur. Ett par exempel på vad som kan visualiseras är: källkod, system under exekvering tillsammans med manipulerat data eller systemarkitektur på detaljerad eller övergripande nivå. Sambandet mellan alla dessa typer av visualiseringar är att de hjälper dataingenjörer att underhålla och utveckla mjukvarusystem. Den största utmaningen i att visualisera mjukvarusystem är när systemen i fråga är väldigt stora och har många beroenden. Ett sådant problem uppstår på företaget DGC där denna undersökning utförs. Företaget hanterar i dagsläge mer än hundratals mjukvarusystem med över tiotusentals beroenden sinsemellan. Problemet med företagets befintliga visualiseringar är att dessa är väldigt svåra att följa eftersom de oftast presenterar rådata i form av tabeller som inte visar alla relationer på ett optimalt sätt och distraherar lätt intressenter på företaget från sin avsedda uppgift. Undersökningen syftar på att finna en visualiseringsmetod där ett system och dess underliggande systemdelar visas tillsammans med deras beroenden till andra. Den framtagna visualiseringen skall kunna användas av flera olika intressenter, och i högsta möjliga mån presentera relevant information för dem på ett tydligt sätt. Vidare ska den skapade visualiseringen också bidra till bättre förståelse för komplexa mjukvarusystem och deras beroenden. Efter framtagandet av visualiseringen utförs en tidsundersökning, för att avgöra huruvida den skapade visualiseringen stimulerar förståelse hos de olika intressenterna på företaget. Det utförs även en intervju där intressenterna på företaget lämnar sina synpunkter angående den skapade visualiseringen och om den kan presentera nödvändig information på ett pedagogiskt sätt. Analys av resultaten av tidtagningarna och svaren på intervjuerna visar tydligt att undersökningens syften nåtts. Majoriteten av tidtagningarna visade att den skapade visualiseringen är effektivare än de ursprungliga och intervjusvaren uppvisar hur olika intressenter ser att den kan användas vid vidareutvecklingen eller underhåll, vilket alla intressenter höll med om.

Webbserver-loggar är kraftfullt att använda för att spåra användning och förstå användares beteenden, men växer snabbt i storlek och kan vara svåra att tyda i textformat. Med hjälp av visualisering kan förståelse för data skapas. Diagram är vanligast att använda och interaktivitet är ett stort hjälpmedel för att skapa mer meningsfulla grafiska representationer. Vid skapade av diagram kan JavaScript-bibliotek användas och två välanvända och populära bibliotek är D3.js och Google Charts. På grund av en ökning av webbaserad visualisering och lättillgängligheten med analyseringsverktyg online, kommer renderingstider vid visualisering av loggdata analyseras i kombination med visualisering baserat på JavaScript-bibliotek. Ett tekniskt experiment genomförs för att ta reda på vilket bibliotek som har snabbast renderingstid. För att studien ska åstadkomma ett brett resultat utförs experiment vid både initial och interaktiv rendering av diagram med loggdata och varierande faktorer. Resultatet indikerar på att D3.js erhåller snabbast renderingstider i samtliga fallen.

Visuzalizing time information using a timeline has been done for over 250 years. Using a timeline can assist users in making sense of time data which could otherwise be hard to understand. A timeline has been implemented at Ida Infront, and its purpose is to help managers understand how cases are progressing in a case management system created by Ida Infront. The timeline is designed using usability methods and has been evaluated with regards to its usability and how it interacts. Results show that there are a number of things that can increase usability and add meaningful interaction, such as using icons to collect similar data into one point and adding filtering capabilities so that users can find interesting data faster.

This thesis solves the area of data visualization in Business Intelligence. We live in a time when the amount of data grows turbulently. These data need to be processed into a form with added value for management and business objectives of the company. The first task is to adjust the data into the required format, the second task is to choose the appropriate visualization so that the data are providing the highest value. This work deals with data visualization and its main aim is to introduce a different approach to data visualization, which has a higher added value than conventional visualization methods used in dashboards and reports. First of all, theoretical part is describing data area (including the trend of Big Data) and reporting (chapter 3). Followed by chapter 4, which is enriching the reader with the information about the need to deal with data visualization and also with the design theory of visualization components. The theoretical part is finished with fifth chapter. It deals with current trends in the field of data visualization and Business Intelligence and also introduces D3.js library as a tool for creating interactive and efficient visualization components. The practical part is offering suggestions for interactive and dynamic visualization of input data (chapter 6). It presents a convenient way to choose a visualization component with greater value than the traditional static component in the form of a graph or table. Proposals contained in D3.js library are presented to the reader. Chosen components according to the author are interesting from the view of design and, if properly used, offer an innovative approach to data visualization. For purposes of practical examples of visualization, author is using D3.js library and open source tool for Business Intelligence from Pentaho. Practical example is part of the final chapter 7.

Der Schwerpunkt dieser Arbeit liegt auf der Konzeption sowie prototypischen Implementierung eines web-basierten Dashboards zur Softwarevisualisierung. Ziel der Arbeit ist es, ein Dashboard zu entwickeln, welches Informationen eines Softwareprojekts dynamisch aus einer Graphdatenbank visualisiert und Projekteitern aufgabenbezogen zur Entscheidungsunterstützung darstellt. Derzeit existiert keine Softwarelösung, die diesen Anforderungen vollumfänglich gerecht wird. Es existieren jedoch bereits Bibliotheken und Softwaresysteme, welche Teilaspekte zu einer möglichen Gesamtlösung beitragen können. Diese können bei der prototypischen Implementierung von Nutzen sein und müssen daher beachtet werden. Um die Ziele der Arbeit zu erreichen, werden verschiedene Forschungsmethoden angewandt. Es wird eine Literaturrecherche durchgeführt, mit dem Ziel, typische Aufgaben von Projektleitern im Bereich Software Engineering zu identifizieren. Um die vom Dashboard zu unterstützenden Aufgaben ableiten zu können, werden außerdem verschiedene existierende Dashboard-Werkzeuge analysiert. Mithilfe der gewonnenen Ergebnisse wird das Dashboard konzipiert und prototypisch implementiert. Durch eine Fallstudie anhand von Open-Source-Projekten wird das Dashboard abschließend evaluiert.:1 Einleitung 1.1 Motivation und Problemstellung 1.2 Zielstellung 1.3 Methodisches Vorgehen 2 Grundlagen 2.1 Softwarevisualisierung 2.2 jQAssistant 2.3 Neo4j 2.4 Webanwendungen und web-basierte Frameworks 2.5 D3.js 2.6 Dashboards 3 Konzeption 3.1 Mission Statement 3.2 Architekturziele 3.3 Kontextabgrenzung 3.3.1 Fachlicher Kontext 3.3.1.1 Literaturrecherche zu typischen Aufgaben von Projektleitern 3.3.1.2 Analyse existierender Dashboard-Werkzeuge 3.3.1.3 Use-Case-Diagramm der zu unterstützenden Aufgaben 3.3.1.4 Mockups der Benutzungsschnittstelle 3.3.2 Technischer Kontext 3.4 Randbedingungen 3.4.1 Technische Randbedingungen 3.4.2 Organisatorische Randbedingungen 3.5 Risiken und technische Schulden 3.6 Entwurfsentscheidungen 3.6.1 Auswahl des Neo4j-Treibers 3.6.2 Vergleich existierender Webframeworks 3.6.2.1 Angular 3.6.2.2 Backbone.js 3.6.2.3 Ember.js 3.6.2.4 Vue.js 3.6.2.5 React 3.7 Lösungsstrategie 4 Implementierung 4.1 Implementierungskomponenten 4.1.1 CoreUI 4.1.2 Nivo 4.2 Dashboard 4.2.1 Startseite 4.2.2 Einstellungen 4.2.3 Benutzerdefinierte Abfragen 4.2.4 Visualisierungskomponenten 4.2.4.1 Struktur 4.2.4.2 Dateitypen 4.2.4.3 Abhängigkeiten 4.2.4.4 Aktivitäten 4.2.4.5 Wissensverteilung 4.2.4.6 Hotspots 4.2.4.7 Statische Quellcodeanalyse 4.2.4.8 Testabdeckung 4.2.4.9 Erstellung 4.3 Eingesetzte Werkzeuge 4.3.1 Entwicklung und Test 4.3.1.1 Jest 4.3.1.2 Codecov 4.3.1.3 Travis CI 4.3.1.4 Prettier 4.3.1.5 Docker 4.3.2 Installation und Wartung 5 Evaluation 6 Fazit und Ausblick

Olika typer av data används för att användare skall kunna presentera och dra beslut ifrån data, för att lättare förstå datan tillämpas visualisering som ett sätt att göra datan mer läsbar och lättförstådd. När data skall visualiseras på webben kan många olika teknologier användas för att rendera ut datan. I denna studie kommer ramverk för rendering av heatmaps jämföras sett till deras prestanda i form av renderingstid. De två applikationer som utvecklades var D3.js samt Three.js. Dessa jämfördes sedan i ett experiment där mätningar utfördes på de båda teknologierna. Resultatet blev att Three.js var mer lämpat för visualisering av heatmaps på webben.

Webbaserade karttjänster är ett mycket användbart verktyg som används av hela världen. En karta kan hjälpa till med navigering och geografisk datavisualisering. Att skapa en karttjänst går att göra på flertal olika sätt med flera olika verktyg som utnyttjar diverse tekniker. På grund av sin detaljerade utritning och sina animationer så klassas karttjänster som CPU-intensiva och bör därför vara ett bra användningsområde för hårdvaruaccelerering. När man interagerar med en karta så sker mycket utritningar och beräkningar som tros kunna dra nytta av möjligheten till hårdvaruaccelerering. Studien kommer att undersöka hur hårdvaruaccelerering påverkar laddningstid, utritningstid vid zoom och FPS vid interaktion och avgöra om det är värt att använda. Resultatet som erhölls påvisade negativ påverkan vid laddningstid och utritningstid men positiv påverkan på FPS vid interaktion i ett inzoomat läge men negativ påverkan på zoomnivån som är standard. En slutsats kan då dras att hårdvaruaccelerering inte är värt det i denna form av kartapplikation.

Datavisualisering används för att sammanfatta data på ett sätt som oss människor kanförstå. I arbetet används ett dataset som innehåller schackdata i form av schackpartier.På grund av att schackdata är ett komplext dataformat samtidigt som det kan omfattastora mängder data kan det leda till problem vid datavisualisering. Detta beror påschackdatans komplexitet och datamängd vilket är två vanliga faktorer som kanresultera i långsamma utritningstider inom datavisualisering. För att visualisera data iwebben är det väldigt vanligt att använda sig av javascript bibliotek. I detta arbetetkommer biblioteken Heatmap.js och D3.js att jämföras i ett tekniskt experiment för attse vilket bibliotek som har snabbat utritningstid vid visualisering av schackdata medheatmaps. Resultatet av experimentet indikerar att det mestadels inte finns någonskillnad i utritningstid mellan biblioteken vid visualisering av schackdata. Framtidaarbeten borde undersöka hur heatmaps kan användas inom andraanvändningsområden än schack. / <p>Det finns övrigt digitalt material (t.ex. film-, bild- eller ljudfiler) eller modeller/artefakter tillhörande examensarbetet som ska skickas till arkivet</p>