How to vertically align dagre parent nodes in cytoscape.js - cytoscape.js

I have a graph made in cytoscape.js, using the dagre extension, that looks like this:
Graph
How can I get the parent nodes to line up vertically? Since applying a separate layout to only parent nodes does not work (it applies to all nodes), I am stumped.

Unfortunately they are all poorly maintained visualization algorithms, so they don't have as many features.
I suggest you to open an issue in the algorithm repository where you explain how it can be improved.
In this case you would like to have a better aspect of the visualization.
https://github.com/cytoscape/cytoscape.js-dagre
You can also contribute to the dagre project adding this aesthetic criteria on to the graph.
At the end if you would like to have a better aspect you can apply a tweek to the graph after the layout execution.
So you can think to an algorithm for making parent nodes line up vertically and then apply in the code.
For example something you can do for having nodes nearest to their father and also a good aspect ratio you can sort nodes in the level n + 1 in the barycenter of their father in the lever n.
(let me know if I have made it clear)
I saw from the photo that you have groups, and the nodes within the group have different fathers, so if you put the nodes aligned with their fathers then you could have
Nodes that are overlapping
overlapping groups
groups with too large a width
(let me know if I have made the problem clear)
I remember you how to position nodes in cytoscape.js
cyGraph.startBatch(); // for bach the differences and apply only once at the end
// random layout. you have to use yours
cyGraph.nodes().positions(( node, i ) => {
return {
x: Math.random() * cyGraph.width(),
y: Math.random() * cyGraph.height(),
};
});
cyGraph.endBatch();

Related

Moving player on Y axis in Godot 2D

I'm new to Godot.
I'm trying to make my player move vertically just like when it's moving horizontally.
I've tried a couple of thoughts, but unfortunately, I couldn't move him the I want him to move.
I want to code my vertical movement in a similar way to my following horizontal movement code if possible:
var direction: = Vector2(
Input.get_action_strength("move_right") - Input.get_action_strength("move_left"), 0.0
)
velocity = speed * direction
velocity = move_and_slide(velocity)
And if it's not possible, how can I code it?
Once upon a time there were vectors. I'm not in the mood to make yet another Introduction to Vector Algebra or to explain How to Work With Arbitrarily Oriented Vectors. Perhaps you might be interested in Math for Game Devs.
In this case, what you need to know is that 2D Vectors have an horizontal an a vertical component (usually called x and y respectively). And you are leaving your vertical component at zero, here:
var direction: = Vector2(
Input.get_action_strength("move_right") - Input.get_action_strength("move_left"), 0.0
)
So… Er… Don't do that. You say you want it to be like the horizontal, so something like this:
var direction: = Vector2(
Input.get_action_strength("move_right") - Input.get_action_strength("move_left"),
Input.get_action_strength("move_down") - Input.get_action_strength("move_up")
)
In computer graphics the vertical component in 2D often goes downwards, due to historical reasons. There are different conventions for 3D, but that is not the issue at hand, pun intended.
The other lines you have already work with arbitrary vectors. You don't need to change them, nor repeat them.

Drawing a data relationship diagram using networkx and matplotlib

I'm trying to draw a data relationship diagram. I've modeled my input data in triples (subject, predicate, object) e.g. (app, 'consumes', entity), (app, 'masters', entity), etc
Each triple is an edge and 2 nodes. I want to color different sets of nodes in different colors as well.
I'm struggling with setting the color attribute as well as saving the graph to a png file in a size that is readable
Here's the code :
G = nx.DiGraph ()
read input data from file and process is lists of nodes and edges
......
add nodes - set diff color for each set of nodes ??
G.add_nodes_from (list(entities), node_color='yellow')
G.add_nodes_from (list(sornodes))
G.add_nodes_from (list (consumernodes))
add edges - set diff color for each set of edges (how do I do this?)
G.add_edges_from (masters)
G.add_edges_from (consumers)
G.add_edges_from (ads)
pos = nx.spring_layout(G)
nx.draw_networkx_nodes(G, pos, node_size=1700)
nx.draw_networkx_edges (G, pos, arrow=True)
nx.draw_networkx_labels (G, pos)
nx.draw_spring (G)
plt.figure(figsize=(7.195, 3.841))
fig1 = plt.gcf()
fig1.savefig ('out.png', dpi=1000)
plt.show ()
There is no image in the file. plt.show pops up the graph in a new window and another empty window is opened as well. I'm running this from a bash shell. Closing both the image windows terminates the program.
I need to be able to show sets of nodes in different colors.
I need to be able to show sets of edges in different colors
I want to be able to size the graph to a large image - does not need to fit within a monitor size
Thoughts anyone ?
draw_networkx_nodes (...) does not seem like to multiple calls with different sets of nodes and different colors for each set. It uses the last color specified for all the nodes in the graph.
The solution is to call draw_networkx_nodes once and pass a list with colors for each node and list len same as number of nodes.
# s, c and a are 3 lists of nodes
for x in s:
nodes.append(x)
nodecolor.append('r')
for x in c:
nodes.append(x)
nodecolor.append('g')
for x in a:
nodes.append(x)
nodecolor.append('y')
G.add_nodes_from(nodes)
nx.draw_networkx_nodes(G, pos, node_color=nodecolor, node_size=1700)
I'm sure I could optimize the code for creating the lists.

Looking for an efficient structure for checking which circles enclose a point

