GoCity – Code City metaphor for visualizing Go source code

https://go-city.github.io

by eqcho • 8 years ago

210 35 8 years ago

go-city.github.io

fulafel• 8 years ago

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?

quietbritishjim2• 8 years ago

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/

cesarb2• 8 years ago

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

dilap• 8 years ago

On the mac there is DaisyDisk

pault• 8 years ago

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

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

cesarb2• 8 years ago

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

spc476• 8 years ago

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

https://benfry.com/distellamap/

ThePhysicist4• 8 years ago

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.

auto• 8 years ago

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

ThePhysicist4• 8 years ago

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.

olex2• 8 years ago

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.

olex2• 8 years ago

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.

ThePhysicist4• 8 years ago

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

jonahx• 8 years ago

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

ThePhysicist4• 8 years ago

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.

crawshaw• 8 years ago

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• 8 years ago

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

weberc22• 8 years ago

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

VoidWhisperer• 8 years ago

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.

roskilli• 8 years ago

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

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

danbruc• 8 years ago

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

subcosmos• 8 years ago

Door Locks! Ellie, boot up the door locks!

mitchtbaum• 8 years ago

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?

Waterluvian• 8 years ago

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.

jejones3141• 8 years ago

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

jaytaylor• 8 years ago

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

regnerba• 8 years ago

Haha that crashes chrome on my pixel 2.

zeeZ• 8 years ago

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.

napsterbr• 8 years ago

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

suprfnk• 8 years ago

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

federicoponzi• 8 years ago

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

gcb0• 8 years ago

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?

GoCity – Code City metaphor for visualizing Go source code

Related Stories