JSCity – An implementation of the Code City metaphor for visualizing source code | Hacker News Reader

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

github.com

129 pointsnextjj13 comments

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)

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.

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

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

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

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

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

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

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

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.

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/

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

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.

Reply on news.ycombinator.com