Skip to content
Diego Aparecido Martins edited this page Nov 3, 2016 · 81 revisions

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 (In settings,including new cities)

See and navigate by a list of cities for popular JavaScript software.

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

<tr valign="top">
 <td width="25%" align="center">gulp<br><a href=http://aserg-ufmg.github.io/JSCity/?id=21 target="_blank">
 <img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/gulp.png></a></td>
 <td width="25%" align="center">isomer <br><a href=http://aserg-ufmg.github.io/JSCity/?id=27 target="_blank">
 <img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/isomer.png></a></td>	
</tr>
<tr valign="top">
	<td width="25%" align="center">impressjs<br><a href=http://aserg-ufmg.github.io/JSCity/?id=23 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/impressjs.png></a></td>	
	<td width="25%" align="center">deckjs<br><a href=http://aserg-ufmg.github.io/JSCity/?id=12 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/deckjs.png></a></td>	
</tr>
<tr valign="top">
	<td width="25%" align="center">soket.io<br><a href=http://aserg-ufmg.github.io/JSCity/?id=55 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/soket.io.png></a></td>	
	<td width="25%" align="center">mustache<br><a href=http://aserg-ufmg.github.io/JSCity/?id=40 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/mustache.png></a></td>	
</tr>
<tr valign="top">
	<td width="25%" align="center">parallax <br><a href=http://aserg-ufmg.github.io/JSCity/?id=41 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/parallax.png></a></td>	
	<td width="25%" align="center">respond<br><a href=http://aserg-ufmg.github.io/JSCity/?id=48 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/respond.png></a></td>	
</tr>
<tr valign="top">
	<td width="25%" align="center">reveal<br><a href=http://aserg-ufmg.github.io/JSCity/?id=49 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/reveal.png></a></td>	
	<td width="25%" align="center">slick<br><a href=http://aserg-ufmg.github.io/JSCity/?id=53 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/slick.png></a></td>	
</tr>
cappuccino [new]
ember
dexter
move [new]
mootools
tween [new]

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

<tr valign="top">
	<td width="25%" align="center">bower[new]<br><a href=http://aserg-ufmg.github.io/JSCity/?id=7 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/bower.png></a></td>	
	<td width="25%" align="center">bootstrap<br><a href=http://aserg-ufmg.github.io/JSCity/?id=6 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/bootstrap.png></a></td>	
</tr>

<tr valign="top">
	<td width="25%" align="center">express<br><a href=http://aserg-ufmg.github.io/JSCity/?id=17 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/express.png></a></td>	
	<td width="25%" align="center">florajs<br><a href=http://aserg-ufmg.github.io/JSCity/?id=18 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/florajs.png></a></td>	
</tr>

<tr valign="top">
   <td width="25%" align="center">crafty<br><a href=http://aserg-ufmg.github.io/JSCity/?id=11 target="_blank">
   <img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/crafty.png></a></td>
   <td width="25%" align="center">chart<br><a href=http://aserg-ufmg.github.io/JSCity/?id=9 target="_blank">
   <img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/chart.png></a></td>	
</tr>		
		
<tr valign="top">
   <td width="25%" align="center">dust [new] <br><a href=http://aserg-ufmg.github.io/JSCity/?id=14 target="_blank">
   <img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/dust.png></a></td>
   <td width="25%" align="center">backbone<br><a href=http://aserg-ufmg.github.io/JSCity/?id=5 target="_blank">
   <img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/backbone.png></a></td>	
</tr>

<tr valign="top">
	<td width="25%" align="center">ghost<br><a href=http://aserg-ufmg.github.io/JSCity/?id=19 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/ghost.png></a></td>	
	<td width="25%" align="center">grunt<br><a href=http://aserg-ufmg.github.io/JSCity/?id=20 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/grunt.png></a></td>	
</tr>

<tr valign="top">
	<td width="25%" align="center">intern [new]<br><a href=http://aserg-ufmg.github.io/JSCity/?id=24 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/intern.png></a></td>	
	<td width="25%" align="center">ionic<br><a href=http://aserg-ufmg.github.io/JSCity/?id=25 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/ionic.png></a></td>	
