The "Character Relation Diagram" Feature
06-01-2013, 06:40 AM (This post was last modified: 08-05-2014, 05:35 AM by SamZ.)
Post: #1
I was compelled to start a thread about this feature.

This feature is actually a combination of two un-related javascript libraries. The jsPlumb library used for connecting elements, and the Liviz.js library used for the positioning of these elements.

Changes were done to the Liviz.js code so that only the positioning of the elements is returned, and used for the repositioning of these elements.

You can check out how this feature looks like here:
http://lndb.info/light_novel/diagram/Akikan!
http://lndb.info/light_novel/diagram/Strawberry_Panic!

I think this might be the first time these two libraries were combined for the showing/positioning of elements in a diagram.

If anyone else finds this feature useful, I have created a GitHub repository for it, where you can download it from and use it as you like:
https://github.com/lndb/jsPlumb_Liviz.js

Any comments about this new feature, is welcomed here.
17-04-2013, 06:58 AM (This post was last modified: 08-05-2014, 05:36 AM by SamZ.)
Post: #2
I have moved to working with a different layout engine/algorithm for the placement/positioning of the characters in the relation diagram.

Please check out how the characters are organized/placed now:
http://lndb.info/light_novel/diagram/Akikan!
http://lndb.info/light_novel/diagram/Strawberry_Panic!
http://lndb.info/light_novel/diagram/Hidan_no_Aria
http://lndb.info/light_novel/diagram/Sasami-san@Ganbaranai
http://lndb.info/light_novel/diagram/Haiyore!_Nyaruko-san
http://lndb.info/light_novel/diagram/Mushi_to_Medama
http://lndb.info/light_novel/diagram/Minikui_Ahiru_no_Koi

What's being used now is the "sfdp" algorithm; a very fast algorithm that is pretty good with the removal of node (in our case character) overlaps.

Lots of work went into this, anyway, more on this tomorrow...
18-04-2013, 06:47 AM (This post was last modified: 19-04-2013, 02:47 PM by SamZ.)
Post: #3
What was used before was the dot layout engine, which isn't exactly a bad layout engine, but it does not take into consideration edges that are straight lines (not curved lines), so we might end up with situations were nodes and edges overlap. On the other hand the sfdp layout engine does take this into consideration, while it's not perfect but it does the job as best as possible.

To enable sfdp, I had to compile GraphViz to get the sfdp layout engine working, since Liviz.js only had the dot algorithm compiled, and also made small changes to the "liviz-apis" source code to run/activate the sfdp layout engine.

I have updated the github repository with the addition of the sfdp layout engine:
https://github.com/lndb/jsPlumb_Liviz.js

In any case the dot layout engine hasn't been removed at all. I can switch between these two layouts... if it turns out that it was a bad idea to switch to the sfdp layout... it's easy to switch back.
19-04-2013, 05:51 PM
Post: #4
Few changes to the node and graph parameters were done, which further improved the positions of the nodes in the diagram, and decreased the number of overlaps (now there are almost no node-edge overlaps, and no node-node overlaps with the above mentioned character relation diagrams).
04-05-2013, 01:37 AM (This post was last modified: 04-05-2013, 01:51 AM by SamZ.)
Post: #5
I have compiled and added the rest of GraphViz's layout engines: fdp, neato, twopi, and circo.

So now there are 6 layout engines available for you to pick the most suitable for your website Smile

They are now available on the github repository:
https://github.com/lndb/jsPlumb_Liviz.js
05-05-2013, 02:05 AM (This post was last modified: 05-05-2013, 02:09 AM by SamZ.)
Post: #6
The previous node and graph parameters were returned (the same sfdp layout but with the previous parameters). While there were almost no node-edge and node-node overlaps with the new parameters, but these parameters also scaled up the diagram, which meant more scrolling down and to the right was needed to see all characters and their relations, which can become tiresome at times. While with the previous parameters there were very few node-node and node-edge overlaps, but at least the diagram was highly packed... very little scrolling was needed to see all the characters and their relations. This was an enough reason to return to the previous parameters, also the characters are draggable so it won't be that hard for the user to move one/two overlaps.

