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
+51-51Lines changed: 51 additions & 51 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -54,98 +54,98 @@ let graph = new ElGrapho({
54
54
1, 4,
55
55
2, 5,
56
56
2, 6
57
-
]
58
-
},
59
-
60
-
width: 800,
61
-
height: 400
57
+
],
58
+
width: 800,
59
+
height: 400
60
+
}
62
61
});
63
62
```
64
63
65
64
*```container``` - DOM element that will contain the El Grapho graph.
66
65
67
-
*```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. For example, 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.
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.
68
67
69
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.
70
69
71
-
*```width``` - number that defines the width of the El Grapho viewport in pixels.
70
+
*```model.width``` - number that defines the width of the El Grapho viewport in pixels.
72
71
73
-
*```height``` - number defines the height of the El Grapho viewport in pixels.
74
-
75
-
*```magicZoom``` - boolean that defines the zoom strategy. When magicZoom is true, zooming does not affect the size of nodes and edges. When magicZoom is false, zooming does affect the size of nodes and edges, i.e. equivalent to moving the camera in the z direction in real space. The default is true.
72
+
*```model.height``` - number defines the height of the El Grapho viewport in pixels.
76
73
77
74
*```animations``` - boolean that defines animation strategy. When animations is true, zoom and pan transitions will be animated. Otherwise the transitions will be immediate. Although animations utilize requestAnimationFrame for dynamic frame rates, in some situations you may prefer to set animations to false to improve transition performance for very high cardinality graphs with millions of nodes and edges. The default is true.
78
75
76
+
*```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
+
79
78
### Models
80
79
81
-
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 and edge relationships 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``` and ```Cluster```
82
81
83
82
#### Tree Model
84
83
85
84
```
86
-
let rootNode = {
87
-
children: [
88
-
{
89
-
children: [
90
-
{},
91
-
{}
92
-
]
93
-
},
94
-
{
95
-
children: [
96
-
{},
97
-
{}
98
-
]
99
-
}
100
-
]
85
+
let modelConfig = {
86
+
nodes: {
87
+
colors: [0, 1, 1, 2, 2, 3, 3]
88
+
},
89
+
edges: [
90
+
0, 1,
91
+
0, 2,
92
+
1, 3,
93
+
1, 4,
94
+
2, 5,
95
+
2, 6
96
+
],
97
+
width: 800,
98
+
height: 400
101
99
};
102
100
103
101
let graph = new ElGrapho({
104
102
container: document.getElementById('container'),
105
-
model: ElGrapho.models.Tree({
106
-
rootNode: rootNode
107
-
}),
108
-
width: 800,
109
-
height: 400
103
+
model: ElGrapho.models.Tree(modelConfig)
110
104
});
111
105
```
112
106
113
-
The ```Tree``` model takes in a nested tree structure and builds the nodes and edges for you. 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.
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.
114
108
115
109
#### Cluster Model
116
110
117
111
```
118
-
let graph = new ElGrapho({
119
-
container: document.getElementById('container'),
120
-
model: ElGrapho.models.Cluster({
121
-
nodes: {
122
-
colors: [0, 1, 1, 2, 2, 2, 2, 2]
123
-
},
124
-
edges: [
125
-
0, 1,
126
-
0, 2,
127
-
0, 3,
128
-
0, 4,
129
-
0, 5,
130
-
0, 6,
131
-
0, 7,
132
-
0, 8
133
-
]
134
-
}),
112
+
let modelConfig = {
113
+
nodes: {
114
+
colors: [0, 1, 1, 2, 2, 2, 2, 2]
115
+
},
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
+
],
135
126
width: 800,
136
127
height: 400
128
+
};
129
+
130
+
let graph = new ElGrapho({
131
+
container: document.getElementById('container'),
132
+
model: ElGrapho.models.Cluster(modelConfig)
137
133
});
138
134
```
139
135
140
-
The ```Cluster``` model takes in an array of colors, and an array of edges. The config is identical to the raw ```model``` schema except that the ```xs``` and ```ys``` are generated for you. 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.
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.
137
+
138
+
### Model Polymorphism
139
+
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!
141
141
142
142
## Server Side Model Generation
143
143
144
144
Because the El Grapho models are fully decoupled from the rendering engine itself, they can be executed on the client or on the server, depending on your needs. For really complex models, it may be best to build the model on the server side and then deliver the output over http to the browser, and passed directly into the El Grapho config.
145
145
146
146
## Controls
147
147
148
-
El Grapho has controls in the upper right corner of the visualization that enable users to navigate large and complex graphs. There are three modes:
148
+
El Grapho has controls in the upper right corner of the visualization that enable users to navigate large and complex graphs. These controls appear when you mouseover the visualizztion. There are three modes:
149
149
150
150
*__select__ - use this mode to select nodes
151
151
*__zoom__ - use this mode to draw zoom boxes around areas of interest or to zoom into a particular region of the graph
0 commit comments