tgdwyer / WebCola

Javascript constraint-based graph layout
http://marvl.infotech.monash.edu/webcola/
MIT License
2.01k stars 257 forks source link

QUESTION: Example of user-specified distance measures? #204

Open owendall opened 7 years ago

owendall commented 7 years ago

I am a noob trying to get up to speed quickly...

I have normalized document-to-document distance (0 -1 ) measures attached.
document-distance-measures.csv.zip

I see code for _distanceMatrix, but not sure exactly the best practice for specifying this in code, or the proper JSON for adding a distance to each link:

    var cy = window.cy = cytoscape({
                    container: document.getElementById('cy'),

                    layout: {
                        name: 'cola'
                    },

                    style: [
                        {
                            selector: 'node',
                            css: {
                                'content': 'data(name)'
                            }
                        },

                        {
                            selector: 'edge',
                            css: {
                                'target-arrow-shape': 'triangle'
                            }
                        }
                    ],

                    elements: {
                        nodes: [
                            { data: { id: 'j', name: 'Jerry' } },
                            { data: { id: 'e', name: 'Elaine' } },
                            { data: { id: 'k', name: 'Kramer' } },
                            { data: { id: 'g', name: 'George' } }
                        ],
                        edges: [
                            { data: { source: 'j', target: 'e' } },
                            { data: { source: 'j', target: 'k' } },
                            { data: { source: 'j', target: 'g' } },
                            { data: { source: 'e', target: 'j' } },
                            { data: { source: 'e', target: 'k' } },
                            { data: { source: 'k', target: 'j' } },
                            { data: { source: 'k', target: 'e' } },
                            { data: { source: 'k', target: 'g' } },
                            { data: { source: 'g', target: 'j' } }
                        ]
                    },
                });
owendall commented 7 years ago

So, my intuition would be to add a distance to each edge:

{ data: { source: 'j', target: 'e' , distance: 55}}
owendall commented 7 years ago

I tried using cytoscape's "weight" attribute, but that didn't seem to work. I must be missing something fundamental...

owendall commented 7 years ago

Still looking:

http://stackoverflow.com/questions/41403247/how-to-specify-link-distance-between-nodes-in-cytoscape-js

owendall commented 7 years ago

How to use a function to make the layout use our pre-calculated weights?

image

owendall commented 7 years ago

some sort of map() function for supplying the values to each link?

owendall commented 7 years ago

OK, trying to grok how to apply a function into the layout that will work:

image

tgdwyer commented 7 years ago

Sorry I missed this query earlier... here is an example using a distance matrix

Does that help?

owendall commented 7 years ago

Thanks much...will check it out!

owendall commented 7 years ago

@tgdwyer Tim, would you mind letting me know If I have the correct understanding on this chart? Might help another Noob like me:

image

owendall commented 7 years ago

IMHO it would be much easier to include the distance in the edge attributes:

{ data: { source: 'j', target: 'e', distance; 3 } }

Like D3...(which uses "value" instead of "distance"