CodeCity is a software analysis tool with the goal of visualizing software systems as interactive, navigable 3D cities. They rely on the city metaphor, that uses the layout of the city in order to visualize di erent metrics about software systems. There were other implementations of CodeCity among the years but there are no modern options that contemplate the representation of time evolution of the city. We propose a solution to this time evolution, developing a web version of CodeCity that works with any device that has a web browser. Then, we analyze di erent projects and show the time evolution of their cities. Finally, we conclude with some needed features and drawbacks that are going to be considered in future works.
Codecity [
One of the known limitations of this approach is that CodeCity is developed using an old framework (SmartTalk) and it does not have support for several devices. We rely on web development and we are going to solve this limitation developing a version of CodeCity using web technologies and open source software in order to make the tool more universal and every device that has a web browser could visualize these 3D cities. In the next sections, we detailed the development and the technologies used.
On the other hand, in terms of interaction, we argue that this visualization type can get more value and better comprehension adding it a Virtual Reality environment, allowing the user to tour and navigate into the city.
Another of its limitations is that Codecity doesn't follow a xed layout for its blocks/quarters, it means that every time a code city is generated, the layout and the position of a package could change. This would be an important drawback in terms of time evolution analysis because the city would change every single time that it's generated. We are going to solve that, making the city evolve among the time, increasing and decreasing the area and height of the buildings as the metrics represented changes among the time, xing the position of the buildings, xing the same position of each building while the time snapshot changes.
Moreover, Codecity is strongly bonded to analyze the program structure. We argue that the city metaphor can be more than just analyze code, like analyze the contributions, users, and other kinds of metrics related to the community. This is one of the future works (section 4) that is going to be analyzed. 2
We are going to separate the related works in two
categories, one related to the implementations of the city
metaphor and the other related to the time evolution
implementations about treemap algorithms.
Regarding the city metaphor implementations, Juraj
Vincur et all. [
3.1
There are di erent technologies based on WebGL that are focused on making 3D scenes in the browser. Speci cally, we rely on A-Frame1, a web framework for building 3D and VR scenes for the web, for the visualization render engine, developing, thus a new version of CodeCity that works in any device that has a web browser and the needed standards included (the most important, WebVR), A-Frame is developed on top Three.js2.
Before the development of CodeCity, we got used to making some usual 3D visualization in this web 3D environment. Starting with BabiaXR3, a GitLab/GitHub organization where the developing of the di erent visualizations are allocated. BabiaXR has the aim of aggregate di erent components, using AFrame, that can create di erent types of chart in a modern browser, the web is a universal environment and any device that has a modern browser that supports WebVR can visualize the charts that the BabiaXR components produce, making it more universal and easy to use. The rst step of BabiaXR was to make the most common visualizations, the pie chart, the 3D and 2D bar chart, and the bubbles chart. The development of these visualizations is separated in some A-Frame components, geosimplebarchart for 2D bar chart, geo3dbarchart for 3D bar chart, geopiechart for pie chart and geobubbleschart for bubbles chart. Moreover, there are components related to data management, these components can query, lter data and add behavior to the visualization components. There are two components that query data, querier json for querying JSON les and querier github that query the GitHub API. The component lterdata can lter the data retrieved from a querier component and the component vismapper that maps the data ltered by a lterdata component to geometry attributes of the different charts, it "prepares" the data and save it in the entity that it is de ned.
In the repository, there is a user guide where all the information and the steps in order to create a 3D and VR dashboard are de ned.
One example of these charts is the one shown in 2: One of the advantages of A-Frame is that extends HTML, so using just two sentences of HTML with a JSON data can generate a 3D and VR visualization in 1https://aframe.io/ 2https://threejs.org/ 3https://github.com/babiaxr the web environment. For example, the next HTML code and JSON data will generate the gure 3:
The CodeCity version of BabiaXR is developed with
the goal of exploring the known limitations of the
original CodeCity, the approach is also inside the
components pack, speci cally, the components related to the
CodeCity visualization are codecity-block for blocks
and codecity-quarter for quarters. The rst step in
order to create this visualization is the layout
selection, we rely on the treemap pivot algorithm [
Moreover, there is an option for changing the appearance of the buildings for real building models loading gTLF models, making more realistic cities and improving the notion of locality. As A-Frame extends HTML and each building is de ned as an HTML tag, we de ned a unique identi er for each building in order to change its area and height in the time evolution maintaining the position and solving one of the limitations that the original CodeCity has. In terms of interaction, A-Frame includes by default the possibility of entering the scene in Virtual Reality mode, therefore, the functionality of clicking a quarter with the mouse or a controller if it using a VR device has been implemented in order to show more information about the building/quarter clicked/hovered, showing the name of it as a title on top of it. 3.3
We separate the creation of a city corresponding of a
software system in two parts, the rst one is related of
how we retrieve the data that we are going to
visualize as a city, we analyze a repository using Graal [
Once we have run the previous code, in the set of JSON les returned, there is one that has the starting information about the city evolution, called main data.json, it has a structure that de nes the data les needed of the time evolution, the sampling days that have been used and the time eld where the evolution has been made: " date_field ":"field", " sampling_days ":"180", " init_data ":" data_X_tree.json ", " time_evolution ":true , " data_files ":[ {
This le is the starting point and has to be de ned as the main data when the component is written in HTML. The data les follow the next structure, starting for the main point, that has all the needed buildings and quarters tree in order to create the city: "block":"name", " blocks ":[
{ ...
},
Then, the next les just have a list with the new values of the buildings:
Then, just creating a simple HTML le, loading the dependencies needed (from A-Frame, BabiaXR components and the le time evol.js), and de ning the parameters of the codecity-quarter component, we can see the city of the project analyzed evolving among the time: 1 <a-scene id="scene"> 2 <a-entity codecity-quarter= 'items: main_data.json ' position= "0 0 0"></ a-entity>
The following gures (5, 6, 7) represent the analysis of the project Angular5. Each building represents a le 5https://github.com/angular/angular of the project and the quarters are de ned as the tree folders that the le belongs to. As metrics, we represent the lines of code as the height of the buildings and the area represents the number of functions that the le has. Moreover, the gures represent a selected time snapshot, starting with the time snapshot of the 5th of November, 2019. Then going back 6 months (the 5th of May, 2019) and going back 18 months (the 5th of May, 2019). The demo available in the reproduction package6gives more information because there are more time samples and it is possible to see the evolution of the city in a completed and visual way. We can observe how the city evolves and how the buildings decrease their area and some of them disappear, as this is an evolution from present to past, some of the les maybe not in the past version, so the space that they lled is changed to empty terrain. For example, focusing on the center of the city, the central quarter is related to some packages that Angular includes in their code, if we observe the evolution, there are some buildings that disappear, those buildings are related to some packages that have been included in Angular in the latest version, their space is not lled in older versions.
There is a reproduction package6 available in order to reproduce all the steps in a controlled environment.
The proposed solutions to the known limitations of the original CodeCity has been developed successfully. Using the HTML identi ers of each building xes the non- xed location of the buildings, making the same location of each building as the city evolves, just changing the area and the height of each building in each time snapshot. In terms of the interaction, the possibility of adding Virtual Reality to the city and the development using web technologies solve the limitation of the interaction of the original CodeCity, making the BabiaXR version more universal and able to use in any device that has a modern web browser that supports WebVR. On the other hand, we are analyzing similar software metrics of the original CodeCity, it needs to add e ort to this research and changes the type of metrics analyzed to new ones that make sense to represent using the city metaphor.
This approach is a proof of concept of a tool that has to evolve. We were focused on replicate CodeCity in a modern and open source environment in order to make it more universal and easy to use, in this case, the web environment, and we were focused on the time evolution feature. The rst versions of this tool are just the beginning and it needs more e ort on the interaction part, we propose to add more functionality to the user interface, for example, adding two types of cities, one smaller as mock-up in order to see the entire city in a small space and take advantage to the location of the modern VR glasses. And the other one is to make a city as the same "size" as an actual city and tour the user into it, for example, driving a car or even ying. Other future work could be the feature of adding more information about the software in the city, with more user interaction than click/hover.
6https://gitlab.com/thesis-dlumbrer/repr-pckg-benevol2019
On the other hand, all the metrics seen were metrics related to modules or packages. Thus, the next step is to look for the right way to represent di erent kind of data further than software systems structure, using di erent kinds of metrics. Speci cally, we are going to deep in other software development metrics. For instance, the distribution of the commits/repositories, the relationships between the people, the time evolution of the community, etc. Therefore, we have to face the challenge of move this di erent kind of data to a city, thinking about what will represent the building, the districts, etc. Making the representation easy to understand and easy to answer questions that the common visualizations don't do.
Finally, another research branch is to approach other kinds of metaphor apart from the city, for example, islands and planets.
This work was supported by the Spanish Government (IND2018/TIC-9669).