Plot Regression Line On A Scatter Plot From Regression Coefficients
I am trying to draw regression lines using the following: https://observablehq.com/@harrystevens/introducing-d3-regression#linear I followed the tutorial and added the following co
Solution 1:
Looks like the library is built so that you can pass its return res to a d3.line generator:
...
let line = d3.line()
.x((d) =>x(d[0]))
.y((d) =>y(d[1]));
svg.append("path")
.datum(res)
.attr("d", line)
...
Here's a complete simplistic example of plotting it with d3:
<!DOCTYPE html><html><head><scriptsrc="https://d3js.org/d3.v5.min.js"></script><scriptsrc="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>Quad regression:
<!DOCTYPE html><html><head><scriptsrc="https://d3js.org/d3.v5.min.js"></script><scriptsrc="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>
Post a Comment for "Plot Regression Line On A Scatter Plot From Regression Coefficients"