A stacked bipartite graph visualization and traversal UX
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'd like a Javascript+CSS graph visualization and graph browser/traversal UX.

My base bounty is only $25, but I do plan to tip the winner more than $200 (if allowed) for a
good/compelling solution. I'm seeking a result worthy of that value.

The solution need not be a complete implementation, but I would like to see enough of the design implemented to prove (or disprove) the concept and to prove that a compelling version of it can be implemented in HTML + Javascript and CSS.

You may do this with React or whatever is your favorite client-side tool. Whatever
you are comfortable with is fine as long as the solution is basically
Javascript+HTML+CSS.

To make this long textual description a bit easier to understand, I'm linking to an image that characterizs the data model described here. My image hints at some of the components of one possible solution, but feel free to think creatively based on the description below. (To save yourself time, if you are uncertain that I'll value the direction that you have in mind, please do contact me for feedback.)

Something that simply implements what is in this image is not sufficient because that image is ugly, static, and does not deal with the complexities of rendering sections of an arbitrarily large recursive data structure in a limited visual space. See other requirements below.

Here's that link: http://zwork11.zwpost.com/www11/Bountify.ABGraphModel.png

Also see the link to a more visually appealing rendering lower in this description.

The graph to be browsed consists of "A" nodes and "B" nodes.

"A" nodes have 1, 2 or (very rarely) 3 outgoing edges to child "B" nodes below.

B nodes have tend to have zero to eight outgoing edges to child "A" nodes below them. That number of outgoing edges can be as high as 100, but generally there will be zero to eight child nodes. At least 4 should be able to fit on the screen without scrolling. If there are child nodes than can fit on the screen, it is valuable to have some sort of "more" interface for pointing out that there is more and suggesting how to see those. That "how" might be as simple as scrolling to the right or left to see what is off screen.

Each of the B nodes will have some text associated with it. That will tend to be about 100 - 200 characters. That text should be readable or partially readable. If only partially readable, at least 60 characters of that text should be initially visible and a trivial gesture/action by the user should render the rest of the text.

"A" nodes will not have any text associated with them. With that being said, it is important for the user to be able to visually distinguish between sibling "A" nodes. What distinguishes one "A" node from its sibling "A" node is the "B" children that each has. So... it is imporant for the children of that A node be located physically close to that A node so that the user can quickly see the text of those B nodes. (See the example link below demonstrating one way to do this.)

B nodes will tend to have zero or one incoming edges from parent "A" nodes from above but might have more. Potentially, many more. If there is more than one, the UX will primarily render one of those and provide an indicator that there are also alternative
parents that can also be explored. The solution should demonstrate how interaction with that indicator can be used to traverse up to a different set of ancestors.

"A" nodes will have exactly 1 edge coming in (from a parent B node above)

As I have mentioned, B nodes tend to have zero or one incoming edges. There can be more though. But usually if the user has recently traversed down one of those edges, there's a reasonable chance they'll want to traverse (or "pop") back up that one (rather than back to a different parent). Nevertheless, the UX should provide a way to explore those other back edges to other parents (occasionally) as well.

The edges themselves have no particular attributes. You do not need to label them as "child" edges. (I used the word "child" and "parent" here just to simplify the explanation.)

Most of the time, these graphs are directed acyclic graphs. Nevertheless loops are possible, but rare and indicate an error in how the graph was built. Extra bounty credit can be earned by providing a way to indicate the existence of a cycle, but please do not sacrefice the more common "tree" user experience to create a way to highlight errant cycles.

In the absense of cycles the graph (aka cross-linked tree) rarely is taller than 10 hops (5 x B and 5 x A). Six (3 x B and 3 x B) and four hops is more common.

What I would like to see is a user interface that allows a user to "drill down" to see children and children of children, etc by "scrolling" down through selected children. And be able to return to or visit parents by scrolling up. When scrolling up there should also be a way to visit alternate parents, but that way need not be as natural as simply scrolling up to see the (currently preferred) parent and ancestors.

There should be a view that shows just a B node (near the top of the screen) and (most of) the child B nodes below. At the edges of the view there might be user interface indicators of what one would see if one scrolled in that direction. If it seems to provide a superior ux, the this rendering should initially resist scrolling. (This resistance to scrolling will earn extra bounty credit.)

One should be able to zoom out from this view to see more than one level of the tree at once with some loss of detail. Ex. One might not be able to read the text within the B nodes when zoomed out. If zoomed out sufficiently, the user interface to visit alternate parents might also disappear.

I've spoken here of parents being above children, but if you decide it results in a better solution, it is equally good for the graph to be rotated so that parents are on the left and children to the right. This might help with the fact that the text is probably most naturally read from left-to-right and require a wide box for the B nodes.

This user interface should be visually appealing.

