The whole application was rewritten using Angular 6 - checkout the angular-ui branch and the demo.
Feel free to contribute :-)
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.
After checking out the project to your local harddrive, you can install all needed dependencies with npm:
npm install
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.
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
To make sure the code works properly, you can run unit tests with
npm test
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
