Visual Java Source Code Dependency Cycle Analysis with Chord Diagrams смотреть онлайн

Live Demo http://www.iunera.de/codedependencywithchord/index.html
Github: https://github.com/iunera/codeanalysis

This project is a proof of concept to demonstrate the advantages of a visual chord-diagram based investigation of software dependencies. The goal is to show that this graphical representation enables to detect and to analyze a program without having to know the implementation details on a detailed source code level. The application of the project can be used for business cases like quality gates or to plan refactorings to decouple or rearrange packages.

The data origin for the demo diagram were created by computing coupling indicators of the Eclipse Communities Java development tools (JDT) with the Hypermodelling technology.

Please give Feedback in the comments.

Live Demo
http://www.iunera.de/codedependencywithchord/index.html

Source Code and explanations
https://github.com/iunera/codeanalysis




Background
In general, a software architecture goal to create reliable and reusable software artifacts is to develop loosely coupled software components. Furthermore, strong source code dependencies inflict source reuse and engineering problems.

However, even that it is well-known that restricting dependencies is a good thing, software engineers often cannot avoid them when manufacturing systems in the first place. Commonly, a software system is developed by iterative steps and the dependencies grow in the continuous development process. This results in the process that the dependencies have to be maintained over time and refactoring steps have to be taken to manage and reduce dependencies over time. Once the development of code foundation of a software system grows, the management of dependencies gets more and more complex.

In order to reduce dependencies, developers need to know which artifacts consume other artifacts. Today, mostly this work is done by inspecting the source code manually. Usually the developers tediously gather the artifacts that belong to the desired dependencies and then try to reduce them.

Additionally, software and their dependencies are multi-dimensional construct and manifold what makes the inspection even more difficult. When we saw complex chord diagrams about the financial crisis (check it here) we got motivated us to use chord diagrams to investigate software dependencies in a visual manner. Hence, we develop a complete Javascript solution to leverage the power of chord diagrams to analyze the dependencies of programs in a top down approach.
This way, investigations of the dependencies of program components can be done in a visual and intuitively understandable way.

This solution supports the following key features:
Permanent marking
The user can select software components and the highlighting (just click the border) is done in a permanent way and not faded away once the hover pointer gets moved away. A special feature of the permanent highlighting is that the connected components that are not activated permanently but that are connected to a highlighted component get faded partially. This way, the user can distinguish selected and connected elements, because the selected ones get shown not faded at all and the just connected ones get shown partially.

Dependency intensity visualisation
The dependency intensity gets visualized in a graphical manner by showing different thick connections

Faded association highlighting
Selected system components lead to a highlighting of the associated dependencies and the components they lead to

Hover tooltips
Tooltips get shown once a dependency gets selected, showing details about the intensity

Drill-Downs
Drill downs enable to get insights of selected component data and their inner dependencies at multiple levels

Url parameter diagram state
The state of the visualization is stored in URL parameters to enable forwarding an investigation result to other people via a hyperlinks.