
JSCity – An implementation of the Code City metaphor for visualizing source code - nextjj
https://github.com/aserg-ufmg/JSCity/wiki/JSCITY
======
tzaman
Apart from being very fun to play around with, is there a concrete problem
this project solves? Or is it just "because we can" kind of thing?

EDIT: after playing with "react" a bit, it seems that "third_party" brings the
most to the source, which is something to think about (bloat in our projects
is often caused by third parties)

~~~
danbruc
If you have to learn a new or have to monitor the health of a large code base,
then visualizations are really helpful. For .NET there is for example NDepend
[1] which also offers treemapping [2] but in the more traditional 2D version
which is probably quite a bit more useful in practice than the 3D version
shown here. But still it is more or less the same thing.

[1] [http://www.ndepend.com/screenshots](http://www.ndepend.com/screenshots)

[2]
[https://en.wikipedia.org/wiki/Treemapping](https://en.wikipedia.org/wiki/Treemapping)

------
teraflop
Not sure why you posted a link to a blank wiki page. This seems like a better
starting point: [https://github.com/aserg-ufmg/JSCity/wiki/JSCity:-Code-
City-...](https://github.com/aserg-ufmg/JSCity/wiki/JSCity:-Code-City-
for-\(and-by\)-JavaScript)

~~~
nextjj
Sorry, the link is fixed now (both links are working).

------
justusw
Fascinating. I wonder how easy it is to understand cohesion and coupling just
by looking at these visualisations.

~~~
pbnjay
I'm now imagining cars and helicopters flying between buildings to represent
data flow... that would be crazy awesome.

------
antichaos
Feature request: generate city-construction videos to visualize the evolution
of source code.

------
jefozabuss
2D alternatives:

[http://hughsk.io/disc/](http://hughsk.io/disc/) (browserify)

[https://chrisbateman.github.io/webpack-
visualizer/](https://chrisbateman.github.io/webpack-visualizer/) (webpack)

Though these are visualizing the size of the files not the LOC.

------
voltagex_
Reminds me of the charts that WinDirStat [0] builds to show disk usage. I
wonder if you could use something like leaflet.js [1] to create a zoomable, 2D
variant of the "code city"

0: [https://windirstat.net/](https://windirstat.net/)

1: [http://leafletjs.com/](http://leafletjs.com/)

------
sassyalex
That's quite a funny project. I setup this thing and just draw a code viz for
[https://github.com/Unitech/PM2](https://github.com/Unitech/PM2), that looks
pretty cool: [http://i.imgur.com/gvm0fxs.png](http://i.imgur.com/gvm0fxs.png)

------
mgalka
Would like to know more about why they chose to visualize it in this way.
Either way, looks like it will at least be fun to play around with.

