cities.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Multidimensional Scaling Example</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="">
  8. <meta name="author" content="Ben Frederickson">
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
  10. <style>
  11. .ticks {
  12. font: 10px sans-serif;
  13. }
  14. .track,
  15. .track-inset,
  16. .track-overlay {
  17. stroke-linecap: round;
  18. }
  19. .track {
  20. stroke: #000;
  21. stroke-opacity: 0.3;
  22. stroke-width: 10px;
  23. }
  24. .track-inset {
  25. stroke: #ddd;
  26. stroke-width: 8px;
  27. }
  28. .track-overlay {
  29. pointer-events: stroke;
  30. stroke-width: 50px;
  31. cursor: crosshair;
  32. }
  33. .handle {
  34. fill: #fff;
  35. stroke: #000;
  36. stroke-opacity: 0.5;
  37. stroke-width: 1.25px;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div class="container">
  43. <div class = "row"><div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
  44. <div id = "cities">
  45. <div style="text-align:center"><div style="display:inline-block;">
  46. <button type="button" class="btn btn-default randomize">
  47. <span class="glyphicon glyphicon-refresh"></span> Randomize Initial
  48. </button>
  49. <div class="btn-group">
  50. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  51. <span class="algorithm_label">Conjugate Gradient</span> <span class="caret"></span>
  52. </button>
  53. <ul class="dropdown-menu" role="menu">
  54. <li><a class="algo_neldermead">Nelder-Mead</a></li>
  55. <li><a class="algo_gd">Gradient Descent</a></li>
  56. <li><a class="algo_gdls">Gradient Descent w/ Line Search</a></li>
  57. <li><a class="algo_cg">Conjugate Gradient</a></li>
  58. </ul>
  59. </div>
  60. <div class="btn-group">
  61. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  62. <span class="count_label">20 Cities</span> <span class="caret"></span>
  63. </button>
  64. <ul class="dropdown-menu" role="menu">
  65. <li><a class="count5">5 Cities</a></li>
  66. <li><a class="count10">10 Cities</a></li>
  67. <li><a class="count15">15 Cities</a></li>
  68. <li><a class="count20">20 Cities</a></li>
  69. <li><a class="count25">25 Cities</a></li>
  70. </ul>
  71. </div>
  72. <div class="btn-group">
  73. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  74. <span class="speed_label">500ms / Iteration</span> <span class="caret"></span>
  75. </button>
  76. <ul class="dropdown-menu" role="menu">
  77. <li><a class="speed_500">500ms / Iteration</a></li>
  78. <li><a class="speed_100">100ms / Iteration</a></li>
  79. <li><a class="speed_50">50ms / Iteration</a></li>
  80. <li><a class="speed_25">25ms / Iteration</a></li>
  81. </ul>
  82. </div>
  83. </div></div>
  84. <svg></svg>
  85. <div class="row learningrateslider">
  86. <form class="form-inline" role="form">
  87. <div class="form-group col-xs-12 col-md-12">
  88. <div style="text-align:center"><div style="display:inline-block;">
  89. <label class="r-only" for="learningrate">Learning Rate
  90. <span id="learningratevalue">= 0.002</span>
  91. </label>
  92. </div></div>
  93. <div id="learningrate"></div>
  94. </div>
  95. </form>
  96. </div>
  97. <div style="text-align:center"><div style="display:inline-block;">
  98. <div class="row">
  99. <span class ="iterations"></span>
  100. </div>
  101. </div></div>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </body>
  107. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  108. <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
  109. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  110. <script src="./cities_data.js"></script>
  111. <script src="../build/fmin.js"></script>
  112. <script src="../build/fmin_vis.js"></script>
  113. <script>
  114. fmin_vis.createCitiesAnimation(d3.select("#cities"));
  115. </script>
  116. </html>