Old school D3 from simpler times

All examples By author By category About

nathanachang

Full window Github gist

vis.js test

Built with blockbuilder.org

<!DOCTYPE HTML>
<html>
<head>
  <title>Graph2d or Basic Example</title>

<style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>

<script type="text/javascript">
  var container = document.getElementById('visualization');
	var items = [
    	{x: 0, y: 400, group: 0},
      {x: 1, y: 397.4883598646, group: 0},
      {x: 2, y: 501.5903198269, group: 0},
      {x: 3, y: 627.9099889693, group: 0},
      {x: 4, y: 735.5590484201, group: 0},
      {x: 5, y: 768.3644982346, group: 0},
      {x: 6, y: 691.9339772864, group: 0},
      {x: 7, y: 542.5711266211, group: 0},
      {x: 8, y: 393.8385924922, group: 0},
      {x: 9, y: 286.08468782, group: 0},
      {x: 10, y: 220.4748521542, group: 0},
      {x: 11, y: 185.720412122, group: 0},
      {x: 12, y: 172.443460477, group: 0},
      {x: 13, y: 175.7689285806, group: 0},
      {x: 14, y: 194.5892636553, group: 0},
      {x: 15, y: 230.7095086223, group: 0},
      {x: 16, y: 288.2215142324, group: 0},
      {x: 17, y: 372.4777519355, group: 0},
      {x: 18, y: 487.3615426094, group: 0},
      {x: 19, y: 629.1618254296, group: 0},
      {x: 20, y: 777.9976797297, group: 0},
      {x: 21, y: 900.2854801372, group: 0},
      {x: 22, y: 992.9695396253, group: 0},
      {x: 23, y: 1165.3303445356, group: 0},
      {x: 24, y: 1682.80115599, group: 0},
      {x: 25, y: 3010.3021741901, group: 0},
      {x: 26, y: 6023.7752895721, group: 0},
      {x: 27, y: 12366.0006567358, group: 0},
      {x: 28, y: 22982.8104959965, group: 0},
      {x: 29, y: 14380.7312624218, group: 0},
      {x: 30, y: 1053.7073571363, group: 0},
      {x: 31, y: 277.881333346, group: 0},
      {x: 32, y: 277.3847850597, group: 0},
      {x: 33, y: 346.4888975922, group: 0},
      {x: 34, y: 447.2339204673, group: 0},
      {x: 35, y: 570.853411074, group: 0},
      {x: 36, y: 693.5050642864, group: 0},
      {x: 37, y: 766.5122148449, group: 0},
      {x: 38, y: 738.5712652349, group: 0},
      {x: 39, y: 612.6511112566, group: 0},
      {x: 40, y: 455.7206065428, group: 0},
      {x: 41, y: 328.0442054526, group: 0},
      {x: 42, y: 245.0572467191, group: 0},
      {x: 43, y: 198.1785035636, group: 0},
      {x: 44, y: 176.4575441796, group: 0},
      {x: 45, y: 173.1358610257, group: 0},
      {x: 46, y: 185.7410445976, group: 0},
      {x: 47, y: 215.2409212038, group: 0},
      {x: 48, y: 265.568322639, group: 0},
      {x: 49, y: 343.3532246394, group: 0},
      {x: 50, y: 457.1496457061, group: 0},
      {x: 51, y: 615.1521337016, group: 0},
      {x: 52, y: 821.8159089673, group: 0},
      {x: 53, y: 1082.6559308848, group: 0},
      {x: 54, y: 1448.4241852016, group: 0},
      {x: 55, y: 2134.1789435148, group: 0},
      {x: 56, y: 3685.7986042438, group: 0},
      {x: 57, y: 7184.702985441, group: 0},
      {x: 58, y: 14478.0036004139, group: 0},
      {x: 59, y: 24757.3351841689, group: 0},
      {x: 60, y: 8808.4494769943, group: 0},
      {x: 61, y: 627.7916886419, group: 0},
      {x: 62, y: 214.8617433371, group: 0},
      {x: 63, y: 208.2822233883, group: 0},
      {x: 64, y: 246.1562043337, group: 0},
      {x: 65, y: 309.0961088522, group: 0},
      {x: 66, y: 398.6949678202, group: 0},
      {x: 67, y: 514.234181223, group: 0},
      {x: 68, y: 641.9715631991, group: 0},
      {x: 69, y: 744.2095744018, group: 0},
      {x: 70, y: 765.072943187, group: 0},
      {x: 71, y: 676.9047798507, group: 0},
      {x: 72, y: 524.0498964666, group: 0},
      {x: 73, y: 379.0679831445, group: 0},
      {x: 74, y: 276.7827122534, group: 0},
      {x: 75, y: 215.6603452033, group: 0},
      {x: 76, y: 184.34783412, group: 0},
      {x: 77, y: 174.2457118691, group: 0},
      {x: 78, y: 181.5273788352, group: 0},
      {x: 79, y: 206.6348897378, group: 0},
      {x: 80, y: 254.1592834435, group: 0},
      {x: 81, y: 333.7269441653, group: 0},
      {x: 82, y: 462.1371763838, group: 0},
      {x: 83, y: 667.4474667362, group: 0},
      {x: 84, y: 997.8697104793, group: 0},
      {x: 85, y: 1546.8615268748, group: 0},
      {x: 86, y: 2530.2372251748, group: 0},
      {x: 87, y: 4484.2746540087, group: 0},
      {x: 88, y: 8615.3088064744, group: 0},
      {x: 89, y: 16922.2343136775, group: 0},
      {x: 90, y: 25078.9368129872, group: 0},
      {x: 91, y: 4926.5141846274, group: 0},
      {x: 92, y: 434.6186368062, group: 0},
      {x: 93, y: 194.4577493778, group: 0},
      {x: 94, y: 177.5501302489, group: 0},
      {x: 95, y: 191.7286547707, group: 0},
      {x: 96, y: 224.5090868637, group: 0},
      {x: 97, y: 277.7357841262, group: 0},
      {x: 98, y: 355.5706188431, group: 0},
      {x: 99, y: 460.388682464, group: 0},
      {x: 100, y: 585.8094684078, group: 0},
      {x: 0, y: 400, group: 1},
      {x: 1, y: 341.7500833023, group: 1},
      {x: 2, y: 366.5851356649, group: 1},
      {x: 3, y: 396.4981795118, group: 1},
      {x: 4, y: 420.2707679545, group: 1},
      {x: 5, y: 432.1099035297, group: 1},
      {x: 6, y: 428.512785238, group: 1},
      {x: 7, y: 409.4369255126, group: 1},
      {x: 8, y: 378.6153046798, group: 1},
      {x: 9, y: 342.080014492, group: 1},
      {x: 10, y: 305.8188900806, group: 1},
      {x: 11, y: 274.1071750122, group: 1},
      {x: 12, y: 249.1538148028, group: 1},
      {x: 13, y: 231.6288055418, group: 1},
      {x: 14, y: 221.3913304017, group: 1},
      {x: 15, y: 218.0395415757, group: 1},
      {x: 16, y: 221.2037443977, group: 1},
      {x: 17, y: 230.6444122554, group: 1},
      {x: 18, y: 246.2150284082, group: 1},
      {x: 19, y: 267.7172989583, group: 1},
      {x: 20, y: 294.6564766539, group: 1},
      {x: 21, y: 325.8995468516, group: 1},
      {x: 22, y: 359.2862522069, group: 1},
      {x: 23, y: 391.3465713913, group: 1},
      {x: 24, y: 417.4193228107, group: 1},
      {x: 25, y: 432.5261177438, group: 1},
      {x: 26, y: 433.0774230524, group: 1},
      {x: 27, y: 418.7797239953, group: 1},
      {x: 28, y: 393.5136425497, group: 1},
      {x: 29, y: 364.4774962862, group: 1},
      {x: 30, y: 340.4301095048, group: 1},
      {x: 31, y: 330.821925326, group: 1},
      {x: 32, y: 347.0798826724, group: 1},
      {x: 33, y: 406.4942062065, group: 1},
      {x: 34, y: 539.3732947889, group: 1},
      {x: 35, y: 801.5171317316, group: 1},
      {x: 36, y: 1296.4387536289, group: 1},
      {x: 37, y: 2215.4220179854, group: 1},
      {x: 38, y: 3908.6518117584, group: 1},
      {x: 39, y: 7002.2723714292, group: 1},
      {x: 40, y: 12517.0109807826, group: 1},
      {x: 41, y: 21066.7420842182, group: 1},
      {x: 42, y: 19805.3978206614, group: 1},
      {x: 43, y: 2495.3869664994, group: 1},
      {x: 44, y: 544.3086830276, group: 1},
      {x: 45, y: 441.934339436, group: 1},
      {x: 46, y: 433.5290170432, group: 1},
      {x: 47, y: 418.4513805434, group: 1},
      {x: 48, y: 391.0399115016, group: 1},
      {x: 49, y: 355.7843865802, group: 1},
      {x: 50, y: 318.790092357, group: 1},
      {x: 51, y: 285.0378513591, group: 1},
      {x: 52, y: 257.4560020111, group: 1},
      {x: 53, y: 237.1902466333, group: 1},
      {x: 54, y: 224.3194082415, group: 1},
      {x: 55, y: 218.4880146536, group: 1},
      {x: 56, y: 219.2932789709, group: 1},
      {x: 57, y: 226.4444138502, group: 1},
      {x: 58, y: 239.7715234285, group: 1},
      {x: 59, y: 259.1161156251, group: 1},
      {x: 60, y: 284.1216078738, group: 1},
      {x: 61, y: 313.9255107342, group: 1},
      {x: 62, y: 346.7726692269, group: 1},
      {x: 63, y: 379.6618376898, group: 1},
      {x: 64, y: 408.2622765871, group: 1},
      {x: 65, y: 427.463366229, group: 1},
      {x: 66, y: 432.7663426407, group: 1},
      {x: 67, y: 422.1832136904, group: 1},
      {x: 68, y: 397.5222991309, group: 1},
      {x: 69, y: 363.9482190251, group: 1},
      {x: 70, y: 327.9716482636, group: 1},
      {x: 71, y: 295.3316525698, group: 1},
      {x: 72, y: 270.0692730377, group: 1},
      {x: 73, y: 254.9335012111, group: 1},
      {x: 74, y: 252.580067547, group: 1},
      {x: 75, y: 267.1872716755, group: 1},
      {x: 76, y: 306.6366690707, group: 1},
      {x: 77, y: 385.9542220537, group: 1},
      {x: 78, y: 533.3512197298, group: 1},
      {x: 79, y: 801.2554514496, group: 1},
      {x: 80, y: 1286.6153576941, group: 1},
      {x: 81, y: 2168.0578417986, group: 1},
      {x: 82, y: 3772.5038428939, group: 1},
      {x: 83, y: 6686.7571345288, group: 1},
      {x: 84, y: 11886.2509000975, group: 1},
      {x: 85, y: 20199.1752031418, group: 1},
      {x: 86, y: 21764.2998355429, group: 1},
      {x: 87, y: 3296.0216298118, group: 1},
      {x: 88, y: 576.6997224968, group: 1},
      {x: 89, y: 385.0048167355, group: 1},
      {x: 90, y: 334.3907593098, group: 1},
      {x: 91, y: 297.2472908707, group: 1},
      {x: 92, y: 266.8694230259, group: 1},
      {x: 93, y: 243.7923384023, group: 1},
      {x: 94, y: 228.2135988673, group: 1},
      {x: 95, y: 219.8403109837, group: 1},
      {x: 96, y: 218.2479669632, group: 1},
      {x: 97, y: 223.0941528721, group: 1},
      {x: 98, y: 234.1700596731, group: 1},
      {x: 99, y: 251.3305558317, group: 1},
      {x: 100, y: 274.3218489544, group: 1},
      {x: 0, y: 400, group: 2},
      {x: 1, y: 295.8800391253, group: 2},
      {x: 2, y: 266.9090616946, group: 2},
      {x: 3, y: 244.0033805377, group: 2},
      {x: 4, y: 221.8899738266, group: 2},
      {x: 5, y: 201.1582172032, group: 2},
      {x: 6, y: 182.6592345475, group: 2},
      {x: 7, y: 166.8889591518, group: 2},
      {x: 8, y: 154.0102168317, group: 2},
      {x: 9, y: 143.9694445785, group: 2},
      {x: 10, y: 136.6043464189, group: 2},
      {x: 11, y: 131.721006984, group: 2},
      {x: 12, y: 129.140677381, group: 2},
      {x: 13, y: 128.7235800108, group: 2},
      {x: 14, y: 130.37772556, group: 2},
      {x: 15, y: 134.0585485481, group: 2},
      {x: 16, y: 139.7619158594, group: 2},
      {x: 17, y: 147.5116457537, group: 2},
      {x: 18, y: 157.3414364193, group: 2},
      {x: 19, y: 169.2694895312, group: 2},
      {x: 20, y: 183.2643361898, group: 2},
      {x: 21, y: 199.1993137404, group: 2},
      {x: 22, y: 216.7971802032, group: 2},
      {x: 23, y: 235.5675366789, group: 2},
      {x: 24, y: 254.7481144319, group: 2},
      {x: 25, y: 273.26937891, group: 2},
      {x: 26, y: 289.7712846846, group: 2},
      {x: 27, y: 302.7064280182, group: 2},
      {x: 28, y: 310.5566920373, group: 2},
      {x: 29, y: 312.1365526261, group: 2},
      {x: 30, y: 306.9166423789, group: 2},
      {x: 31, y: 295.2370975146, group: 2},
      {x: 32, y: 278.2957249147, group: 2},
      {x: 33, y: 257.8863530948, group: 2},
      {x: 34, y: 235.9884011484, group: 2},
      {x: 35, y: 214.3754889577, group: 2},
      {x: 36, y: 194.3738468565, group: 2},
      {x: 37, y: 176.8023102953, group: 2},
      {x: 38, y: 162.0443416382, group: 2},
      {x: 39, y: 150.1767308604, group: 2},
      {x: 40, y: 141.0973236636, group: 2},
      {x: 41, y: 134.62740822, group: 2},
      {x: 42, y: 130.5743549116, group: 2},
      {x: 43, y: 128.7722520676, group: 2},
      {x: 44, y: 129.0993599553, group: 2},
      {x: 45, y: 131.4817891569, group: 2},
      {x: 46, y: 135.8927768462, group: 2},
      {x: 47, y: 142.3432011917, group: 2},
      {x: 48, y: 150.8680542095, group: 2},
      {x: 49, y: 161.5070188829, group: 2},
      {x: 50, y: 174.2773448391, group: 2},
      {x: 51, y: 189.1379266957, group: 2},
      {x: 52, y: 205.9433556473, group: 2},
      {x: 53, y: 224.3896840051, group: 2},
      {x: 54, y: 243.9585451392, group: 2},
      {x: 55, y: 263.8741985083, group: 2},
      {x: 56, y: 283.0985536523, group: 2},
      {x: 57, y: 300.3991674263, group: 2},
      {x: 58, y: 314.5268441257, group: 2},
      {x: 59, y: 324.5204311309, group: 2},
      {x: 60, y: 330.1129143488, group: 2},
      {x: 61, y: 332.1554741657, group: 2},
      {x: 62, y: 332.9493050171, group: 2},
      {x: 63, y: 336.4252997306, group: 2},
      {x: 64, y: 348.2407500015, group: 2},
      {x: 65, y: 376.0026876431, group: 2},
      {x: 66, y: 429.8946269276, group: 2},
      {x: 67, y: 523.9730241545, group: 2},
      {x: 68, y: 678.3820972919, group: 2},
      {x: 69, y: 922.7979417641, group: 2},
      {x: 70, y: 1301.5913051033, group: 2},
      {x: 71, y: 1881.4729752258, group: 2},
      {x: 72, y: 2762.7595567146, group: 2},
      {x: 73, y: 4095.676125677, group: 2},
      {x: 74, y: 6102.5950491493, group: 2},
      {x: 75, y: 9101.0369387489, group: 2},
      {x: 76, y: 13474.5660527577, group: 2},
      {x: 77, y: 19088.8321404177, group: 2},
      {x: 78, y: 19551.8076141961, group: 2},
      {x: 79, y: 4795.007071757, group: 2},
      {x: 80, y: 566.4382445881, group: 2},
      {x: 81, y: 217.4137567207, group: 2},
      {x: 82, y: 199.0362380355, group: 2},
      {x: 83, y: 212.1516699485, group: 2},
      {x: 84, y: 230.0308998971, group: 2},
      {x: 85, y: 249.0740423479, group: 2},
      {x: 86, y: 267.8972535702, group: 2},
      {x: 87, y: 285.151201378, group: 2},
      {x: 88, y: 299.3138120889, group: 2},
      {x: 89, y: 308.8261391313, group: 2},
      {x: 90, y: 312.3673533001, group: 2},
      {x: 91, y: 309.1823726696, group: 2},
      {x: 92, y: 299.3415812284, group: 2},
      {x: 93, y: 283.803857343, group: 2},
      {x: 94, y: 264.2240562587, group: 2},
      {x: 95, y: 242.5705326127, group: 2},
      {x: 96, y: 220.7113284869, group: 2},
      {x: 97, y: 200.120095062, group: 2},
      {x: 98, y: 181.7643128414, group: 2},
      {x: 99, y: 166.1454063831, group: 2},
      {x: 100, y: 153.4173345228, group: 2}
  ];
  
  var dataset = new vis.DataSet(items);
  var options = {
    	start: 0,
    	end: 100
  };
  var Graph2d = new vis.Graph2d(container, dataset, options);
  
</script>
<script src="multiline.js" charset="utf-8"></script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js