适合最佳散点图的回归

Question

我绘制了以下散点图，我想在我的数据中添加一个线性多项式回归（最适合的回归）。有什么简单的方法吗？

我的图表很简单，由 c3 库 v4 完成（取决于 d3 v3）：

            <div id="chart2"></div>
            <script>
                var chart = c3.generate({
                    bindto: '#chart2',
                    data: {
                        url: '../static/CSV/Chart_data/grades_access.csv'+(new Date).getTime(),
                        x:'Access_grade',
                        type: 'scatter'
                    },
                    axis: {
                        y: {
                            label: {
                                text:"Average grade",
                                position: "outer-middle"
                            },
                            min:1,
                            max:9
                        },
                        x: {
                            label: {
                                text:"Access grade PAU",
                                position: "outer-center"
                            },
                            min:9,
                            max:14
                        }
                    },
                    size: {
                        height: 400,
                        width: 800
                    },
                    zoom: {
                        enabled: true
                    },
                    legend: {
                        show: true,
                        position: 'inset',
                        inset: {
                            anchor: 'top-right',
                            x: 20,
                            y: 300,
                            step: 1
                        }
                    }     
                }); 
            </script>

grades_access.csv 是：

Access_grade,Subject
9.85,2.5
10.64,8.1
10.0,3.2
10.92,4.0
11.69,2.9
11.79,7.8
11.03,5.0
10.47,6.2
...

谁能给我一个提示？我想要一个简单的东西，不要太复杂。但如果可能的话，使用回归方程:) 谢谢！

Answer 1

我已经为otherlibraries 回答了几次这个问题，但从来没有c3.js。这是使用简单的最小二乘法拟合线性回归的代码。它做到了onrendered，因此您仍然可以使用c3 获取和解析您的 csv 文件的能力：

<div id="chart2"></div>
<script>
    var chart = c3.generate({
      bindto: '#chart2',
      data: {
        url: 'data.csv',
        x: 'Access_grade',
        type: 'scatter'
      },
      axis: {
        y: {
          label: {
            text: "Average grade",
            position: "outer-middle"
          },
          min: 1,
          max: 9
        },
        x: {
          label: {
            text: "Access grade PAU",
            position: "outer-center"
          },
          min: 9,
          max: 14
        }
      },
      size: {
        height: 400,
        width: 800
      },
      zoom: {
        enabled: true
      },
      legend: {
        show: true,
        position: 'inset',
        inset: {
          anchor: 'top-right',
          x: 20,
          y: 300,
          step: 1
        }
      },

      onrendered: function(c) {
        var points = chart.data()[0].values.map((d) => [d.x, d.value]),
          slopeIntercept = slopeAndIntercept(points),
          fitPoints = chart.data()[0].values.map((d) => slopeIntercept.slope * d.x + slopeIntercept.intercept);

        chart.load({
          columns: [
            ['Regression'].concat(fitPoints)
          ],
          type: 'line'
        });
      }
    });

    // simple linear regression
    slopeAndIntercept = function(points) {
      var rV = {},
        N = points.length,
        sumX = 0,
        sumY = 0,
        sumXx = 0,
        sumYy = 0,
        sumXy = 0;

      // can't fit with 0 or 1 point
      if (N < 2) {
        return rV;
      }

      for (var i = 0; i < N; i++) {
        var x = points[i][0],
          y = points[i][1];
        sumX += x;
        sumY += y;
        sumXx += (x * x);
        sumYy += (y * y);
        sumXy += (x * y);
      }

      // calc slope and intercept
      rV['slope'] = ((N * sumXy) - (sumX * sumY)) / (N * sumXx - (sumX * sumX));
      rV['intercept'] = (sumY - rV['slope'] * sumX) / N;
      rV['rSquared'] = Math.abs((rV['slope'] * (sumXy - (sumX * sumY) / N)) / (sumYy - ((sumY * sumY) / N)));

      return rV;
    }
</script>

这是一个正在运行的example。