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.

396 lines
16 KiB

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