Visualizing JavaScript Code as 3D Cities
Software systems are large and complex projects. Some systems have millions of lines of source code, written in programming languages, like Java, Python and JavaScript. However, the internal code of a software is invisible and intangible to end-users. This is a fundamental difference between software and other engineering constructions. For example, buildings have floor plans, which are used by architects and civil engineers to discuss important decisions with clients, even before the building construction starts.
To provide a geometric representation of software systems, researchers from University of Lugano (Switzerland) proposed in 2010 a metaphor to represent source code, in the form of 3D cities, called code cities. The idea is that the main modules of a system are the city districts. The internal parts of these modules (usually, called classes or functions, by software engineers) are the city’s buildings. The buildings’ height correlates to their size in terms of lines of source code and the buildings’ width represents the amount of data that is manipulated by the code.
Recently, we adapted and implemented the code city metaphor for JavaScript, the main programming language used by Web systems. For example, Google Maps and GMail are mostly implemented in JavaScript. Besides its importance in Web development, JavaScript code can be downloaded from the Web and readily executed in any web browser. For this reason, code cities for JavaScript systems can be presented to any user, without requiring complex setup and installation procedures. Our system, called JSCity, was used to create code cities for more than 50 popular JavaScript systems, which are publicly available for download at GitHub (a widely used software repository).
Here are some examples of cities generated by JSCity. Some cities have just two towers, as the following city:
Other cities have many skyscrapers, as the following one:
There are also cities with a more homogeneous distribution of buildings.
With JSCity, we expect to provide a tool that can be used by software engineers to explain and document their daily work to end-users.
Other examples of JSCities are available here. After downloading the cities, you can also rotate them and use a zoom to inspect the city buildings.
