Skip to Content

Wiki source code of JSON Graph Format

Version 1.1 by uru on 2013/11/27 01:32
Show last authors
1 (% style="" %)
2 = The JSON Graph Format =
3
4 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.
5
6 (% style="color: rgb(51,51,51);" %)The JSON graph format comprises of four basic elements - //Nodes, Ports, Labels, and Edges//.
7
8 (% style="" %)
9 * Each element has an 'id' that identifies it uniquely.
10 * The first three elements can hold a position and dimension.
11 * Edges on the contrary can hold bend points specifying where the edge changes direction.
12 * Nodes can contain child nodes and hold ports that specify attachment points of edges.
13 * Multiple edges can be attached to the same port, the port can be attached to the node itself.
14 * All elements can hold labels (despite the label itself).
15 * All elements can hold properties which represent additional information to the layout algorithm.
16
17 == Examples ==
18
19 (% 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.
20
21 (% style="color: rgb(51,51,51);" %)
22
23
24 (% style="color: rgb(51,51,51);" %)
25
26 {{code title="Small graph with one edge" language="js" collapse="true"}}
27 {
28 id: "root", // root node
29 children: [{
30 id: "n1", // node n1
31 labels: [ { text: "n1" } ],
32 width: 100,
33 height: 100
34 },{
35 id: "n2", // node n2
36 labels: [ { text: "n2" } ],
37 width: 100,
38 height: 50,
39 children: [{
40 id: "n3", // node n3 (child of n2)
41 labels: [ { text: "n3" } ],
42 width: 20,
43 height: 20
44 },{
45 id: "n4", // node n4 (child of n3)
46 labels: [ { text: "n4" } ],
47 width: 20,
48 height: 20}
49 ],
50 edges: [{
51 id: "e4", // edge n3 -> n4
52 source: "n3",
53 target: "n4"
54 }]
55 }],
56 edges: [{
57 id: "e1", // edge n1 -> n2
58 source: "n1",
59 target: "n2"
60 }]
61 }
62 {{/code}}
63
64 (% style="color: rgb(51,51,51);" %)
65
66
67 {{code title="Small graph with a port and hierarchy" language="js" collapse="true"}}
68 {
69 id: "root",
70 children: [{
71 id: "n1",
72 labels: [ { text: "n1" } ],
73 width: 100,
74 height: 100
75 },{
76 id: "n2",
77 labels: [ { text: "n2" } ],
78 width: 100,
79 height: 50,
80 ports: [{
81 id: "n2_p1",
82 width: 10,
83 height: 10
84 }],
85 children: [{
86 id: "n3",
87 labels: [ { text: "n3" } ],
88 width: 20,
89 height: 20
90 },{
91 id: "n4",
92 labels: [ { text: "n4" } ],
93 width: 20,
94 height: 20}
95 ],
96 edges: [{
97 id: "e4",
98 source: "n3",
99 target: "n4"
100 }]
101 },{
102 id: "n5",
103 labels: [ { text: "n5" } ],
104 width: 100,
105 height: 50
106 }],
107 edges: [{
108 id: "e1",
109 labels: [ { text: "e1" } ],
110 source: "n1",
111 target: "n2",
112 targetPort: "n2_p1"
113 },{
114 id: "e2",
115 labels: [ { text: "e2" } ],
116 source: "n1",
117 target: "n5"
118 }]
119 }
120 {{/code}}
121
122 (% style="color: rgb(51,51,51);" %)