If anyone has a suggestion to solve the node-node and node-edge overlaps, but at the same time to stay with a highly packed diagram (little spacing between characters), I'm open to ideas Wink
05-05-2013, 09:57 PM (This post was last modified: 08-05-2014, 05:36 AM by SamZ.)
Post: #7
Another parameter (smoothing=avg_dist) which in some cases is causing the diagram to scale up has been removed. Though it does seem to get rid of node-node and node-edge overlaps, but at the same time it scales up the diagram. I do prefer few node-node and node-edge overlaps over the scaling of the diagram.

One case of a diagram that was scaled up and its characters had a big distance between them, but after the removal of this parameter it's a highly compact diagram:
http://lndb.info/light_novel/diagram/Strawberry_Panic!

An example of a diagram that didn't have any overlaps in it, but after the removal of this paramter, there are a few overlaps:
http://lndb.info/light_novel/diagram/Mushi_to_Medama
09-05-2013, 04:45 AM
Post: #8
(05-05-2013, 09:57 PM)SamZ Wrote:  An example of a diagram that didn't have any overlaps in it, but after the removal of this paramter, there are a few overlaps:
http://lndb.info/light_novel/diagram/Mushi_to_Medama

Concerning the above character relation diagram, it seems that the overlapping between characters happens between different groups of connected nodes. In the above character relation diagram we have 4 groups of connected nodes, and the smaller three groups seem to overlap with the nodes of the biggest group of connected nodes.

I'll investigate this later on, and see if I can find a solution to it.
15-06-2013, 06:44 PM (This post was last modified: 15-06-2013, 07:12 PM by SamZ.)
Post: #9
(09-05-2013, 04:45 AM)SamZ Wrote:  
(05-05-2013, 09:57 PM)SamZ Wrote:  An example of a diagram that didn't have any overlaps in it, but after the removal of this paramter, there are a few overlaps:
http://lndb.info/light_novel/diagram/Mushi_to_Medama

Concerning the above character relation diagram, it seems that the overlapping between characters happens between different groups of connected nodes. In the above character relation diagram we have 4 groups of connected nodes, and the smaller three groups seem to overlap with the nodes of the biggest group of connected nodes.

I'll investigate this later on, and see if I can find a solution to it.

Guh... finally finally finally I was able to solve this issue >_<

The above issue was with the spacing between clusters of nodes where the spacing was pretty small between clusters which caused the overlapping of nodes between unconnected groups of nodes. In other words a group of characters connected by relations would clash/overlap with different group/s of characters that are also connected by relations.

The issue couldn't be solved by changing any parameter of graph or node since the issue lied in the GraphViz code itself where the spacing between clusters was a constant that couldn't be changed by any graph or node parameter, so to solve this issue, the cluster spacing constant, which was with a pretty small value which caused this overlap, was changed to a bigger value (it was assigned with the same value that was assigned to the spacing between nodes, so that the spacing between clusters is the same as the spacing between nodes in the same cluster, that way the graph looks great and coherent and without too much spacing between clusters).

Please clear your browser's cache, and look at the following character relation diagrams:
http://lndb.info/light_novel/diagram/Mushi_to_Medama
http://lndb.info/light_novel/diagram/Mondaiji-tachi_ga_Isekai_kara_Kuru_Sou_Desu_yo

Even with the following huge character relation diagram, the diagram looks great:
http://lndb.info/light_novel/diagram/Kyoukai_Senjou_no_Horizon

So issue solved Big Grin

Thanks goes to Mecasonic13, since without him adding so many characters and relations, I wouldn't have noticed this issue Smile
01-07-2013, 03:24 AM
Post: #10
Ok, this is going to be a tough one:
http://lndb.info/light_novel/diagram/Suzumiya_Haruhi_Series

What to do in case there are too many relations/connectors between characters? maybe in this case scaling up of the diagram would be the best solution for these type of diagrams... I'll see what can be done in this case... there might not be a perfect solution for this.


Forum Jump:


Users browsing this thread: 1 Guest(s)