vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

373 lines
15 KiB

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Graph | Multiline text</title>
  5. <style type="text/css">
  6. #mygraph {
  7. width: 900px;
  8. height: 900px;
  9. border: 1px solid lightgray;
  10. }
  11. </style>
  12. <script type="text/javascript" src="../../dist/vis.js"></script>
  13. <script type="text/javascript">
  14. function draw() {
  15. // create some nodes
  16. var nodes = [
  17. {id:0,"labelHidden":"Myriel","group":1},
  18. {id:1,"labelHidden":"Napoleon","group":1},
  19. {id:2,"labelHidden":"Mlle.Baptistine","group":1},
  20. {id:3,"labelHidden":"Mme.Magloire","group":1},
  21. {id:4,"labelHidden":"CountessdeLo","group":1},
  22. {id:5,"labelHidden":"Geborand","group":1},
  23. {id:6,"labelHidden":"Champtercier","group":1},
  24. {id:7,"labelHidden":"Cravatte","group":1},
  25. {id:8,"labelHidden":"Count","group":1},
  26. {id:9,"labelHidden":"OldMan","group":1},
  27. {id:10,"labelHidden":"Labarre","group":2},
  28. {id:11,"labelHidden":"Valjean","group":2},
  29. {id:12,"labelHidden":"Marguerite","group":3},
  30. {id:13,"labelHidden":"Mme.deR","group":2},
  31. {id:14,"labelHidden":"Isabeau","group":2},
  32. {id:15,"labelHidden":"Gervais","group":2},
  33. {id:16,"labelHidden":"Tholomyes","group":3},
  34. {id:17,"labelHidden":"Listolier","group":3},
  35. {id:18,"labelHidden":"Fameuil","group":3},
  36. {id:19,"labelHidden":"Blacheville","group":3},
  37. {id:20,"labelHidden":"Favourite","group":3},
  38. {id:21,"labelHidden":"Dahlia","group":3},
  39. {id:22,"labelHidden":"Zephine","group":3},
  40. {id:23,"labelHidden":"Fantine","group":3},
  41. {id:24,"labelHidden":"Mme.Thenardier","group":4},
  42. {id:25,"labelHidden":"Thenardier","group":4},
  43. {id:26,"labelHidden":"Cosette","group":5},
  44. {id:27,"labelHidden":"Javert","group":4},
  45. {id:28,"labelHidden":"Fauchelevent","group":0},
  46. {id:29,"labelHidden":"Bamatabois","group":2},
  47. {id:30,"labelHidden":"Perpetue","group":3},
  48. {id:31,"labelHidden":"Simplice","group":2},
  49. {id:32,"labelHidden":"Scaufflaire","group":2},
  50. {id:33,"labelHidden":"Woman1","group":2},
  51. {id:34,"labelHidden":"Judge","group":2},
  52. {id:35,"labelHidden":"Champmathieu","group":2},
  53. {id:36,"labelHidden":"Brevet","group":2},
  54. {id:37,"labelHidden":"Chenildieu","group":2},
  55. {id:38,"labelHidden":"Cochepaille","group":2},
  56. {id:39,"labelHidden":"Pontmercy","group":4},
  57. {id:40,"labelHidden":"Boulatruelle","group":6},
  58. {id:41,"labelHidden":"Eponine","group":4},
  59. {id:42,"labelHidden":"Anzelma","group":4},
  60. {id:43,"labelHidden":"Woman2","group":5},
  61. {id:44,"labelHidden":"MotherInnocent","group":0},
  62. {id:45,"labelHidden":"Gribier","group":0},
  63. {id:46,"labelHidden":"Jondrette","group":7},
  64. {id:47,"labelHidden":"Mme.Burgon","group":7},
  65. {id:48,"labelHidden":"Gavroche","group":8},
  66. {id:49,"labelHidden":"Gillenormand","group":5},
  67. {id:50,"labelHidden":"Magnon","group":5},
  68. {id:51,"labelHidden":"Mlle.Gillenormand","group":5},
  69. {id:52,"labelHidden":"Mme.Pontmercy","group":5},
  70. {id:53,"labelHidden":"Mlle.Vaubois","group":5},
  71. {id:54,"labelHidden":"Lt.Gillenormand","group":5},
  72. {id:55,"labelHidden":"Marius","group":8},
  73. {id:56,"labelHidden":"BaronessT","group":5},
  74. {id:57,"labelHidden":"Mabeuf","group":8},
  75. {id:58,"labelHidden":"Enjolras","group":8},
  76. {id:59,"labelHidden":"Combeferre","group":8},
  77. {id:60,"labelHidden":"Prouvaire","group":8},
  78. {id:61,"labelHidden":"Feuilly","group":8},
  79. {id:62,"labelHidden":"Courfeyrac","group":8},
  80. {id:63,"labelHidden":"Bahorel","group":8},
  81. {id:64,"labelHidden":"Bossuet","group":8},
  82. {id:65,"labelHidden":"Joly","group":8},
  83. {id:66,"labelHidden":"Grantaire","group":8},
  84. {id:67,"labelHidden":"MotherPlutarch","group":9},
  85. {id:68,"labelHidden":"Gueulemer","group":4},
  86. {id:69,"labelHidden":"Babet","group":4},
  87. {id:70,"labelHidden":"Claquesous","group":4},
  88. {id:71,"labelHidden":"Montparnasse","group":4},
  89. {id:72,"labelHidden":"Toussaint","group":5},
  90. {id:73,"labelHidden":"Child1","group":10},
  91. {id:74,"labelHidden":"Child2","group":10},
  92. {id:75,"labelHidden":"Brujon","group":4},
  93. {id:76,"labelHidden":"Mme.Hucheloup","group":8}
  94. ];
  95. // create some edges
  96. var edges = [
  97. {"from":1,"to":0},
  98. {"from":2,"to":0},
  99. {"from":3,"to":0},
  100. {"from":3,"to":2},
  101. {"from":4,"to":0},
  102. {"from":5,"to":0},
  103. {"from":6,"to":0},
  104. {"from":7,"to":0},
  105. {"from":8,"to":0},
  106. {"from":9,"to":0},
  107. {"from":11,"to":10},
  108. {"from":11,"to":3},
  109. {"from":11,"to":2},
  110. {"from":11,"to":0},
  111. {"from":12,"to":11},
  112. {"from":13,"to":11},
  113. {"from":14,"to":11},
  114. {"from":15,"to":11},
  115. {"from":17,"to":16},
  116. {"from":18,"to":16},
  117. {"from":18,"to":17},
  118. {"from":19,"to":16},
  119. {"from":19,"to":17},
  120. {"from":19,"to":18},
  121. {"from":20,"to":16},
  122. {"from":20,"to":17},
  123. {"from":20,"to":18},
  124. {"from":20,"to":19},
  125. {"from":21,"to":16},
  126. {"from":21,"to":17},
  127. {"from":21,"to":18},
  128. {"from":21,"to":19},
  129. {"from":21,"to":20},
  130. {"from":22,"to":16},
  131. {"from":22,"to":17},
  132. {"from":22,"to":18},
  133. {"from":22,"to":19},
  134. {"from":22,"to":20},
  135. {"from":22,"to":21},
  136. {"from":23,"to":16},
  137. {"from":23,"to":17},
  138. {"from":23,"to":18},
  139. {"from":23,"to":19},
  140. {"from":23,"to":20},
  141. {"from":23,"to":21},
  142. {"from":23,"to":22},
  143. {"from":23,"to":12},
  144. {"from":23,"to":11},
  145. {"from":24,"to":23},
  146. {"from":24,"to":11},
  147. {"from":25,"to":24},
  148. {"from":25,"to":23},
  149. {"from":25,"to":11},
  150. {"from":26,"to":24},
  151. {"from":26,"to":11},
  152. {"from":26,"to":16},
  153. {"from":26,"to":25},
  154. {"from":27,"to":11},
  155. {"from":27,"to":23},
  156. {"from":27,"to":25},
  157. {"from":27,"to":24},
  158. {"from":27,"to":26},
  159. {"from":28,"to":11},
  160. {"from":28,"to":27},
  161. {"from":29,"to":23},
  162. {"from":29,"to":27},
  163. {"from":29,"to":11},
  164. {"from":30,"to":23},
  165. {"from":31,"to":30},
  166. {"from":31,"to":11},
  167. {"from":31,"to":23},
  168. {"from":31,"to":27},
  169. {"from":32,"to":11},
  170. {"from":33,"to":11},
  171. {"from":33,"to":27},
  172. {"from":34,"to":11},
  173. {"from":34,"to":29},
  174. {"from":35,"to":11},
  175. {"from":35,"to":34},
  176. {"from":35,"to":29},
  177. {"from":36,"to":34},
  178. {"from":36,"to":35},
  179. {"from":36,"to":11},
  180. {"from":36,"to":29},
  181. {"from":37,"to":34},
  182. {"from":37,"to":35},
  183. {"from":37,"to":36},
  184. {"from":37,"to":11},
  185. {"from":37,"to":29},
  186. {"from":38,"to":34},
  187. {"from":38,"to":35},
  188. {"from":38,"to":36},
  189. {"from":38,"to":37},
  190. {"from":38,"to":11},
  191. {"from":38,"to":29},
  192. {"from":39,"to":25},
  193. {"from":40,"to":25},
  194. {"from":41,"to":24},
  195. {"from":41,"to":25},
  196. {"from":42,"to":41},
  197. {"from":42,"to":25},
  198. {"from":42,"to":24},
  199. {"from":43,"to":11},
  200. {"from":43,"to":26},
  201. {"from":43,"to":27},
  202. {"from":44,"to":28},
  203. {"from":44,"to":11},
  204. {"from":45,"to":28},
  205. {"from":47,"to":46},
  206. {"from":48,"to":47},
  207. {"from":48,"to":25},
  208. {"from":48,"to":27},
  209. {"from":48,"to":11},
  210. {"from":49,"to":26},
  211. {"from":49,"to":11},
  212. {"from":50,"to":49},
  213. {"from":50,"to":24},
  214. {"from":51,"to":49},
  215. {"from":51,"to":26},
  216. {"from":51,"to":11},
  217. {"from":52,"to":51},
  218. {"from":52,"to":39},
  219. {"from":53,"to":51},
  220. {"from":54,"to":51},
  221. {"from":54,"to":49},
  222. {"from":54,"to":26},
  223. {"from":55,"to":51},
  224. {"from":55,"to":49},
  225. {"from":55,"to":39},
  226. {"from":55,"to":54},
  227. {"from":55,"to":26},
  228. {"from":55,"to":11},
  229. {"from":55,"to":16},
  230. {"from":55,"to":25},
  231. {"from":55,"to":41},
  232. {"from":55,"to":48},
  233. {"from":56,"to":49},
  234. {"from":56,"to":55},
  235. {"from":57,"to":55},
  236. {"from":57,"to":41},
  237. {"from":57,"to":48},
  238. {"from":58,"to":55},
  239. {"from":58,"to":48},
  240. {"from":58,"to":27},
  241. {"from":58,"to":57},
  242. {"from":58,"to":11},
  243. {"from":59,"to":58},
  244. {"from":59,"to":55},
  245. {"from":59,"to":48},
  246. {"from":59,"to":57},
  247. {"from":60,"to":48},
  248. {"from":60,"to":58},
  249. {"from":60,"to":59},
  250. {"from":61,"to":48},
  251. {"from":61,"to":58},
  252. {"from":61,"to":60},
  253. {"from":61,"to":59},
  254. {"from":61,"to":57},
  255. {"from":61,"to":55},
  256. {"from":62,"to":55},
  257. {"from":62,"to":58},
  258. {"from":62,"to":59},
  259. {"from":62,"to":48},
  260. {"from":62,"to":57},
  261. {"from":62,"to":41},
  262. {"from":62,"to":61},
  263. {"from":62,"to":60},
  264. {"from":63,"to":59},
  265. {"from":63,"to":48},
  266. {"from":63,"to":62},
  267. {"from":63,"to":57},
  268. {"from":63,"to":58},
  269. {"from":63,"to":61},
  270. {"from":63,"to":60},
  271. {"from":63,"to":55},
  272. {"from":64,"to":55},
  273. {"from":64,"to":62},
  274. {"from":64,"to":48},
  275. {"from":64,"to":63},
  276. {"from":64,"to":58},
  277. {"from":64,"to":61},
  278. {"from":64,"to":60},
  279. {"from":64,"to":59},
  280. {"from":64,"to":57},
  281. {"from":64,"to":11},
  282. {"from":65,"to":63},
  283. {"from":65,"to":64},
  284. {"from":65,"to":48},
  285. {"from":65,"to":62},
  286. {"from":65,"to":58},
  287. {"from":65,"to":61},
  288. {"from":65,"to":60},
  289. {"from":65,"to":59},
  290. {"from":65,"to":57},
  291. {"from":65,"to":55},
  292. {"from":66,"to":64},
  293. {"from":66,"to":58},
  294. {"from":66,"to":59},
  295. {"from":66,"to":62},
  296. {"from":66,"to":65},
  297. {"from":66,"to":48},
  298. {"from":66,"to":63},
  299. {"from":66,"to":61},
  300. {"from":66,"to":60},
  301. {"from":67,"to":57},
  302. {"from":68,"to":25},
  303. {"from":68,"to":11},
  304. {"from":68,"to":24},
  305. {"from":68,"to":27},
  306. {"from":68,"to":48},
  307. {"from":68,"to":41},
  308. {"from":69,"to":25},
  309. {"from":69,"to":68},
  310. {"from":69,"to":11},
  311. {"from":69,"to":24},
  312. {"from":69,"to":27},
  313. {"from":69,"to":48},
  314. {"from":69,"to":41},
  315. {"from":70,"to":25},
  316. {"from":70,"to":69},
  317. {"from":70,"to":68},
  318. {"from":70,"to":11},
  319. {"from":70,"to":24},
  320. {"from":70,"to":27},
  321. {"from":70,"to":41},
  322. {"from":70,"to":58},
  323. {"from":71,"to":27},
  324. {"from":71,"to":69},
  325. {"from":71,"to":68},
  326. {"from":71,"to":70},
  327. {"from":71,"to":11},
  328. {"from":71,"to":48},
  329. {"from":71,"to":41},
  330. {"from":71,"to":25},
  331. {"from":72,"to":26},
  332. {"from":72,"to":27},
  333. {"from":72,"to":11},
  334. {"from":73,"to":48},
  335. {"from":74,"to":48},
  336. {"from":74,"to":73},
  337. {"from":75,"to":69},
  338. {"from":75,"to":68},
  339. {"from":75,"to":25},
  340. {"from":75,"to":48},
  341. {"from":75,"to":41},
  342. {"from":75,"to":70},
  343. {"from":75,"to":71},
  344. {"from":76,"to":64},
  345. {"from":76,"to":65},
  346. {"from":76,"to":66},
  347. {"from":76,"to":63},
  348. {"from":76,"to":62},
  349. {"from":76,"to":48},
  350. {"from":76,"to":58}
  351. ];
  352. // create a graph
  353. var container = document.getElementById('mygraph');
  354. var data = {
  355. nodes: nodes,
  356. edges: edges
  357. };
  358. var options = {nodes: {shape:'circle'},stabilize: false};
  359. var graph = new vis.Graph(container, data, options);
  360. }
  361. </script>
  362. </head>
  363. <body onload="draw()">
  364. <div id="mygraph"></div>
  365. </body>
  366. </html>