GoCity – Code City metaphor for visualizing Go source code | Hacker News Reader

GoCity – Code City metaphor for visualizing Go source code

go-city.github.io

210 pointseqcho35 comments

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/

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

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.

Nice! We also have an internal tool for this that was somewhat recently open-sourced: https://github.com/MaibornWolff/codecharta. It's been quite useful in several projects I've been on, especially when used on legacy codebases to visualize improvement as a refactoring/rebuild project progresses.

Thanks for sharing this, it looks very nice and polished!

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

We offered this as part of our SaaS product (now retired, https://github.com/quantifiedcode/quantifiedcode). The data was generated using a tool called "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...

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.

We actually use our similar tool (see my reply to parent comment) in a typical CI/CD pipeline. The generated output can be visualized and browsed anytime. The tool can visualize differences between different analysis states, which makes it very useful to demonstrate progress as a project grows, especially on pre-existing codebases that are refactored/rebuilt.

I love this. Do you happen to know if there's anything similar for ruby?

In theory you can use it for other languages as well, you'd "just" need to implement an analyzer for that language using checkmate. Currently we do not actively develop this project so I'm not able to help you with this, will be happy to provide guidance on the process if you want to implement it yourself.

Reminds me of FSV: 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...)

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

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/

That tool reminds me of KDirStat (http://kdirstat.sourceforge.net/).

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!

I've been using Disk Inventory X [0] for years. It's free and it works great!

[0] http://www.derlien.com/

On the mac there is DaisyDisk

A year ago a comment here (https://news.ycombinator.com/item?id=15494524) pointed me to Eagle Mode: http://eaglemode.sourceforge.net/

One format I liked is distellamap, [1] a visualization of some Atari 2600 games in poster format.

https://benfry.com/distellamap/

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

Haha that crashes chrome on my pixel 2.

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.

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

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

Similar result to what is being described on Safari with this on Chrome - slows down to 1 fps, and some of the gray boxes to seem to be rendering with a red one.

Surprisingly I found other smaller repos render slower (maybe because more was visible), for instance:

https://go-city.github.io/#/github.com/m3db/m3

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

How does github.com/upspin/upspin compare?

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!

Reminds me of Firefox's 3D View

https://developer.mozilla.org/en-US/docs/Tools/3D_View

Can anyone suggest anything like this for Rust or Lua?

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

https://imgur.com/a/pCQLpVE

Never seen rendering issues like this before.

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

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

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

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

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

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

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

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

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?

Door Locks! Ellie, boot up the door locks!

Reply on news.ycombinator.com