JSCity – An implementation of the Code City metaphor for visualizing source code

https://github.com/aserg-ufmg/JSCity/wiki/JSCITY

by nextjj • 10 years ago

129 13 10 years ago

tzaman• 10 years ago

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)

appleiigs• 10 years ago

Sometimes the story doesn't come out until after doing the visualization, so the exploration could be the point.

The structure of the code does show here. The skyscrapers may not be using the "make each function do one thing well". Someone who knows the code would need to see if the visualization accurately reveals anything.

danbruc• 10 years ago

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

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

klenwell• 10 years ago

I posed this question on Stack Overflow just yesterday:

How can I visualize the javascript used by a given url?

Someone at work just showed me our site on cssstats.com and I really like the way it illustrates the bloat and redundancy in our website's stylesheets. An example:

http://cssstats.com/stats?url=http%3A%2F%2Fstackoverflow.com...

I was wondering if there was something comparable for javascript. I did some googling but couldn't find anything myself.

I'm looking to convince management (most of which is non-technical) to invest some time in refactoring and simplifying our stylesheets and javascript and I think something like this (not necessarily a "a book, tool, software library, tutorial or other off-site resource" but, yeah, something like that) would really help make my case.

This particular visualization isn't quite what I'm looking for. But it is interesting. I'm tempted to run our code base through it. I'm afraid it will come out a sprawling slum. But then I guess that would be my point.

Epilogue: Stack Overflow question was immediately killed as off-topic. Which flashed me back to this thread: https://news.ycombinator.com/item?id=11890140

justusw• 10 years ago

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

pbnjay• 10 years ago

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

jefozabuss• 10 years ago

2D alternatives:

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

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

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

mgalka• 10 years ago

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.

sassyalex• 10 years ago

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

teraflop• 10 years ago

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-...

nextjj• 10 years ago

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

antichaos• 10 years ago

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

voltagex_• 10 years ago

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/

1: http://leafletjs.com/

JSCity – An implementation of the Code City metaphor for visualizing source code

Related Stories