nelder_mead_1d.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Nelder Mead in One Dimension</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-md-6 col-md-offset-3">
  44. <div id ="simplex1d" >
  45. <div style="text-align:center"><div style="display:inline-block;">
  46. <h4>
  47. <div class="btn-group">
  48. <button id="fx" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  49. <span>
  50. \(f(x)\)
  51. </span>
  52. <span class="caret"></span>
  53. </button>
  54. <ul class="dropdown-menu" role="menu">
  55. <li><a class="function_smooth">
  56. \(log{(1 + \left|x\right|^{2+\sin x})}\)
  57. </a></li>
  58. <li><a class="function_noisy">
  59. \((2+\frac{\sin{50x}}{50}) ({\arctan x})^2\)
  60. </a></li>
  61. <li><a class="function_floor">
  62. \(\left|\left\lfloor x \right\rfloor - 50\right|\)
  63. </a></li>
  64. </ul>
  65. </div>
  66. <span>
  67. \(=\)
  68. </span>
  69. <span class="function_label">
  70. \(\log{(1 + \left|x\right|^{2+\sin x})}\)
  71. </span>
  72. </h4>
  73. </div></div>
  74. <div id="vis"></div>
  75. <div class="row">
  76. <form class="form-inline" role="form">
  77. <div class="form-group col-xs-6 col-md-6">
  78. <div style="text-align:center"><div style="display:inline-block;">
  79. <label class="r-only" for="contraction">Contraction \(\psi\)
  80. <span id="contractionvalue">= 1.0x</span>
  81. </label>
  82. </div></div>
  83. <div id="contraction"></div>
  84. </div>
  85. <div class="form-group col-xs-6 col-md-6">
  86. <div style="text-align:center"><div style="display:inline-block;">
  87. <label class="r-only" for="expansion">Expansion \(\chi\)
  88. <span id="expansionvalue">= 1.0x</span>
  89. </label>
  90. </div></div>
  91. <div id="expansion"></div>
  92. </div>
  93. <!--
  94. <div class="form-group col-xs-4 col-md-4">
  95. <div style="text-align:center"><div style="display:inline-block;">
  96. <label class="r-only" for="nonzerodelta">Nonzero \(\Delta\)</label>
  97. </div></div>
  98. <div id="nonzerodelta"></div>
  99. </div>
  100. -->
  101. </form>
  102. </div>
  103. <div class="row">
  104. <div style="text-align:center"><div style="display:inline-block;">
  105. <div class ="iterations"></div>
  106. </div></div>
  107. </div>
  108. <div class="row">
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </body>
  114. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
  115. <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
  116. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  117. <script src="../build/fmin.js"></script>
  118. <script src="../build/fmin_vis.js"></script>
  119. <script>
  120. var nelder_mead_1d_plot = new fmin_vis.NelderMead1d(d3.select("#simplex1d"));
  121. </script>
  122. <script type="text/x-mathjax-config">
  123. MathJax.Hub.Config({
  124. showMathMenu: false,
  125. extensions: ["tex2jax.js"],
  126. jax: ["input/TeX", "output/HTML-CSS"],
  127. tex2jax: {
  128. inlineMath: [ ['$','$'], ["\\(","\\)"] ],
  129. displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
  130. processEscapes: true
  131. },
  132. "HTML-CSS": { availableFonts: ["TeX"] }
  133. });
  134. </script>
  135. <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js"></script>
  136. </html>