CodeCity - Visualize Your JavaScript As A City
CodeCity - Visualize Your JavaScript As A City
Written by Ian Elliot   
Monday, 29 May 2017

If you haven't encountered the idea of CodeCity before then this is going to be fun. Even if you have it is worth checking out what some familiar JavaScript code libraries look like as cities.

The  CodeCity software visualization metaphor was originally proposed by Wettel and Lanza in 2011 to visualize object-oriented code. JSCity is an implementation of these ideas in JavaScript for JavaScript by three researchers Marcos Viana, Andre Hora and Marco Tulio Valente based in Brazil. 

In the original CodeCity classes are represented as buildings, but this has had to be adapted because JavaScript is not a simple, class-based, language. The obvious thing to do is to replace class by functions.

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 enclosing function/building. The Number Of Lines of source Code (LOC) represents the height of the buildings/functions; the Number Of Variables (NOV) in a function correlates to the building’s base size.

jscity1

So when you view the cityscape, big buildings correspond to big functions. 

The program was implemented in JavaScript using the Esprima framework to generate an abstract syntax tree for the code and ThreeJS for the 3D graphics. Once the city is rendered you can move around, change the camera angle and zoom in to view it better. The software is available on GitHub for you to try out.

The researchers also analyzed 40 well-known JavaScript code bases and they present three as being particularly interesting - AngularJS core functions, Bower and jQuery - see if you can guess which is which:

CITY A

cityA

 

CITY B

cityB

CITY C

cityc

I have to admit that I recognized my favorite JavaScript library almost at once! The identity of each city can be found at the very very end of this news item - scroll down.

More Information

CodeCity for (and by) JavaScript

JSCITY On GitHub

Related Articles

Does Python Smell Like Java?

On the Unhappiness of Software Developers

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on, Twitter, FacebookGoogle+ or Linkedin.

 

Banner


Curie and Arduino 101 Abandoned By Intel
26/07/2017

Intel is discontinuing the Curie and the Curie-enabled Arduino 101. This has devastated developers who have based products on the Curie, but others are still unaware of the news, which has been releas [ ... ]



Storm Over For Teapot Error Code
13/08/2017

When it was proposed that Error Code 418 I'm a Teapot be removed from Golang, Node and ASP.NET, a campaign to save it was quickly launched - and almost instantly successful. 


More News

 
 

 

blog comments powered by Disqus

 

The Cities

  • A is jQuery
  • B is AngularJS
  • C is Bower.

 

 

 

Last Updated ( Monday, 29 May 2017 )
 
 

   
RSS feed of news items only
I Programmer News
Copyright © 2017 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.