GoCity – Code City metaphor for visualizing Go source code(go-city.github.io)

210 pointsby eqcho8 tahun yang lalu35 comments

go-city.github.io

GoCity – Code City metaphor for visualizing Go source code

https://go-city.github.io

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

olex8 tahun yang lalu

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.

ThePhysicist8 tahun yang lalu

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

auto8 tahun yang lalu

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

ThePhysicist8 tahun yang lalu

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.

olex8 tahun yang lalu

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.

jonahx8 tahun yang lalu

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

ThePhysicist8 tahun yang lalu

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.

fulafel8 tahun yang lalu

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?

spc4768 tahun yang lalu

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

https://benfry.com/distellamap/

quietbritishjim8 tahun yang lalu

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/

cesarb8 tahun yang lalu

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

quietbritishjim8 tahun yang lalu

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!

pault8 tahun yang lalu

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

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

dilap8 tahun yang lalu

On the mac there is DaisyDisk

cesarb8 tahun yang lalu

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

jaytaylor8 tahun yang lalu

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

regnerba8 tahun yang lalu

Haha that crashes chrome on my pixel 2.

zeeZ8 tahun yang lalu

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.

[deleted]8 tahun yang lalu

crawshaw8 tahun yang lalu

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

djhworld8 tahun yang lalu

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

VoidWhisperer8 tahun yang lalu

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.

roskilli8 tahun yang lalu

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

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

weberc28 tahun yang lalu

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

shurcooL8 tahun yang lalu

How does github.com/upspin/upspin compare?

weberc28 tahun yang lalu

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!

mitchtbaum8 tahun yang lalu

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?

Waterluvian8 tahun yang lalu

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.

danbruc8 tahun yang lalu

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

jejones31418 tahun yang lalu

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

suprfnk8 tahun yang lalu

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

federicoponzi8 tahun yang lalu

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

napsterbr8 tahun yang lalu

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

gcb08 tahun yang lalu

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?

subcosmos8 tahun yang lalu

Door Locks! Ellie, boot up the door locks!