4 ms·

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

129 points by nextjj 10y ago

tzaman 10y 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 10y 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 10y 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 http://www.ndepend.com/screenshots [2] https://en.wikipedia.org/wiki/Treemapping https://en.wikipedia.org/wiki/Treemapping
- klenwell 10y 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&name=Stack%20Overflow 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 https://news.ycombinator.com/item?id=11890140
justusw 10y ago
Fascinating. I wonder how easy it is to understand cohesion and coupling just by looking at these visualisations.
- pbnjay 10y ago
  I'm now imagining cars and helicopters flying between buildings to represent data flow... that would be crazy awesome.
jefozabuss 10y ago
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.
mgalka 10y 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 10y ago
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
teraflop 10y 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-for-(and-by)-JavaScript https://github.com/aserg-ufmg/JSCity/wiki/JSCity:-Code-City-...
- nextjj 10y ago
  Sorry, the link is fixed now (both links are working).
antichaos 10y ago
Feature request: generate city-construction videos to visualize the evolution of source code.
voltagex_ 10y 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/ https://windirstat.net/ 1: http://leafletjs.com/ http://leafletjs.com/

129 points by nextjj 10y 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 10y 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 10y 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 http://www.ndepend.com/screenshots [2] https://en.wikipedia.org/wiki/Treemapping https://en.wikipedia.org/wiki/Treemapping
klenwell 10y 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&name=Stack%20Overflow 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 https://news.ycombinator.com/item?id=11890140

justusw 10y ago

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

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

jefozabuss 10y ago

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.

mgalka 10y 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 10y ago

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

teraflop 10y 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-for-(and-by)-JavaScript https://github.com/aserg-ufmg/JSCity/wiki/JSCity:-Code-City-...

nextjj 10y ago
Sorry, the link is fixed now (both links are working).

antichaos 10y ago

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

voltagex_ 10y 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/ https://windirstat.net/ 1: http://leafletjs.com/ http://leafletjs.com/