gslider/test.html at master · itascaconsulting/gslider · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
  <head>
      <style>
       .line {fill: none; stroke-width: 2.5px;}
       .flex-container {display: flex; flex-wrap: nowrap;}
      </style>
  </head>
  <body>
        <p><em>Example slider application</em></p>
      <hr>
      <div class="flex-container">
          <div id="inputs"></div> <div id="results"></div>
      </div>

    <script src="./d3.v5.min.js" charset="utf-8"></script>
    <script src="./d3-simple-slider.js" charset="utf-8"></script>
    <script src="./slidenplot.js" charset="utf-8"></script>
    <script>
     var my_app = SlidenPlotApp();
     my_app.add_float_slider("#inputs", "A", "Amplitude", 1, 0.1, 10);
     my_app.add_float_slider("#inputs", "f", "Frequency", 2, 0.1, 10);
     my_app.add_float_slider("#inputs", "p", "Phase", 0, 0, 2*Math.PI);
     my_app.add_radio_buttons("#inputs", "ftype", "Function", ["Sine", "Cosine"], "Sine");
     my_app.add_check_box("#inputs", "damping", "Damping", true);

     function my_callback(data) {
         var n = 200, x = [], y = [], y2 = [];
         for (var i=0; i<n; i++) {
             var lx = i/(n+0)*4*Math.PI,
                 func = data.ftype === "Sine" ? Math.sin : Math.cos,
                 ly = data.A*func(data.f*lx+data.p);
             if (data.damping) ly = Math.exp(-lx/10)*ly;
             x.push(lx);
             y.push(ly);
             y2.push(10*ly/(lx+1))
         }
         plot_xy("#results", [[x, y]],
                 options={ legend: [data.ftype],
                           title: "Sample Plot",
                           x_label: "Time [s]",
                           y_label: "Pressure [Pa]",
                           //right_y_scale: 10,
                           grid: true,
                           right_data: [[x,y2]],
                           y2_label: "Hi mom",
                           axhlines: [-0.5, 0.5],
                           axvlines: [2.2, 3.3],
                           ax2hlines: [0],
                           ax2hline_color: 3,
                 });
     }
     my_app.add_callback(my_callback);
    </script>
  </body>
</html>