Preface

The whole application was rewritten using Angular 6 - checkout the angular-ui branch and the demo.
Feel free to contribute :-)

Visualization of software quality and evolution

Background

In the context of my bachelor thesis, I developed a prototypic application that can visualize the structure and quality of software. It has been developed with the help of web technologies HTML, CSS and JavaScript. For the three-dimensional visualization, the library Three.js was used.

With the comparison of different versions of this software, tendencies of the software's evolution shall be revealed and become visible. According to that, the aim of this application is that developers and also project managers are able to intuitively explore and localize flaws and possibilities to improve their projects. Therefore, results of static code analyses are visualized in the form of a city with buildings representing the files and districts representing the modules of the project.

How to install

Checkout and install dependencies

After checking out the project to your local harddrive, you can install all needed dependencies with npm:

npm install

Coderadar

The application is yet designed to visualize results of static code analyses of the tool Coderadar exclusively. So at the moment, you would need to have a locally running Coderadar server and a fully analyzed sample project in order to use the application. To see how this works, just have a look at the GitHub project and at the administration guide.

How to develop

Transpiling to ES5

Because ES6 is used for writing the JavaScript code, you need to transpile the code into ES5 to make the app run in all browsers. You can easily do that with the help of gulp:

gulp

To make the development a lot more comfortable, you can also start a code watcher with gulp. It will automatically transpile the JavaScript code to ES5 whenever it detects a change in the source files:

gulp watch

Execute tests

To make sure the code works properly, you can run unit tests with

npm test

Screenshots

Just choose two versions of your software project (based on GIT) and the type of view:

You can compare the two versions either side by side ...

... or in a merged view:

You can filter for specific properties of your classes ...

... and map different types of metrics to your personal visualization.

Of course, you can also search for certain files in your project and highlight them in the visualization