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.

504 lines
20 KiB

  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. #loadingBar {
  12. position:absolute;
  13. top:0px;
  14. left:0px;
  15. width: 902px;
  16. height: 902px;
  17. background-color:rgba(200,200,200,0.8);
  18. -webkit-transition: all 0.5s ease;
  19. -moz-transition: all 0.5s ease;
  20. -ms-transition: all 0.5s ease;
  21. -o-transition: all 0.5s ease;
  22. transition: all 0.5s ease;
  23. opacity:1;
  24. }
  25. #wrapper {
  26. position:relative;
  27. width:900px;
  28. height:900px;
  29. }
  30. #text {
  31. position:absolute;
  32. top:8px;
  33. left:530px;
  34. width:30px;
  35. height:50px;
  36. margin:auto auto auto auto;
  37. font-size:22px;
  38. color: #000000;
  39. }
  40. div.outerBorder {
  41. position:relative;
  42. top:400px;
  43. width:600px;
  44. height:44px;
  45. margin:auto auto auto auto;
  46. border:8px solid rgba(0,0,0,0.1);
  47. background: rgb(252,252,252); /* Old browsers */
  48. background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
  49. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
  50. background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
  51. background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
  52. background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
  53. background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
  54. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
  55. border-radius:72px;
  56. box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  57. }
  58. #border {
  59. position:absolute;
  60. top:10px;
  61. left:10px;
  62. width:500px;
  63. height:23px;
  64. margin:auto auto auto auto;
  65. box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
  66. border-radius:10px;
  67. }
  68. #bar {
  69. position:absolute;
  70. top:0px;
  71. left:0px;
  72. width:20px;
  73. height:20px;
  74. margin:auto auto auto auto;
  75. border-radius:11px;
  76. border:2px solid rgba(30,30,30,0.05);
  77. background: rgb(0, 173, 246); /* Old browsers */
  78. box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
  79. }
  80. </style>
  81. <script type="text/javascript" src="../../../dist/vis.js"></script>
  82. <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
  83. <script type="text/javascript">
  84. function draw() {
  85. // create some nodes
  86. var nodes = [
  87. {id: 0, "label": "Myriel", "group": 1},
  88. {id: 1, "label": "Napoleon", "group": 1},
  89. {id: 2, "label": "Mlle.Baptistine", "group": 1},
  90. {id: 3, "label": "Mme.Magloire", "group": 1},
  91. {id: 4, "label": "CountessdeLo", "group": 1},
  92. {id: 5, "label": "Geborand", "group": 1},
  93. {id: 6, "label": "Champtercier", "group": 1},
  94. {id: 7, "label": "Cravatte", "group": 1},
  95. {id: 8, "label": "Count", "group": 1},
  96. {id: 9, "label": "OldMan", "group": 1},
  97. {id: 10, "label": "Labarre", "group": 2},
  98. {id: 11, "label": "Valjean", "group": 2},
  99. {id: 12, "label": "Marguerite", "group": 3},
  100. {id: 13, "label": "Mme.deR", "group": 2},
  101. {id: 14, "label": "Isabeau", "group": 2},
  102. {id: 15, "label": "Gervais", "group": 2},
  103. {id: 16, "label": "Tholomyes", "group": 3},
  104. {id: 17, "label": "Listolier", "group": 3},
  105. {id: 18, "label": "Fameuil", "group": 3},
  106. {id: 19, "label": "Blacheville", "group": 3},
  107. {id: 20, "label": "Favourite", "group": 3},
  108. {id: 21, "label": "Dahlia", "group": 3},
  109. {id: 22, "label": "Zephine", "group": 3},
  110. {id: 23, "label": "Fantine", "group": 3},
  111. {id: 24, "label": "Mme.Thenardier", "group": 4},
  112. {id: 25, "label": "Thenardier", "group": 4},
  113. {id: 26, "label": "Cosette", "group": 5},
  114. {id: 27, "label": "Javert", "group": 4},
  115. {id: 28, "label": "Fauchelevent", "group": 0},
  116. {id: 29, "label": "Bamatabois", "group": 2},
  117. {id: 30, "label": "Perpetue", "group": 3},
  118. {id: 31, "label": "Simplice", "group": 2},
  119. {id: 32, "label": "Scaufflaire", "group": 2},
  120. {id: 33, "label": "Woman1", "group": 2},
  121. {id: 34, "label": "Judge", "group": 2},
  122. {id: 35, "label": "Champmathieu", "group": 2},
  123. {id: 36, "label": "Brevet", "group": 2},
  124. {id: 37, "label": "Chenildieu", "group": 2},
  125. {id: 38, "label": "Cochepaille", "group": 2},
  126. {id: 39, "label": "Pontmercy", "group": 4},
  127. {id: 40, "label": "Boulatruelle", "group": 6},
  128. {id: 41, "label": "Eponine", "group": 4},
  129. {id: 42, "label": "Anzelma", "group": 4},
  130. {id: 43, "label": "Woman2", "group": 5},
  131. {id: 44, "label": "MotherInnocent", "group": 0},
  132. {id: 45, "label": "Gribier", "group": 0},
  133. {id: 46, "label": "Jondrette", "group": 7},
  134. {id: 47, "label": "Mme.Burgon", "group": 7},
  135. {id: 48, "label": "Gavroche", "group": 8},
  136. {id: 49, "label": "Gillenormand", "group": 5},
  137. {id: 50, "label": "Magnon", "group": 5},
  138. {id: 51, "label": "Mlle.Gillenormand", "group": 5},
  139. {id: 52, "label": "Mme.Pontmercy", "group": 5},
  140. {id: 53, "label": "Mlle.Vaubois", "group": 5},
  141. {id: 54, "label": "Lt.Gillenormand", "group": 5},
  142. {id: 55, "label": "Marius", "group": 8},
  143. {id: 56, "label": "BaronessT", "group": 5},
  144. {id: 57, "label": "Mabeuf", "group": 8},
  145. {id: 58, "label": "Enjolras", "group": 8},
  146. {id: 59, "label": "Combeferre", "group": 8},
  147. {id: 60, "label": "Prouvaire", "group": 8},
  148. {id: 61, "label": "Feuilly", "group": 8},
  149. {id: 62, "label": "Courfeyrac", "group": 8},
  150. {id: 63, "label": "Bahorel", "group": 8},
  151. {id: 64, "label": "Bossuet", "group": 8},
  152. {id: 65, "label": "Joly", "group": 8},
  153. {id: 66, "label": "Grantaire", "group": 8},
  154. {id: 67, "label": "MotherPlutarch", "group": 9},
  155. {id: 68, "label": "Gueulemer", "group": 4},
  156. {id: 69, "label": "Babet", "group": 4},
  157. {id: 70, "label": "Claquesous", "group": 4},
  158. {id: 71, "label": "Montparnasse", "group": 4},
  159. {id: 72, "label": "Toussaint", "group": 5},
  160. {id: 73, "label": "Child1", "group": 10},
  161. {id: 74, "label": "Child2", "group": 10},
  162. {id: 75, "label": "Brujon", "group": 4},
  163. {id: 76, "label": "Mme.Hucheloup", "group": 8}
  164. ];
  165. // create some edges
  166. var edges = [
  167. {"from": 1, "to": 0},
  168. {"from": 2, "to": 0},
  169. {"from": 3, "to": 0},
  170. {"from": 3, "to": 2},
  171. {"from": 4, "to": 0},
  172. {"from": 5, "to": 0},
  173. {"from": 6, "to": 0},
  174. {"from": 7, "to": 0},
  175. {"from": 8, "to": 0},
  176. {"from": 9, "to": 0},
  177. {"from": 11, "to": 10},
  178. {"from": 11, "to": 3},
  179. {"from": 11, "to": 2},
  180. {"from": 11, "to": 0},
  181. {"from": 12, "to": 11},
  182. {"from": 13, "to": 11},
  183. {"from": 14, "to": 11},
  184. {"from": 15, "to": 11},
  185. {"from": 17, "to": 16},
  186. {"from": 18, "to": 16},
  187. {"from": 18, "to": 17},
  188. {"from": 19, "to": 16},
  189. {"from": 19, "to": 17},
  190. {"from": 19, "to": 18},
  191. {"from": 20, "to": 16},
  192. {"from": 20, "to": 17},
  193. {"from": 20, "to": 18},
  194. {"from": 20, "to": 19},
  195. {"from": 21, "to": 16},
  196. {"from": 21, "to": 17},
  197. {"from": 21, "to": 18},
  198. {"from": 21, "to": 19},
  199. {"from": 21, "to": 20},
  200. {"from": 22, "to": 16},
  201. {"from": 22, "to": 17},
  202. {"from": 22, "to": 18},
  203. {"from": 22, "to": 19},
  204. {"from": 22, "to": 20},
  205. {"from": 22, "to": 21},
  206. {"from": 23, "to": 16},
  207. {"from": 23, "to": 17},
  208. {"from": 23, "to": 18},
  209. {"from": 23, "to": 19},
  210. {"from": 23, "to": 20},
  211. {"from": 23, "to": 21},
  212. {"from": 23, "to": 22},
  213. {"from": 23, "to": 12},
  214. {"from": 23, "to": 11},
  215. {"from": 24, "to": 23},
  216. {"from": 24, "to": 11},
  217. {"from": 25, "to": 24},
  218. {"from": 25, "to": 23},
  219. {"from": 25, "to": 11},
  220. {"from": 26, "to": 24},
  221. {"from": 26, "to": 11},
  222. {"from": 26, "to": 16},
  223. {"from": 26, "to": 25},
  224. {"from": 27, "to": 11},
  225. {"from": 27, "to": 23},
  226. {"from": 27, "to": 25},
  227. {"from": 27, "to": 24},
  228. {"from": 27, "to": 26},
  229. {"from": 28, "to": 11},
  230. {"from": 28, "to": 27},
  231. {"from": 29, "to": 23},
  232. {"from": 29, "to": 27},
  233. {"from": 29, "to": 11},
  234. {"from": 30, "to": 23},
  235. {"from": 31, "to": 30},
  236. {"from": 31, "to": 11},
  237. {"from": 31, "to": 23},
  238. {"from": 31, "to": 27},
  239. {"from": 32, "to": 11},
  240. {"from": 33, "to": 11},
  241. {"from": 33, "to": 27},
  242. {"from": 34, "to": 11},
  243. {"from": 34, "to": 29},
  244. {"from": 35, "to": 11},
  245. {"from": 35, "to": 34},
  246. {"from": 35, "to": 29},
  247. {"from": 36, "to": 34},
  248. {"from": 36, "to": 35},
  249. {"from": 36, "to": 11},
  250. {"from": 36, "to": 29},
  251. {"from": 37, "to": 34},
  252. {"from": 37, "to": 35},
  253. {"from": 37, "to": 36},
  254. {"from": 37, "to": 11},
  255. {"from": 37, "to": 29},
  256. {"from": 38, "to": 34},
  257. {"from": 38, "to": 35},
  258. {"from": 38, "to": 36},
  259. {"from": 38, "to": 37},
  260. {"from": 38, "to": 11},
  261. {"from": 38, "to": 29},
  262. {"from": 39, "to": 25},
  263. {"from": 40, "to": 25},
  264. {"from": 41, "to": 24},
  265. {"from": 41, "to": 25},
  266. {"from": 42, "to": 41},
  267. {"from": 42, "to": 25},
  268. {"from": 42, "to": 24},
  269. {"from": 43, "to": 11},
  270. {"from": 43, "to": 26},
  271. {"from": 43, "to": 27},
  272. {"from": 44, "to": 28},
  273. {"from": 44, "to": 11},
  274. {"from": 45, "to": 28},
  275. {"from": 47, "to": 46},
  276. {"from": 48, "to": 47},
  277. {"from": 48, "to": 25},
  278. {"from": 48, "to": 27},
  279. {"from": 48, "to": 11},
  280. {"from": 49, "to": 26},
  281. {"from": 49, "to": 11},
  282. {"from": 50, "to": 49},
  283. {"from": 50, "to": 24},
  284. {"from": 51, "to": 49},
  285. {"from": 51, "to": 26},
  286. {"from": 51, "to": 11},
  287. {"from": 52, "to": 51},
  288. {"from": 52, "to": 39},
  289. {"from": 53, "to": 51},
  290. {"from": 54, "to": 51},
  291. {"from": 54, "to": 49},
  292. {"from": 54, "to": 26},
  293. {"from": 55, "to": 51},
  294. {"from": 55, "to": 49},
  295. {"from": 55, "to": 39},
  296. {"from": 55, "to": 54},
  297. {"from": 55, "to": 26},
  298. {"from": 55, "to": 11},
  299. {"from": 55, "to": 16},
  300. {"from": 55, "to": 25},
  301. {"from": 55, "to": 41},
  302. {"from": 55, "to": 48},
  303. {"from": 56, "to": 49},
  304. {"from": 56, "to": 55},
  305. {"from": 57, "to": 55},
  306. {"from": 57, "to": 41},
  307. {"from": 57, "to": 48},
  308. {"from": 58, "to": 55},
  309. {"from": 58, "to": 48},
  310. {"from": 58, "to": 27},
  311. {"from": 58, "to": 57},
  312. {"from": 58, "to": 11},
  313. {"from": 59, "to": 58},
  314. {"from": 59, "to": 55},
  315. {"from": 59, "to": 48},
  316. {"from": 59, "to": 57},
  317. {"from": 60, "to": 48},
  318. {"from": 60, "to": 58},
  319. {"from": 60, "to": 59},
  320. {"from": 61, "to": 48},
  321. {"from": 61, "to": 58},
  322. {"from": 61, "to": 60},
  323. {"from": 61, "to": 59},
  324. {"from": 61, "to": 57},
  325. {"from": 61, "to": 55},
  326. {"from": 62, "to": 55},
  327. {"from": 62, "to": 58},
  328. {"from": 62, "to": 59},
  329. {"from": 62, "to": 48},
  330. {"from": 62, "to": 57},
  331. {"from": 62, "to": 41},
  332. {"from": 62, "to": 61},
  333. {"from": 62, "to": 60},
  334. {"from": 63, "to": 59},
  335. {"from": 63, "to": 48},
  336. {"from": 63, "to": 62},
  337. {"from": 63, "to": 57},
  338. {"from": 63, "to": 58},
  339. {"from": 63, "to": 61},
  340. {"from": 63, "to": 60},
  341. {"from": 63, "to": 55},
  342. {"from": 64, "to": 55},
  343. {"from": 64, "to": 62},
  344. {"from": 64, "to": 48},
  345. {"from": 64, "to": 63},
  346. {"from": 64, "to": 58},
  347. {"from": 64, "to": 61},
  348. {"from": 64, "to": 60},
  349. {"from": 64, "to": 59},
  350. {"from": 64, "to": 57},
  351. {"from": 64, "to": 11},
  352. {"from": 65, "to": 63},
  353. {"from": 65, "to": 64},
  354. {"from": 65, "to": 48},
  355. {"from": 65, "to": 62},
  356. {"from": 65, "to": 58},
  357. {"from": 65, "to": 61},
  358. {"from": 65, "to": 60},
  359. {"from": 65, "to": 59},
  360. {"from": 65, "to": 57},
  361. {"from": 65, "to": 55},
  362. {"from": 66, "to": 64},
  363. {"from": 66, "to": 58},
  364. {"from": 66, "to": 59},
  365. {"from": 66, "to": 62},
  366. {"from": 66, "to": 65},
  367. {"from": 66, "to": 48},
  368. {"from": 66, "to": 63},
  369. {"from": 66, "to": 61},
  370. {"from": 66, "to": 60},
  371. {"from": 67, "to": 57},
  372. {"from": 68, "to": 25},
  373. {"from": 68, "to": 11},
  374. {"from": 68, "to": 24},
  375. {"from": 68, "to": 27},
  376. {"from": 68, "to": 48},
  377. {"from": 68, "to": 41},
  378. {"from": 69, "to": 25},
  379. {"from": 69, "to": 68},
  380. {"from": 69, "to": 11},
  381. {"from": 69, "to": 24},
  382. {"from": 69, "to": 27},
  383. {"from": 69, "to": 48},
  384. {"from": 69, "to": 41},
  385. {"from": 70, "to": 25},
  386. {"from": 70, "to": 69},
  387. {"from": 70, "to": 68},
  388. {"from": 70, "to": 11},
  389. {"from": 70, "to": 24},
  390. {"from": 70, "to": 27},
  391. {"from": 70, "to": 41},
  392. {"from": 70, "to": 58},
  393. {"from": 71, "to": 27},
  394. {"from": 71, "to": 69},
  395. {"from": 71, "to": 68},
  396. {"from": 71, "to": 70},
  397. {"from": 71, "to": 11},
  398. {"from": 71, "to": 48},
  399. {"from": 71, "to": 41},
  400. {"from": 71, "to": 25},
  401. {"from": 72, "to": 26},
  402. {"from": 72, "to": 27},
  403. {"from": 72, "to": 11},
  404. {"from": 73, "to": 48},
  405. {"from": 74, "to": 48},
  406. {"from": 74, "to": 73},
  407. {"from": 75, "to": 69},
  408. {"from": 75, "to": 68},
  409. {"from": 75, "to": 25},
  410. {"from": 75, "to": 48},
  411. {"from": 75, "to": 41},
  412. {"from": 75, "to": 70},
  413. {"from": 75, "to": 71},
  414. {"from": 76, "to": 64},
  415. {"from": 76, "to": 65},
  416. {"from": 76, "to": 66},
  417. {"from": 76, "to": 63},
  418. {"from": 76, "to": 62},
  419. {"from": 76, "to": 48},
  420. {"from": 76, "to": 58}
  421. ];
  422. // create a network
  423. var container = document.getElementById('mynetwork');
  424. var data = {
  425. nodes: nodes,
  426. edges: edges
  427. };
  428. var options = {
  429. nodes: {
  430. shape: 'dot',
  431. size: 16
  432. },
  433. layout:{
  434. randomSeed:34
  435. },
  436. physics: {
  437. forceAtlas2Based: {
  438. gravitationalConstant: -26,
  439. centralGravity: 0.005,
  440. springLength: 230,
  441. springConstant: 0.18
  442. },
  443. maxVelocity: 146,
  444. solver: 'forceAtlas2Based',
  445. timestep: 0.35,
  446. stabilization: {
  447. enabled:true,
  448. iterations:2000,
  449. updateInterval:25
  450. }
  451. }
  452. };
  453. var network = new vis.Network(container, data, options);
  454. network.on("stabilizationProgress", function(params) {
  455. var maxWidth = 496;
  456. var minWidth = 20;
  457. var widthFactor = params.iterations/params.total;
  458. var width = Math.max(minWidth,maxWidth * widthFactor);
  459. document.getElementById('bar').style.width = width + 'px';
  460. document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
  461. });
  462. network.once("stabilizationIterationsDone", function() {
  463. document.getElementById('text').innerHTML = '100%';
  464. document.getElementById('bar').style.width = '496px';
  465. document.getElementById('loadingBar').style.opacity = 0;
  466. // really clean the dom element
  467. setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
  468. });
  469. }
  470. </script>
  471. </head>
  472. <body onload="draw()">
  473. <p>
  474. With the new stabilization events you can implement your own custom loading bar for all those long loading times!
  475. </p>
  476. <div id="wrapper">
  477. <div id="mynetwork"></div>
  478. <div id="loadingBar">
  479. <div class="outerBorder">
  480. <div id="text">0%</div>
  481. <div id="border">
  482. <div id="bar"></div>
  483. </div>
  484. </div>
  485. </div>
  486. </div>
  487. </body>
  488. </html>