Multiple colored lines for relationship visualization

[itsalexschwartz]

Hey Nate! Thanks for kicking off this project :)

I have a specific request / use case of being able to visualize relationships where multiple people have multiple types of connections to one another..

The idea would be to draw multiple colored lines that lie next to one another to represent the various types of links, with multiple link types able to be defined.

Here's the note:

Here's my intended outcome (mockup):

Thoughts? The text labels end up actually being mostly unnecessary if one can display a legend of line colors in the corner of the graph. And of course being able to define multiple links in-line like Partner&Friend::Ali would be nice for ease of defining but not necessary to get the basics running.

Buying you a coffee for your time to think on this :P

[natefrisch01]

Hey @itsalexschwartz thanks for the coffee! This is definitely something we can implement - the hardest thing will be making a UI for choosing colors associated with each tag. Perhaps a default color with for each tag could be generated, and then customized in the UI and colors/tags could be turn on/off as well.

[itsalexschwartz]

Glad to hear it doesn't sound outlandish to pull off.

And yeah a default color per tag sounds great. Customizing the colors for each tag seems like a wonderful thing to be able to define but not needed for min-spec so long as colors stayed consistent and were visually distinguishable.

[natefrisch01]

Totally true. I'll plan on trying to add this min-spec in a near future release.

[itsalexschwartz]

juggl allows for something close with their Link Types and CSS styling (seen here)

The issue is they dont support multiple different links between two nodes. You mention the hardest thing would be to make a UI for choosing colors -- my uninformed guess is that the difficulty lies in rendering two or more link lines next to one another in the graph. Thoughts?

[natefrisch01]

I don't anticipate it being too much of an issue. With multiple links, there is already slightly different logic handling how the text is drawn, so fingers crossed I can just use the same logic when drawing the links. (forgive the lack of error handling in the else, lol)

From:
linkManager.createTextForLink

        if (pairStatus === LinkPair.None) {

        } else if (pairStatus === LinkPair.First) {
            linkString = linkString + "\n\n";
        } else if (pairStatus === LinkPair.Second) {
            linkString = "\n\n" + linkString;
        } else {

        }

[natefrisch01]

I have a rough version up on the latest release. You have to enable it in the settings tab, under Community Plugins: Graph Link Types. I have found a lot of ways to break it, but with a little refinement I think it will be quite useful. Let me know what you all think!

[natefrisch01]

[itsalexschwartz]

oh my!! This is incredible! I'm about to go test it out :) Great work Nate!

[itsalexschwartz]

This is working perfectly for my needs. A++. And the legend works beautifully!

Based on what I'm using this for, the next thing I'd need is the ability for two nodes to be able to define more than 2 tagged links between one another so I can draw 3+ lines between two nodes.