Построить линию регрессии на диаграмме рассеяния из коэффициентов регрессии - PullRequest
Новая
       4

Построить линию регрессии на диаграмме рассеяния из коэффициентов регрессии

1 голос
/ 06 июня 2019

Я пытаюсь нарисовать линии регрессии, используя следующее:

https://observablehq.com/@harrystevens/introducing-d3-regression#linear

Я следовал за руководством и добавил следующий код, 

dataLinear = [{x: 8, y: 3},{x: 2, y: 10},{x: 11, y: 3},{x: 6, y: 6},{x: 5, y: 8},{x: 4, y: 12},{x: 12, y: 1},{x: 9, y: 4},{x: 6, y: 9},{x: 1, y: 14}]

linearRegression = d3.regressionLinear()
   .x(d => d.x)
   .y(d => d.y)
   .domain([-1.7, 16]);
res = linearRegression(dataLinear)
console.log(res)

Теперь я возвращаю коэффициенты как: 


0: Array [ -1.7, 15.961993243243242 ]
​
1: Array [ 16, -3.621621621621621 ]
​
a: -1.1064189189189189
​
b: 14.08108108108108
​
length: 2
​
predict: function S()
​
rSquared: 0.8731378215564962

Как мне построить линию поверх моей диаграммы рассеяния, используя коэффициенты?

Edit:

Прежде чем понять, что такое генератор строк, я использовал следующий код: 

         var a_reg_line = svg.append("svg:line")
        .attr("x1", xScale(0))
        .attr("y1", yScale(res.b))
        .attr("x2", xScale(10))
        .attr("y2", yScale( (10*res.a) + res.b ))

1 Ответ

1 голос
/ 06 июня 2019

Похоже, библиотека построена так, что вы можете передать ее возврат res генератору d3.line: 

...
let line = d3.line()
  .x((d) => x(d[0]))
  .y((d) => y(d[1]));

svg.append("path")
  .datum(res)
  .attr("d", line)
...

Вот полный упрощенный пример построения графика с помощью d3: 

<!DOCTYPE html>
<html>

<head>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/HarryStevens/d3-regression@master/dist/d3-regression.min.js"></script>

</head>

<body>
  <script>
    let dataLinear = [{
      x: 8,
      y: 3
    }, {
      x: 2,
      y: 10
    }, {
      x: 11,
      y: 3
    }, {
      x: 6,
      y: 6
    }, {
      x: 5,
      y: 8
    }, {
      x: 4,
      y: 12
    }, {
      x: 12,
      y: 1
    }, {
      x: 9,
      y: 4
    }, {
      x: 6,
      y: 9
    }, {
      x: 1,
      y: 14
    }]

    let linearRegression = d3.regressionLinear()
      .x(d => d.x)
      .y(d => d.y)
      .domain([-1.7, 16]);
    let res = linearRegression(dataLinear)

    let margin = {
        top: 30,
        right: 20,
        bottom: 30,
        left: 50
      },
      width = 600 - margin.left - margin.right,
      height = 270 - margin.top - margin.bottom;

    let x = d3.scaleLinear().range([0, width]);
    let y = d3.scaleLinear().range([height, 0]);

    let svg = d3.select("body")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

    x.domain(d3.extent(dataLinear, (d) => d.x));
    y.domain(d3.extent(dataLinear, (d) => d.y));

    // Add the valueline path.
    svg.selectAll("circle")
      .data(dataLinear)
      .enter()
      .append("circle")
      .attr("r", 5)
      .style("fill", "steelblue")
      .attr("cx", (d) => x(d.x))
      .attr("cy", (d) => y(d.y));

    let line = d3.line()
      .x((d) => x(d[0]))
      .y((d) => y(d[1]));

    svg.append("path")
      .datum(res)
      .attr("d", line)
      .style("stroke", "steelblue")
      .style("stroke-width", "2px");

    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    svg.append("g")
      .call(d3.axisLeft(y));
  </script>
</body>

</html>

Квадратная регрессия: 

<!DOCTYPE html>
<html>

<head>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/HarryStevens/d3-regression@master/dist/d3-regression.min.js"></script>

</head>

<body>
  <script>
    let dataLinear = [{
      x: 8,
      y: 3
    }, {
      x: 2,
      y: 10
    }, {
      x: 11,
      y: 3
    }, {
      x: 6,
      y: 2
    }, {
      x: 5,
      y: 2
    }, {
      x: 4,
      y: 12
    }, {
      x: 12,
      y: 1
    }, {
      x: 9,
      y: 4
    }, {
      x: 6,
      y: 9
    }, {
      x: 1,
      y: 14
    }]

    let quadRegression = d3.regressionQuad()
      .x(d => d.x)
      .y(d => d.y)
      .domain([-1.7, 16]);
    let res = quadRegression(dataLinear)

    let margin = {
        top: 30,
        right: 20,
        bottom: 30,
        left: 50
      },
      width = 600 - margin.left - margin.right,
      height = 270 - margin.top - margin.bottom;

    let x = d3.scaleLinear().range([0, width]);
    let y = d3.scaleLinear().range([height, 0]);

    let svg = d3.select("body")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

    x.domain(d3.extent(dataLinear, (d) => d.x));
    y.domain(d3.extent(dataLinear, (d) => d.y));

    // Add the valueline path.
    svg.selectAll("circle")
      .data(dataLinear)
      .enter()
      .append("circle")
      .attr("r", 5)
      .style("fill", "steelblue")
      .attr("cx", (d) => x(d.x))
      .attr("cy", (d) => y(d.y));

    let line = d3.line()
      .x((d) => x(d[0]))
      .y((d) => y(d[1]));

    svg.append("path")
      .datum(res)
      .attr("d", line)
      .style("fill", "none")
      .style("stroke", "steelblue")
      .style("stroke-width", "2px");

    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    svg.append("g")
      .call(d3.axisLeft(y));
  </script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...