Visualizing JavaScript source code as navigable 3D cities
GPL-2.0 License
JSCity is an implementation of the Code City metaphor for visualizing source code. We adapted and implemented this metaphor for JavaScript, using the three.js 3D library. JSCity represents a JavaScript program as a city; folders are districts and files are sub-districts; the buildings are functions; inner functions are represented as buildings on the top of their nested function/building. The Number Of Lines of Source (LOC) represents the height of the buildings/functions; the Number Of Variables (NOV) in a function correlates to the building's base size. Blue buildings denote named functions; green buildings are anonymous functions.
For examples of cities check: Wiki.
JSCity is an outcome of research conducted in the Applied Software Engineering Research Group, at Federal University of Minas Gerais, Brazil
Install nodejs. You can download it from https://nodejs.org/en/.
Install MySQL Server (https://dev.mysql.com/downloads/mysql/). If you already have the mysql on your computer jump to step * Start the MySQL server.
Run the script schema.sql located inside of sql diretory.
Setup the config.json, located inside of js directory, if necessary. This file is already set up with the sample below and if you prefer you can use it.
"host": "localhost",
"user": "jscity"
"password": "",
"database": "jscity"
cd /path-to-jscity-directory/js
node server.js
http://localhost:8888/
Alternatively, you can install Vagrant. There is a Vagrantfile and shell provision script, which will start up an Ubuntu 14.04 virtual machine instance, install MySQL and Node in it and configure them properly. You can then run:
File vagrantfile
Instructions provision_script.sh
vagrant up
http://localhost:8080/
Note that this is a different URL than the source default above.
path-to-jscity-directory/js/backend/system/
path-to-jscity-directory/js/backend/system/name-of-your-project/
path-to-jscity-directory/js/backend/system/
path-to-jscity-directory/js
cd /path-to-jscity-directory/js
node server.js
cd /path-to-jscity-directory/js/backend/system/name-of-your-project/
node generator.js path-to-project-diretory -c "Name Your Project"
This command reads all js files in the directory and its subdirectories and inserts all the information needed in the database to design the city. Remember to specify your project source code correct path, because some github cloned projects come with sample codes, minify libraries and other codes that don't represent the real core of the system.
node generator.js ./backend/system/name-of-your-project/src/ -c "City Name"
In some cases the analysed project have at the end of the file, unfinished functions that close in another file. This may be the reason of problems at the parser, causing troubles in generating data cities. In that case, you should unify the archives or use the comand bellow to ignore parser errors.
node generator.js ./backend/system/name-of-your-project/src/ -c "City Name"
http://localhost:8888/
We've implemented two types of visualization controls. The default control is an Orbital but you can easily change to a first person control by accessing the controls menu.
ORBITAL
FIRST PERSON