
GoCity – Code City metaphor for visualizing Go source code - eqcho
https://go-city.github.io
======
ThePhysicist
Very interesting! We built something very similar a few years ago for
visualizing code complexity (or other metrics) over large code bases, it's
also open-source:

[http://quantifiedcode.github.io/code-is-
beautiful/](http://quantifiedcode.github.io/code-is-beautiful/)

Here's e.g. the cityscape visualization of the Django codebase:

[http://quantifiedcode.github.io/code-is-beautiful/code-
city/](http://quantifiedcode.github.io/code-is-beautiful/code-city/)

We also did some 2D versions of the same graphs, which are often a bit easier
to interact with.

~~~
auto
This is really neat, does your team/you actually use this in a meaningful way?
Take a snapshot of a project occasionally to get an idea of whether it's
getting unwieldy, etc.?

~~~
ThePhysicist
We offered this as part of our SaaS product (now retired,
[https://github.com/quantifiedcode/quantifiedcode](https://github.com/quantifiedcode/quantifiedcode)).
The data was generated using a tool called "checkmate"
([https://github.com/quantifiedcode/checkmate](https://github.com/quantifiedcode/checkmate)),
which produced various metrics grouped by directory for each git commit of a
project (in an efficient way). This data was then used to generate the
visualizations.

An example for the data generated by checkmate can be found here:

[http://quantifiedcode.github.io/code-is-
beautiful/data/djang...](http://quantifiedcode.github.io/code-is-
beautiful/data/django_complexity.json)

For a given git commit, checkmate only re-analyzed the files that changed and
then recomputed all metrics on the fly using the new and existing file
revisions, which would take only a few seconds to minutes even for very large
projects.

------
fulafel
Reminds me of FSV:
[http://fsv.sourceforge.net/screenshots/10.png](http://fsv.sourceforge.net/screenshots/10.png)
(which was a clone of some even earlier SGI demo app -
[http://www.siliconbunny.com/fsn-the-irix-3d-file-system-
tool...](http://www.siliconbunny.com/fsn-the-irix-3d-file-system-tool-from-
jurassic-park/))

Anyone know of other metaphorish visualizations that might be useful for
navigating code or graphs?

~~~
quietbritishjim
How can you mention those tools without also noting their most famous on-
screen appearance: the "hacking" scene from Jurassic Park :-)

This is almost the opposite of what you're asking for, but I am reminded of a
rather more 2D version of these tools for finding what is using up space on
your hard drive: the very excellent SpaceSniffer [1], which is sadly only for
Windows.

[1]
[http://www.uderzo.it/main_products/space_sniffer/](http://www.uderzo.it/main_products/space_sniffer/)

~~~
cesarb
That tool reminds me of KDirStat
([http://kdirstat.sourceforge.net/](http://kdirstat.sourceforge.net/)).

~~~
quietbritishjim
That looks promising; pity it doesn't put the file/directory name in the
graph. It looks like KDirStat and its successor QDirStat have a split pane
view, with file names at the top and anonymous rectangles representing file
sizes at the button. It's hard to express how much more effective it is to see
all the information in one visualisation. It sounds like a small thing but
it's really the whole point of the tool.

The are issues about it in the QDirStat repo. The author has two objections:
The first is that it would look ugly. That's pretty silly: obviously function
is more important than looks when I'm tracking down disc space usage. Their
other objection is that in Linux you have such a wide directory structure that
all the labels would be uselessly crushed into tiny boxes anyway. That also
doesn't make much sense to me; even if you have a lot of directories in your
tour directory, usually there's only one or two containing the vast majority
of disc usage (that's why the tool's useful on the first place!) so their
labels will be clear, and if the others aren't then I don't care because I'm
not interested in then in the first place. Perhaps the real problem is that
QDirStat doesn't have the ability zoom in and out, and to increase and
decrease the visibility depth, that SpaceSniffer does, which is also needed to
make labels useful.

Sorry, I didn't mean for that to turn into an essay!

------
jaytaylor
This is amazingly cool!

The grand daddy of them all, Kubernetes, takes quite a toll performance-wise.

[https://go-city.github.io/#/github.com/kubernetes/kubernetes](https://go-
city.github.io/#/github.com/kubernetes/kubernetes)

~~~
regnerba
Haha that crashes chrome on my pixel 2.

~~~
zeeZ
K8S was the second thing I tried (after randomly trying hashicorp/vault). It
took about a minute to load on my Toshiba CB30, but it actually worked!
Rotated at 0.3 FPS though.

------
crawshaw
If you want a test case for improving the rendering performance, try
"github.com/juju/juju". It manages about 1 FPS on an iMac.

~~~
djhworld
similar load test is to hit github.com/golang/go

~~~
weberc2
Yeah, that crashed mobile safari for me when I tried it earlier. I imagine
kubernetes would be tough as well.

~~~
shurcooL
How does github.com/upspin/upspin compare?

~~~
weberc2
It immediately errored out on the server. Also, I recognize your username from
a transitive dependency, I think from blackfriday (markdown library), so
thanks for your contribution!

------
mitchtbaum
Reminds me of Firefox's 3D View

[https://developer.mozilla.org/en-
US/docs/Tools/3D_View](https://developer.mozilla.org/en-US/docs/Tools/3D_View)

Can anyone suggest anything like this for Rust or Lua?

------
Waterluvian
Without fail this is how it renders on my android with latest chrome

[https://imgur.com/a/pCQLpVE](https://imgur.com/a/pCQLpVE)

Never seen rendering issues like this before.

------
danbruc
Some kind of treemap [1] might be a better visualization option, 3D
visualizations are notoriously hard to navigate. NDepend [2] is a code
analysis tool for .NET which, among other things, uses treemaps to visualize
code bases. There are also a versions for Java [3] and C++ [4].

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

[2] [https://www.ndepend.com/screenshots](https://www.ndepend.com/screenshots)

[3] [https://www.jarchitect.com](https://www.jarchitect.com)

[4] [https://www.cppdepend.com](https://www.cppdepend.com)

------
jejones3141
Neat. Has anyone tried visualizing code before and after refactoring or other
transformations? Maybe code smells cause visible differences.

------
suprfnk
A note: Doesn't seem to work here, just a blank screen. Linux, Firefox
63.0b14, uBlock Origin. It does work in Chromium.

Firefox console says something about firebase being undefined:
[https://i.imgur.com/t4xOHGh.png](https://i.imgur.com/t4xOHGh.png)

~~~
federicoponzi
On my FF, it just opens a small window with:

XML Parsing Error: undefined entity Location:
chrome://browser/content/browser.xul Line Number 2483, Column 29:
flex="1">&trackingProtection.on;</label> \----------------------------^

------
napsterbr
Cool! Interestingly I always use a similar metaphor on my own projects. For
instance, the event system may be seem as the roads linking different blocks
(domains), each with their own building (module).

------
gcb0
why no webgl app likes to include canvas (mesa?) polyfill? isn't there any
good one? or they all assume 5~15s delay for a static visualization is worse
than no visualization?

------
subcosmos
Door Locks! Ellie, boot up the door locks!