It should be possible to render it on a typical 2018-vintage mobile phone screen oriented in the direction of your (not the user's) choice.

It's behavior on a laptop browser should also be reasonable but need not be as good as the phone experience.

I'll provide another sample here:
http://zwork11.zwpost.com/www11/Bountify.MockViz2.png

This is sufficiently visually appealing but it lacks a lot of the details above.
- It is static.

- It does not demonstrate what happens if the text is long.
- Two of the children of the top B node are not rendered and there is no visual indicator of how to view them.
- It does not demonstrate how to zoom out to see more layers of the tree/graph.
- It doesn't suggest a UX for scrolling up to alternate parents of that top B node.
- It doesn't suggest how the user would focus the drill down scroll on one particular child to avoid microscopic text and boxes in lower layers.
- etc.

BTW... the example uses arrows and they are pointed in the wrong direction. You don't need to use arrows at all.

Thanks. Please contact me if you have questions or suggestions.

J.

PostScript: Licensing

This bounty does not require that the code you use have no license restrictions on it, but I will reward 10% less if it does. Apache and MIT license are absolutely fine. What this bounty does require is that there be no known patent / intellectual property restrictions on the user interface concepts that your code demonstrates.

PostScript: distinguishing A nodes and B nodes

The solution must render A nodes and B nodes in a way that the user can quickly identify if they are looking at an A node or a B node.

PostScript: Go.js

Go.js has some very impressive capabilities. That team has clearly created solutions for a lot of interesting problems. With that being said, none of the solutions I see on their web site satisfy this bounty, out of the box.

PostScript Go.js IVRTree

The Go.js IVRTree demo is pretty nice. I will point out some shortcomings relative the requirements of this bounty

  • It does not demonstrate visual distinction between A nodes and B nodes.
  • It does not demonstrate long text for the B nodes.
  • It does not demonstrate the ability visit an alternate parent.

It does hint that use of +/- button unfolding/folding could be valuable here for managing screen space.

It does demonstrate support for scrolling right and left.

It does basically work in a mobile browser.

How many nodes you got?
gabrielsimoes 3 months ago
I have about 300k nodes but that could eventually grow to 3 gig. For the sake of this bounty, assume that all nodes in the vicinity of what is being viewed are in memory in a data structure of your choosing.
jasonnet 3 months ago
awarded to Chlegou
Tags
javascript

Crowdsource coding tasks.

1 Solution

Winning solution
Tipped

Hi there,

this is not a solution, it's a post that gives you an overview

lib1

i worked before on making a graph in a webpage, i always believed, this is something we should work with, since it's beyond html limitations.

in that project, we decided to use VizJs, which is the best choice we have made, after looking for graph libraries. here is the library links
link: http://viz-js.com/

github: https://github.com/mdaines/viz.js

As i said, vizjs is the best library, but very basic and render static svg, so we used jquery, to add actions on it.

the project wasn't easy, but we succeed making it by the end.

lib2

Also, wanted to mention GoJs, since it's the best choice for web graphs.
i think this example, is what you really looking for:

link: https://gojs.net/latest/samples/IVRtree.html

with customisation, you can get what you really want as result. it has collapse option, so you can show and hide parts, so you don't worry about UX.

the problem with GoJs is isn't free and not cheap at all! very expansive also! that's why we didn't choose it.

anyway, i wanted to help you out by mentioning libs that could help you out. reaching what you want.

you can ask me about basics, and libs, if you have selected ones, i have ideas about many of them, since i made a search to select the one i worked with.

i think having the collapse option, will help you out working on your project, so you don't fear about item numbers and positioning, otherwise, the zooming can handle that in static graph.

if you liked the gojs example i gave you, i think there is an open source library (didn't find that link in my history :-( ) that gives the same result. i could try to get that link back or make a search to find it again.

by the end, this solution isn't a solution. i just posted, here, to make it readable, hope it helps.

if you need any questions, you can email me, and we could make a webinar.

my email: nicolastsue@gmail.com

Thank you Nicholas. Your posting does reveal that I should consider what I expect in terms of licensing. I'll give it a bit more thought and post my guidance here and above. Thanks.
jasonnet 3 months ago
yes, exactly, by revealing what you exactly need, will help you to select the best choice.
Chlegou 3 months ago
thanks for the tip :) i will keep following this bounty
Chlegou 3 months ago
hi there, finally i have got free now, and i started looking for this project again. i will try to solve it under the time limit, otherwise, extend the bounty by adding $1 or $5 (will add another week plan), so i could be able to post a solution, if i didn't post before it expire.
Chlegou 3 months ago
I'm not given the opportunity to increase it by $1 or $5, just an additional $25 or $75. I'd prefer not to invest that much unless I know I'll get a solution, so I think I'll just create an identical contest with a small bounty. I'll wait an hour or two before doing that.
jasonnet 3 months ago
i'm starting now, still 4 hours to go, i will try to post before that time
Chlegou 3 months ago
There's no hurry. I've just posted a new identical bounty. There's no pressure to get it done in three hours. You can post the solution there if this one is closed out.
jasonnet 3 months ago
ok, i have got that
Chlegou 3 months ago
Chlegou. This bounty will expire soon. Can you see the new bounty? I believe it will expire in six more days.
jasonnet 2 months ago
Hi @jasonnet, yes im following the bounty status, also received your email and replied, you could reward it, I'll complete it after. Hope I can finish it today, solving that bug.
Chlegou 2 months ago