You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+58-28
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,8 @@
1
1
# graph2d
2
-
2D based interactive network graph engine
2
+
Physics based network graph engine. Used for interactive graph exploration and morphing.
3
3
4
-
Note : Implementation not started, the project is in requirements collection phase
4
+
## concept introduction
5
+
A graph database can have thousands of vertices and edges. This engine is not intended for rendering a high number of vertices that would look like a cloud. It is rather targetting the user analysis of vertices containing readable labels. So even if a graph contains a high number of vertices, it is possible to start at an initial entry point, and start showing the required neighbors only. At each step, the user can pin the interesting vertex and continue the explration of the required path like a mind map opening process. It is also possible to decide of which vertex parameter is turned into a clusturing group, this way morphing the graph visibility to focus on the features the user is interested in.
* configurable dat.gui with persistance (custom weak)
47
+
* custom forces for horizontality adjustment of vertices
48
+
49
+
## implementation plan
50
+
* replace dat.gui with paper.gui
51
+
* manage persistance in a single place and remove static config / gui conflict
52
+
* change edge contraints to force field
53
+
* enhance edges drawing that would be independent from the edge constraints
54
+
* add hover effect on svg items
55
+
* add vertices context menu for graph configuration
56
+
* left click to fix, right click for config (touch, hold)
57
+
* add edges labels
40
58
59
+
## issues
60
+
* dragging nodes selects the labels text, which results on a text drag and drop on the next step. To be avoided by disallowing text selection. Issue relates to the physics engine handling the mouse events and not stopping the propagation.
41
61
42
62
# General Features
43
-
Nodes/Edges can be referred to as elements
44
63
* drag and drop to import graph files (standard .dot, custom .json)
45
-
* hover effect to highlight neighbours
46
-
* mouse drag nodes to move them
47
-
* pin unpin nodes with clicks
48
-
* right click for node-graph mapping config
64
+
* right click on vertex/edge for config and on empty for graph config
49
65
* map node properties to
50
66
* color
51
67
* size
52
68
* visibility
53
-
* swap between node-neighborhood-relation and groups (a node disappears with all its edges and becomes a clusturing group)
54
-
* group constraints
55
-
* nodes in groups attraction
56
-
* group shape forces (with fixed or free shape ratios)
57
-
* repulsion of non group members (optional for shapeless groups)
58
-
* groups can be hierarchical
59
-
* groups can intersect with nodes belonging to more than one group
60
-
* neighbors atractions beyond groups to get groups closer together
61
-
* neighbors can be a shapeles group
62
-
* element properties shall not define visualisation properties (visibility, size, color, position, groups)
63
-
* properties can map to nodes (hidden nodes)
69
+
* properties can switch to nodes
70
+
* switch property->node->group (a node disappears with all its edges and becomes a clusturing group)
71
+
* vertex or edge properties shall not define visualisation properties (visibility, size, color, position, groups)
72
+
73
+
## Vertices
74
+
* hover effect to highlight neighbours
75
+
* pin unpin vertices with clicks disables force influence
76
+
* mouse drag vertices to move them
77
+
* specific vertex config can bring neighbors closer or make them visible
78
+
79
+
## Layout
80
+
* vertices cluster themselves with neighborhood affinity
81
+
* vertices initial layout uses forces not fixed constraints
82
+
* neightbors attract with weight factor and non neighbors repulse
83
+
* inter-groups neighbors attract to bring groups closer together
84
+
85
+
## groups
86
+
* groups interact with nodes using physical contraints
87
+
* nodes in groups attraction
88
+
* nodes out of groups repulsion
89
+
* group shape forces (with fixed or free shape ratios)
90
+
* repulsion of non group members (optional for shapeless groups)
91
+
* groups can be hierarchical
92
+
* groups can intersect with nodes belonging to more than one group
93
+
94
+
## Edges
95
+
* edges do not influence the initial layout
96
+
* edges weight configurable with or without constraint and the constraint has configurable params
97
+
64
98
65
99
## Graph capabilities
66
100
* Graph is static but visibility and properties mapping are dynamic
@@ -81,25 +115,21 @@ Nodes/Edges can be referred to as elements
81
115
* properties can swap to a clustured number of nodes within a group depending on the type of the property
82
116
83
117
## Visualisation properties
84
-
### Position
85
-
* position and locality to neighbors including nodes out of properties, with or without groups
86
-
* position is controlled by
87
-
* attraction to other nodes
88
-
* repulsion out of other groups
89
-
* forces from groups shapes constraints
90
-
* pinning of nodes disables force influence
91
118
### Size and visibility
92
-
* Size and visibility can go together with an importance factor
119
+
* size of vertices to be defined with screen resolution (mobile friendly)
120
+
* size and visibility go together with an importance factor
121
+
93
122
### Labels
94
123
* label has to be contained within the node size
95
-
* label minification g othrough the short version (if available), the id or get hidden depending on node size restrictions
124
+
* label minification go through the short version (if available), the id or get hidden depending on node size restrictions
96
125
### Style and color
97
126
* node background color has to contrast the label color
98
127
* node outline can have a thickness and glow
99
128
* node shape can be rectangular, elliptic or take any svg path
100
129
101
130
# References
102
131
*[GraphSon_blueprint.json](graphs/GraphSON_blueprints.json) taken from [GraphSON Reader and Write](https://github.com/tinkerpop/blueprints/wiki/GraphSON-Reader-and-Writer-Library)
0 commit comments