TinySvgPlot/rand.html at main · messier433/TinySvgPlot · 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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
<title>plot test</title>
</head>
<body style="margin: 0px;padding:0px">

  <div id="drawing" style="width:100%;height:calc(100vh - 4px)"></div>

  <script src="https://messier433.github.io/TinySvgPlot/plotSvgMin.js"></script>
  <!-- <script src="plotSvgMin.js"></script>-->
  <script>
  function linspace(start, increment, stop) {
      numel = Math.floor((stop-start)/increment)+1;
      out = Array(numel);

      for(idx=0; idx < numel; ++idx){
          out[idx] = start + increment*idx;
      };
      return out;
  };

  function linearFit(x,y) {
    let sumx = 0;
    let sumy = 0;
    let sumxy = 0;
    let sumx2 = 0;
    for(let idx =0; idx < x.length;++idx) {
        sumx += x[idx];
        sumy += y[idx];
        sumxy += x[idx]*y[idx];
        sumx2 += x[idx]*x[idx];
    };
     const k = (sumxy- sumx*sumy/x.length) / (sumx2 - sumx*sumx/x.length);
     const d = (sumy-k*sumx) / x.length;

     return [k,d];
  };

   x = linspace(0,1, 50);
   sigma = 1;
   k = 0.1;
   d = 10;
   y = x.map((val) => k*val + d + sigma*Math.sqrt(12)*(Math.random()-0.5));

   [k_est, d_est] = linearFit(x,y);
   y_est = x.map((val) => k_est*val + d_est);

   y = y.concat(y_est);

  const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
  const txt = document.createElementNS("http://www.w3.org/2000/svg", "text");
  txt.setAttribute("fill", "black");
  txt.setAttribute("stroke-width", "1");
  txt.setAttribute("font-size", 12);
  txt.setAttribute("font-family", "Courier");
  group.append(txt);
  const line0 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
  line0.append(document.createTextNode("Estimated:"));
  const line1 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
  line1.append(document.createTextNode("k: " + k_est));
  line1.setAttribute("x", 0);
  line1.setAttribute("dy", 14);
  const line2 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
  line2.append(document.createTextNode("d: " + d_est));
  line2.setAttribute("x", 0);
  line2.setAttribute("dy", 14);
  txt.append(line0);
  txt.append(line1);
  txt.append(line2);

  const optParam = {title:"Random data",
                    subtitle:"with linear fit",
                    xlabel: "Sample index",
                    ylabel: "Value",
                    style: ["*", "-."],
                    marker:  ["x"],
                    legend: {
                        names: ["Raw data", "Linear fit"],
                        x: 4,
                        y: 4,
                        anchor: ["left", "top"],
                        ref: ["in", "in"],
                        boxed: 1,
                        fill: "#abb"
                    },
                    add: [
                        {
                            group: group,
                            x: 4,
                            y: 4,
                            anchor: ["right", "bottom"],
                            ref: ["in", "in"],
                            boxed: 1,
                            fill: "#abb"
                        }
                    ],
                    linTip: true,
                    };


   plotSvg("drawing", x, y, 2, optParam);

  </script>
</body>
</html>