Home

Awesome

JSCity

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.

Examples

For examples of cities check: Wiki.

About

JSCity is an outcome of research conducted in the Applied Software Engineering Research Group, at Federal University of Minas Gerais, Brazil

Steps to see your first 3D Javascript City.

"host": "localhost",
"user": "jscity"
"password": "",
"database": "jscity"

cd /path-to-jscity-directory/js

node server.js

http://localhost:8888/

Vagrant setup

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:

vagrant up

http://localhost:8080/

Note that this is a different URL than the source default above.

How to generate a city

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/

City Controls

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.

How to use the controls

ORBITAL

FIRST PERSON

Libraries Used

node.js

nodemon

forever

mime

mysql

nomnom

esprima

three.js

stats.js

mootools