Search code examples
gitgithubgraphvisualization

How to get the full github.com visualization of the /network of a repo

EDIT: This is supposed to be a gift for my mother, if I have to I'll drag and drop it and stitch a bunch of screen-prints together... however the resource has to live on the website somewhere. I do believe that at least someone on this site knows how to do this.

EDIT: So I dug around on this some more and found that if you put /meta after network you get a JSON. Also /chunk was in the page source, but after loading /chunk neither /chunk or /meta are loading for me anymore. I just want the entire graph in one picture, is that too much to ask?

Adding /network to the end of a repo URL in GitHub gets me an image something like this

enter image description here

You can click and drag it side to side, but for the life of me I have not been able to get more than a small segment to show at one time.

Is there any tool to generate the entire network graph in one image file?

I don't want a chunk of the graph, I want to view the entire graph. I saw http://gitup.co/ mentioned in another question, but it appears to be OS X only. A Linux or a Microsoft solution would work for me.

Solution

  • I just had this problem (again), and finally was able to find a decent solution.

    Here is the gist with the code below: https://gist.github.com/DinisCruz/6866dede5cdff60d97790a14490f7844

    function hide(selector) { $(selector).setAttribute('style','display:none')} 
function remove(selector) { $(selector).remove()} 
function remove_class(selector) { $(selector).setAttribute('class','')} 

function move_left(count)
{        
    var eventObj = document.createEvent("Events");
    eventObj.initEvent("keydown", true, true);
    eventObj.which = 37;  // left key
    for (i=0; i < count ; i++) {
        document.dispatchEvent(eventObj);
    }
} 

function resize_canvas(width)
{
    document.getElementById("network").style="width:" + width; window.dispatchEvent(new Event("resize"))
}


remove('.pagehead')
remove('.js-header-wrapper')
remove('.menu')
remove('.Subhead')
remove('.info')
remove('.btn-link')
remove('.footer')
remove_class('.container-lg')
// Note: they updated this class name from .p4-4 to .pb-4
remove_class('.pb-4')

resize_canvas('2150px')
move_left(14)

    Related twitter thread (shows some examples): https://twitter.com/DinisCruz/status/1171411025570275329