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
+67-33Lines changed: 67 additions & 33 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -47,14 +47,10 @@ let graph = new ElGrapho({
47
47
ys: [0.6, 0, 0, -0.6, -0.6, -0.6, -0.6],
48
48
colors: [0, 1, 1, 2, 2, 2, 2]
49
49
},
50
-
edges: [
51
-
0, 1,
52
-
0, 2,
53
-
1, 3,
54
-
1, 4,
55
-
2, 5,
56
-
2, 6
57
-
],
50
+
edges: {
51
+
from: [0, 0, 1, 1, 2, 2],
52
+
to: [1, 2, 3, 4, 5, 6]
53
+
},
58
54
width: 800,
59
55
height: 400
60
56
}
@@ -63,9 +59,9 @@ let graph = new ElGrapho({
63
59
64
60
*```container``` - DOM element that will contain the El Grapho graph.
65
61
66
-
*```model.nodes``` - object that contains information about all of the nodes in the graph (graphs are made up of nodes and edges). Each node is defined by a position (x and y), and also a color. El Grapho x and y ranges are between -1 and 1. If x is -1, then the node position is on the very left of the viewport. If x is 0 it is in the center. And if x is 1 it is on the very right of the viewport. Colors are integer values between 0 and 7. These integer values map to the El Grapho color palette.
62
+
*```model.nodes``` - object that defines the nodes in the graph (graphs are made up of nodes and edges). Each node is defined by a position (x and y), and also a color. El Grapho x and y ranges are between -1 and 1. If x is -1, then the node position is on the very left of the viewport. If x is 0 it is in the center. And if x is 1 it is on the very right of the viewport. Colors are integer values between 0 and 7. These integer values map to the El Grapho color palette.
67
63
68
-
*```model.edges``` - array that defines the edges between nodes based on their indices. In the example above, the first edge begins at node ```0``` and ends at node ```1```. For non directed graphs, or bi-directional graphs, the order of the first node and second node do not matter. However, for directed graphs, the first index is the *from* node, and the second index is the *to* node.
64
+
*```model.edges``` - object that defines the edges between nodes based on their indices. Each edge is defined by a from-node-index and a to-node-index. In the example above, the first edge begins at node ```0``` and ends at node ```1```. For non directed graphs, or bi-directional graphs, ```from```and ```to``` are interchangeable.
69
65
70
66
*```model.width``` - number that defines the width of the El Grapho viewport in pixels.
71
67
@@ -75,9 +71,13 @@ let graph = new ElGrapho({
75
71
76
72
*```debug``` - boolean that can be used to enable debug mode. Debug mode will show the node and edge count in the bottom right corner of the visualization. The default is false.
77
73
74
+
*```arrows``` - boolean that enables or disables edge arrows. For non directed or bi-directional graphs, you should set ```arrows``` to ```false```. The default is true.
75
+
76
+
*```labels``` - array of strings used to define labels for each node. If your visualization has 100 nodes, there should be 100 strings in the ```labels``` array. The default is an empty array which results in no labels.
77
+
78
78
### Models
79
79
80
-
Determining the positions of the nodes for your graph can be alot of work! While it's nice to have the power to construct custom graph shapes, most El Grapho users will want to leverage the provided El Grapho models which will generate node positions for you. Currently, ElGrapho supports ```Tree``` and```Cluster```
80
+
Determining the positions of the nodes for your graph can be alot of work! While it's nice to have the power to construct custom graph shapes, most El Grapho users will want to leverage the provided El Grapho models which will generate node positions for you. Currently, ElGrapho supports ```Tree```, ```Ring```,```Cluster```, and ```ForceDirectedGraph```
81
81
82
82
#### Tree Model
83
83
@@ -86,14 +86,10 @@ let modelConfig = {
86
86
nodes: {
87
87
colors: [0, 1, 1, 2, 2, 3, 3]
88
88
},
89
-
edges: [
90
-
0, 1,
91
-
0, 2,
92
-
1, 3,
93
-
1, 4,
94
-
2, 5,
95
-
2, 6
96
-
],
89
+
edges: {
90
+
from: [0, 0, 1, 1, 2, 2],
91
+
to: [1, 2, 3, 4, 5, 6]
92
+
},
97
93
width: 800,
98
94
height: 400
99
95
};
@@ -104,7 +100,26 @@ let graph = new ElGrapho({
104
100
});
105
101
```
106
102
107
-
The ```Tree``` model takes in a nested tree structure and calculates the node positions for you by adding ```xs``` and ```ys``` to the ```nodes``` object. In this example, the root node has two children, and each of those children have two children of their own. In other words, this is a simple binary tree with two levels.
103
+
#### Ring Model
104
+
105
+
```
106
+
let modelConfig = {
107
+
nodes: {
108
+
colors: [0, 1, 1, 2, 2, 3, 3]
109
+
},
110
+
edges: {
111
+
from: [0, 0, 1, 1, 2, 2],
112
+
to: [1, 2, 3, 4, 5, 6]
113
+
},
114
+
width: 800,
115
+
height: 400
116
+
};
117
+
118
+
let graph = new ElGrapho({
119
+
container: document.getElementById('container'),
120
+
model: ElGrapho.models.Ring(modelConfig)
121
+
});
122
+
```
108
123
109
124
#### Cluster Model
110
125
@@ -113,16 +128,10 @@ let modelConfig = {
113
128
nodes: {
114
129
colors: [0, 1, 1, 2, 2, 2, 2, 2]
115
130
},
116
-
edges: [
117
-
0, 1,
118
-
0, 2,
119
-
0, 3,
120
-
0, 4,
121
-
0, 5,
122
-
0, 6,
123
-
0, 7,
124
-
0, 8
125
-
],
131
+
edges: {
132
+
from: [0, 0, 0, 0, 0, 0, 0, 0],
133
+
to: [1, 2, 3, 4, 5, 6, 7, 8]
134
+
},
126
135
width: 800,
127
136
height: 400
128
137
};
@@ -133,11 +142,36 @@ let graph = new ElGrapho({
133
142
});
134
143
```
135
144
136
-
The ```Cluster``` model takes in an array of colors, and an array of edges. If a single color is used for all of the nodes, ElGrapho will generate a single centered cluster. If there are several colors used, ElGrapho will render distinct clusters. Because Cluster models can be generated in ```O(n)``` time, i.e. linear time, they are very fast to construct compared to other models such as force directed graphs which are polynomial in time.
145
+
The Cluster model clusters nodes by color. If a single color is used for all of the nodes, ElGrapho will generate a single centered cluster. If there are several colors used, ElGrapho will render distinct clusters. Because Cluster models can be generated in ```O(n)``` time, i.e. linear time, they are very fast to construct compared to other models such as force directed graphs which are polynomial in time.
The ```ForceDirectedGraph``` uses a physics simulator to repel and attract nodes in order to generate natural layouts. Be warned that force directed graphs take O(n^2) time, which means they may not be appropriate for generating models on the client with lots of nodes. If it's possible to build your models in advance, it's a good idea to build the force directed graph model on the server and then cache it. If you require your models to be constructed at execution time, and the number of nodes is very high, you may consider using an O(n) model such as ```Cluster```
169
+
170
+
The ```ForceDirectedGraph``` model accepts a ```steps``` property from the modelConfig which can be used to define the accuracy of the result. This is because force directed graphs require multiple passes to obtain the final result. The default is 10. Lowering this number will result in faster model construction but less accurate results. Increasing this number will result in slower model construction but more accurate results.
137
171
138
-
###Model Polymorphism
172
+
## Model Polymorphism
139
173
140
-
You may have noticed that the model config schema is identical for ```Tree``` and ```Cluster```. In fact, all El Grapho models have the exact same schema. Thus, El Grapho visualizations are polymorphic, meaning you can pass the same data structure into different models and get different, but correct, graph visualizations. Pretty cool!
174
+
You may have noticed that the model config schema is identical for all models. As a result, El Grapho visualizations are polymorphic, meaning you can pass the same data structure into different models and get different graph visualizations. Pretty cool!
0 commit comments