</tr>

<tr valign="top">
	<td width="25%" align="center">istanbul<br><a href=http://aserg-ufmg.github.io/JSCity/?id=26 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/istanbul.png></a></td>	
	<td width="25%" align="center">js-git [new]<br><a href=http://aserg-ufmg.github.io/JSCity/?id=31 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/js-git.png></a></td>	
</tr>

<tr valign="top">
	<td width="25%" align="center">jade<br><a href=http://aserg-ufmg.github.io/JSCity/?id=45 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/pug.png></a></td>	
	<td width="25%" align="center">jasmine<br><a href=http://aserg-ufmg.github.io/JSCity/?id=28 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/jasmine.png></a></td>	
</tr>
<tr valign="top">
	<td width="25%" align="center">leaflet <br><a href=http://aserg-ufmg.github.io/JSCity/?id=33 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/leaflet.png></a></td>	
	<td width="25%" align="center">less<br><a href=http://aserg-ufmg.github.io/JSCity/?id=34 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/less.png></a></td>	
</tr>

<tr valign="top">
 <td width="25%" align="center">meteor [new]<br><a href=http://aserg-ufmg.github.io/JSCity/?id=36 target="_blank"><img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/meteor.png></a></td>	
	<td width="25%" align="center">modernizr<br><a href=http://aserg-ufmg.github.io/JSCity/?id=37 target="_blank"><img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/modernizr.png></a></td>	
<tr valign="top">
	<td width="25%" align="center">pdfjs<br><a href=http://aserg-ufmg.github.io/JSCity/?id=42 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/pdfjs.png></a></td>	
	<td width="25%" align="center">pixi<br><a href=http://aserg-ufmg.github.io/JSCity/?id=44 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/pixi.png></a></td>	
</tr>

<tr valign="top">
	<td width="25%" align="center">react <br><a href=http://aserg-ufmg.github.io/JSCity/?id=47 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/react.png></a></td>	
	<td width="25%" align="center">select2<br><a href=http://aserg-ufmg.github.io/JSCity/?id=51 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/select2.png></a></td>	
</tr>

<tr valign="top">
	<td width="25%" align="center">semanticui<br><a href=http://aserg-ufmg.github.io/JSCity/?id=52 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/semanticui.png></a></td>	
	<td width="25%" align="center">paper<br><a href=http://aserg-ufmg.github.io/JSCity/?id=63 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/paper.png></a></td>	
</tr>

<tr valign="top">
	<td width="25%" align="center">EaselJs [new]<br><a href=http://aserg-ufmg.github.io/JSCity/?id=15 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/easelJs.png></a></td>	
	<td width="25%" align="center">karma<br><a href=http://aserg-ufmg.github.io/JSCity/?id=32 target="_blank"> 
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/karma.png></a></td>	
</tr>

<tr valign="top">
	<td width="25%" align="center">phase<br><a href=http://aserg-ufmg.github.io/JSCity/?id=43 target="_blank"><img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/phase.png></a></td>	
	<td width="25%" align="center">quintus [new]<br><a href=http://aserg-ufmg.github.io/JSCity/?id=46 target="_blank"><img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/quintus.png></a></td>	
</tr>

<tr valign="top">
	<td width="25%" align="center">riot [new]<br><a href=http://aserg-ufmg.github.io/JSCity/?id=50 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/riot.png></a></td>	
	<td width="25%" align="center">snap [new] <br><a href=http://aserg-ufmg.github.io/JSCity/?id=54 target="_blank">
	<img width="250"  src=https://raw.githubusercontent.com/aserg-ufmg/JSCity/gh-pages/cities/snap.png></a></td>	
</tr>
algorithmsjs
angular
jquery
jqueryfileupload
clumsybird
underscore [new]
mocha [new]
textillate [new]
velocity [new]
zepto [new]
Clone this wiki locally