Marcos L. Longuinho Viana edited this page Jun 23, 2017 · 81 revisions

JSCity is an implementation of the Code City metaphor for visualizing source code. JSCity represents a JavaScript program as a city, as follows:

  • Folders are districts and files are sub-districts
  • Functions are buildings; inner functions are represented as buildings on the top of their nested function/building.

The Number of Lines of Source Code (LOC) represents the height of the buildings; the Number of Variables (NOV) in a function correlates to the building's base size. Blue buildings are named functions; green buildings are anonymous functions.

Source Code

JSCity source code is publicly available here (including instructions for generating cities for your own system).

About

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

Examples

See and navigate by a list of cities for 60 popular JavaScript software (just click in the images to start the visualization).

Small Cities (load in seconds; use mouse scroll to zoom in/out)

cappuccino [new]
florajs
cappuccino [new]
florajs
dexter
move [new]
gulp
isomer
mootools
tweenJs [new]
soket.io
mustache
parallax
respond
reveal
slick

Medium and Large Cities (may take minutes to load; use mouse scroll to zoom in/out)

algorithmsjs
angularjs
bower
bootstrap
crafty [new]
chartJs
dust [new]
backbone [new]
ember [new]
express
ghost
grunt
intern [new]
ionic
istanbul
js-git [new]
jade
jasmine
jquery
jqueryfileupload
leaflet
less
meteor [new]
modernizr
pdfjs
pixi
react
select2
semanticui
paperJs
EaselJs [new]
karma [new]
phaser
quintus [new]
riot [new]
snap [new]
knockout [new]
rot [new]
clumsybird
underscore [new]
mocha [new]
textillate [new]
velocity [new]
zepto [new]
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.