Federal University of Minas Gerais (UFMG), Belo Horizonte – Brazil
Figure 2 presents the steps that are needed to produce a code city visualization. First, during an offline phase, the Esprima parser is called to generate an AST. After that, the data required for producing a city visualization is persisted in a database. During an online phase, a City Drawer component is responsible for retrieving the data required for producing a city visualization and to draw the city using the ThreeJS framework.
In this section, we present and discuss the code cities of three systems:
Figures 3 and 4 present the city of AngularJS, a popular MVC-based framework. The system has 233,785 lines of source code, 20 directories, 863 files, 10,362 anonymous functions, and 6,050 named functions. We can see that AngularJS’s city has two main areas: a district with small buildings (Figure 3) and an area with many skyscrapers (Figure 4). In fact, the directory (district) in Figure 3 has many small anonymous functions (in green) for internationalization, which are located in directory . By contrast, the district in Figure 4 includes functions responsible for the system core. The tallest building is function . This function “compiles an HTML string or DOM into a template and produces a template function”.
From our selection of systems, it is possible to infer some patterns of development, summarized as follows. Tall and wide buildings are usually core functions of the systems; large districts with small and regular layouts represent, for example, internationalization features. Green buildings (anonymous functions) are largely used in practice as well as buildings on top of other buildings (nested functions).
5 Related Work
In this work, we presented JSCity, which is inspired by CodeCity [7, 8]. CodeCity aims to make software analysis, where systems are shown as navigable and interactive 3D cities. Classes are represented as city buildings, while modules are represented as districts. Number of methods is the height of the buildings, the number of variables represents the width, and the number of lines of code is represented by colors – from dark gray (lowest number) to intense blue (greater number). CodeCity is available in Eclipse  and Moose tool . However, such cases are restricted to the analysis of the object-oriented languages Java and Smalltalk. Finally, other visualization—not necessarily in the form of cities—have already been proposed for other system dimensions, such as bug analysis .
This research was supported by CNPq and FAPEMIG.
-  CodeCity Eclipse. CodeCity Eclipse, 2015. https://marketplace.eclipse.org/content/codecity.
-  CodeCity Moose. CodeCity Moose, 2015. http://www.inf.usi.ch/phd/wettel/codecity.html.
-  Andre Hora, Nicolas Anquetil, Stephane Ducasse, Muhammad Bhatti, Cesar Couto, Marco Tulio Valente, and Julio Martins. Bug maps: A tool for the visual exploration and analysis of bugs. In European Conference on Software Maintenance and Reengineering, 2012.
-  Alex Nederlof, Ali Mesbah, and Arie van Deursen. Software engineering for the web: The state of the practice. In Companion Proceedings of the 36th International Conference on Software Engineering, 2014.
-  Richard Wettel and Michele Lanza. CodeCity: 3D Visualization of Large-scale Software. In International Conference on Software Engineering, 2008.
-  Richard Wettel, Michele Lanza, and Romain Robbes. Software systems as cities: A controlled experiment. In International Conference on Software Engineering, 2011.