example.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <html><head>
  2. <meta charset="utf-8">
  3. <title>contour test</title>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta name="author" content="Ben Frederickson">
  6. <style>
  7. .axis path,
  8. .axis line {
  9. fill: none;
  10. stroke: #666;
  11. }
  12. .axis {
  13. font-family: "helvetica-nueue";
  14. font-size: 10px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div id="contour_graph" style="width:600px"> </div>
  20. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  21. <script src="./build/contour_plot.js"></script>
  22. <script>
  23. function himmelblau(x, y) {
  24. return (x * x + y - 11) * ( x * x + y - 11) + (x + y * y - 7) * (x + y * y - 7);
  25. }
  26. function banana(x, y) {
  27. return (1 - x) * (1 - x) + 100 * (y - x * x) * ( y - x * x)
  28. }
  29. function beale(x, y) {
  30. return Math.pow(1.5 - x + x*y, 2) + Math.pow(2.25 - x + x*y*y, 2) +
  31. Math.pow(2.625 - x + x*y*y*y, 2);
  32. }
  33. function booth(x, y) {
  34. return Math.pow(x + 2 * y - 7, 2) + Math.pow(2 * x + y - 5, 2);
  35. }
  36. function matyas(x, y) {
  37. return .26 * (x * x + y * y) - .48 * x * y;
  38. }
  39. function goldsteinPrice(x, y) {
  40. return (1. + Math.pow(x + y + 1, 2) *
  41. (19 - 14*x + 3*x*x - 14 * y + 6 * x * x + 3 * y * y))
  42. * (30 + Math.pow(2*x-3*y, 2)*(18 - 32*x + 12 * x * x + 48*y - 36 * x * y + 27 * y* y));
  43. }
  44. var plot = contour_plot.ContourPlot()
  45. .f(himmelblau)
  46. .drawAxis(false)
  47. .xDomain([-6, 6])
  48. .yDomain([6, -6])
  49. .contourCount(12)
  50. .minima([{x : 3.584428, y : -1.848126},
  51. {x : -2.805118, y : 3.131312},
  52. {x : -3.779310, y : -3.283186},
  53. {x : 3, y : 2}]);
  54. var elements = plot(d3.select("#contour_graph"));
  55. </script>
  56. </div></div></div>
  57. </body></html>