I have a large set of overlapping circles each at a random location with a specific radius.
type Circle =
struct
val x: float
val y: float
val radius: float
end
Given a new point with type
type Point =
struct
val x: float
val y: float
end
I would like to know which circles in my set enclose the new point. A linear search is trivial. I'm looking for a structure that can hold the circles and return the enclosing circles with better than O(N) for the presented point.
Ideally the structure should be fast for insertion of new circles and removal of circles as well.
I would like to implement this in F# but ideas in any language are fine.
For your information I'm looking to implement
http://takisword.wordpress.com/2009/08/13/bowyerwatson-algorithm/
but it would be an O(N^2) if I use the naive approach of scanning all circles for every new point.
If we assume that circles are distributed over some rectangle with area 1 and the average area of a circle is a then a quadtree with m levels will leave you with an area with size 1/2^m. This leaves
O(Na/2^m)
as the expected number of circles left in the remaining area.
However, we have done O(log(m)) comparisons to get to this point. This leaves the total number of comparisons as
O(log(m)) + O(N/2^m)
The second term will be constant if log(m) is proportional to N.
This suggests that a quadtree can cut things down to O(log n)
Quadtree is a structure for efficient plane search. You can use it to hold subdivision of the plane.
For example you can create quad tree with such properties:
1. Every cell of quadtree contains indices of circles, overlapping it.
2. Every cell does contain not more than K circles (for example 10) // may be broken
3. Height of tree is bounded by M (usually O(log n))
You can construct quadtree, by iterating overlapped cells, and if number of circles inside cell exceedes K, then subdivide that cell into four (if not exceeding max height). Also something should be considered in case of cell inside circles, because its subdivision is pointless.
When finding circles you should localise quadtree, then iterate through overlapping circles and find, those which contains point.
In case of sparse circle distribution search will be very efficient.
I have a bachelor thesis, where I adapted quadtree, for closest segment location, with expected time O(log n), I think similar approach could be used here
Actually you search for triangles whose circumcircles include the new point p. Thus your Delaunay triangulation is already the data structure you need: First search for the triangle t which includes p (google for 'delaunay walk'). The circumcircle of t certainly includes p. Then start from t and grow the (connected) area of triangles whose circumcircles include p.
Implementing it in a fast an reliable way is a lot of work. Unless you want to create a new library you may want to use an existing one. My approach for C++ is Fade2D [1] but there are also many others, it depends on your specific needs.
[1] http://www.geom.at/fade2d/html/

D3 tree with predefined depths

I want to create tree with predefined depths with D3.
Is there a way to set depth before tree is generated?
It depends on your definition of “tree”. D3 has several hierarchy layouts, of which d3.layout.tree is one. The tree layout refers to Reingold–Tilford’s tidy tree layout algorithm. This particular algorithm is not conducive to customizing the depth of nodes because it assumes that all siblings are the same depth (so that it can place the nodes tidily).
The d3.layout.cluster, in contrast, can be easily modified to render nodes at custom depths. Simply ignore the generated d.y coordinate and substitute your own depth value (probably in conjunction with a linear scale to map from data to pixels). For an example of this technique, see Ken-ichi Ueda’s right-angle phylograms.

Search optimization problem

Suppose you have a list of 2D points with an orientation assigned to them. Let the set S be defined as:
S={ (x,y,a) | (x,y) is a 2D point, a is an orientation (an angle) }.
Given an element s of S, we will indicate with s_p the point part and with s_a the angle part. I would like to know if there exist an efficient data structure such that, given a query point q, is able to return all the elements s in S such that
(dist(q_p, s_p) < threshold_1) AND (angle_diff(q_a, s_a) < threshold_2) (1)
where dist(p1,p2), with p1,p2 2D points, is the euclidean distance, and angle_diff(a1,a2), with a1,a2 angles, is the difference between angles (taken to be the smallest one). The data structure should be efficient w.r.t. insertion/deletion of elements and the search as defined above. The number of vectors can grow up to 10.000 and more, but take this with a grain of salt.
Now suppose to change the above requirement: instead of using the condition (1), let's request all the elements of S such that, given a distance function d, we want all elements of S such that d(q,s) < threshold. If i remember well, this last setup is called range-search. I don't know if the first case can be transformed in the second.
For the distance search I believe the accepted best method is a Binary Space Partition tree. This can be stored as a series of bits. Each two bits (for a 2D tree) or three bits (for a 3D tree) subdivides the space one more level, increasing resolution.
Using a BSP, locating a set of objects to compare distances with is pretty easy. Just find the smallest set of squares or cubes which contain the edges of your distance box.
For the angle, I don't know of anything. I suppose that you could store each object in a second list or tree sorted by its angle. Then you would find every object at the proper distance using the BSP, every object at the proper angles using the angle tree, then do a set intersection.
You have effectively described a "three dimensional cyclindrical space", ie. a space that is locally three dimensional but where one dimension is topologically cyclic. In other words, it is locally flat and may be modeled as the boundary of a four-dimensional object C4 in (x, y, z, w) defined by
z^2 + w^2 = 1
where
a = arctan(w/z)
With this model, the space defined by your constraints is a 2-dimensional cylinder wrapped "lengthwise" around a cross section wedge, where the wedge wraps around the 4-d cylindrical space with an angle of 2 * threshold_2. This can be modeled using a "modified k-d tree" approach (modified 3-d tree), where the data structure is not a tree but actually a graph (it has cycles). You can still partition this space into cells with hyperplane separation, but traveling along the curve defined by (z, w) in the positive direction may encounter a point encountered in the negative direction. The tree should be modified to actually lead to these nodes from both directions, so that the edges are bidirectional (in the z-w curve direction - the others are obviously still unidirectional).
These cycles do not change the effectiveness of the data structure in locating nearby points or allowing your constraint search. In fact, for the most part, those algorithms are only slightly modified (the simplest approach being to hold a visited node data structure to prevent cycles in the search - you test the next neighbors about to be searched).
This will work especially well for your criteria, since the region you define is effectively bounded by these axis-defined hyperplane-bounded cells of a k-d tree, and so the search termination will leave a region on average populated around pi / 4 percent of the area.