Wiki source code of JSON Graph Format

Version 10.1 by uru on 2014/02/04 07:00
Show last authors
1 {{layout}}
2 {{layout-section ac:type="single"}}
3 {{layout-cell}}
4 = The JSON Graph Format =
5
6 JSON (JavaScript Object Notation) is an open standard format that is widely used and accepted as interchange format on the web. JSON consists of arbitrary key-value pairs. We specify some conventions to represent a graph within this format.
7
8 (% style="color: rgb(51,51,51);" %)The JSON graph format comprises of four basic elements - //Nodes, Ports, Labels, and Edges//.
9
10 * Each element has an '**id**' that identifies it uniquely.
11 * The first three elements can hold a **position** and **dimension**.
12 * Edges on the contrary can hold **bend points** specifying where the edge changes direction.
13 * Nodes can contain **child nodes** and hold **ports** that specify attachment points of edges.
14 * Multiple edges can be attached to the same port, the port is attached to the node itself.
15 * All elements can hold **labels** (despite the label itself).
16 * All elements can hold **properties** which represent additional information to the layout algorithm.
17
18 == Examples ==
19
20 (% style="color: rgb(51,51,51);" %)Below are some example graphs in the JSON graph format. You can hop to the (%%)[[Live>>url:http://localhost:9444/Live.html||style="text-decoration: none;" shape="rect"]](% style="color: rgb(51,51,51);" %) section of our web service and try them! If you use SVG as output format the graph will be rendered as an SVG image directly within your browser.
21 {{/layout-cell}}
22 {{/layout-section}}
23
24 {{layout-section ac:type="two_right_sidebar"}}
25 {{layout-cell}}
26 === Minimal ===
27
28 (% style="color: rgb(0,0,0);" %) (%%)The following example shows a very simple graph consisting of two nodes connected by one edge. Each node owns a //width// and //height// as well as a //label//.
29
30 {{code title="Small graph with one edge" language="js" collapse="true"}}
31 {
32 id: "root", // root node
33 children: [{
34 id: "n1", // node n1
35 labels: [ { text: "n1" } ],
36 width: 100,
37 height: 100,
38 },{
39 id: "n2", // node n2
40 labels: [ { text: "n2" } ],
41 width: 100,
42 height: 50
43 }],
44 edges: [{
45 id: "e1", // edge n1 -> n2
46 source: "n1",
47 target: "n2"
48 }]
49 }
50 {{/code}}
51 {{/layout-cell}}
52
53 {{layout-cell}}
54
55
56
57
58
59
60 [[image:attach:minimal.png]]
61 {{/layout-cell}}
62 {{/layout-section}}
63
64 {{layout-section ac:type="two_right_sidebar"}}
65 {{layout-cell}}
66 === (% style="color: rgb(0,0,0);" %)Hierarchy and Ports(%%) ===
67
68 This example illustrates nesting of nodes to establish hierarchy. The node {{code language="none"}}n2{{/code}} serves as parent node for nodes {{code language="none"}}n3{{/code}} and {{code language="none"}}n4{{/code}}. The latter two nodes are connected via edge {{code language="none"}}e2{{/code}}. Furthermore, edge {{code language="none"}}e1{{/code}} is connected to port {{code language="none"}}n2_p1{{/code}} of node {{code language="none"}}n2{{/code}}.
69
70 {{code title="Small graph with a port and hierarchy" language="js" collapse="true"}}
71 {
72 id: "root",
73 children: [{
74 id: "n1",
75 labels: [ { text: "n1" } ],
76 width: 100,
77 height: 100
78 },{
79 id: "n2",
80 labels: [ { text: "n2" } ],
81 width: 100,
82 height: 50,
83 ports: [{
84 id: "n2_p1",
85 width: 10,
86 height: 10
87 }],
88 children: [{
89 id: "n3",
90 labels: [ { text: "n3" } ],
91 width: 40,
92 height: 40
93 },{
94 id: "n4",
95 labels: [ { text: "n4" } ],
96 width: 40,
97 height: 40}
98 ],
99 edges: [{
100 id: "e4",
101 source: "n3",
102 target: "n4"
103 }]
104 }],
105 edges: [{
106 id: "e1",
107 labels: [ { text: "e1" } ],
108 source: "n1",
109 target: "n2",
110 targetPort: "n2_p1"
111 }]
112 }
113 {{/code}}
114 {{/layout-cell}}
115
116 {{layout-cell}}
117 (% style="text-align: left;" %)
118
119
120 (% style="text-align: left;" %)
121
122
123 (% style="text-align: left;" %)
124
125
126 (% style="text-align: left;" %)
127 [[image:attach:hierarchyAndPort.png]]
128 {{/layout-cell}}
129 {{/layout-section}}
130
131 {{layout-section ac:type="two_right_sidebar"}}
132 {{layout-cell}}
133 === Element Properties ===
134
135 All graph elements can hold further //properties// that specify certain behavior. In the example below, the both nodes have //FIXED_SIDE// {{code language="none"}}portConstraints{{/code}}, indicating that the ports may also be moved on their respective side. The side of each port is specified using the {{code language="none"}}portSide{{/code}} property.
136
137 Note that properties might be coupled with a certain layout algorithm and hence are not always available. The two properties used in this example are only available for our[[ Klay Layered>>doc:KLay Layered]] algorithm.
138
139 {{code title="Port Constraints and Port Sides" language="js" collapse="true"}}
140 {
141 id: "root", // root node
142 children: [{
143 id: "n1", // node n1
144 labels: [ { text: "n1" } ],
145 // node n1 has fixed port constraints
146 properties: {"de.cau.cs.kieler.portConstraints": "FIXED_SIDE"},
147 width: 100,
148 height: 100,
149 ports: [{
150 id: "p1",
151 width: 10,
152 height: 10,
153 // port p1 should be located on the north side
154 properties: {"de.cau.cs.kieler.portSide": "NORTH"}
155 }]
156 },{
157 id: "n2", // node n2
158 labels: [ { text: "n2" } ],
159 properties: {"de.cau.cs.kieler.portConstraints": "FIXED_SIDE"},
160 width: 100,
161 height: 50,
162 ports: [{
163 id: "p2",
164 width: 10,
165 height: 10,
166 properties: {"de.cau.cs.kieler.portSide": "SOUTH"}
167 }]
168 }],
169 // children end
170 edges: [{
171 id: "e1", // edge n1 -> n2
172 source: "n1",
173 target: "n2",
174 sourcePort: "p1", // p1 -> p2
175 targetPort: "p2"
176 }]
177 }
178 {{/code}}
179 {{/layout-cell}}
180
181 {{layout-cell}}
182
183
184
185
186
187
188
189
190 [[image:attach:properties.png]]
191 {{/layout-cell}}
192 {{/layout-section}}
193 {{/layout}}

Navigation

Quick Links

KIELER on GitHub
RTSYS Homepage