Built with blockbuilder.org
forked from giguerre's block: Regression
forked from anonymous's block: Regression
xxxxxxxxxx
<head>
<meta charset="utf-8">
<title>D3 Scatterplot et scatter plot </title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// margin definition
var margin = {top: 50, right: 100, bottom: 20, left: 40},
widthm = 1000,
heightm = 500;
// Get data
// variables
var Iris_setosa_x=[],
Iris_setosa_y =[],
Iris_virginica_x =[],
Iris_virginica_y=[],
Iris_vrscolor_x=[],
Iris_vrscolor_y=[];
var iris;
d3.csv("iris.csv", function(data)
{
iris = data;
data.forEach(function(d){
if (d["species"] == "virginica")
{
Iris_virginica_x.push(+d.petal_length)
Iris_virginica_y.push(+d.sepal_length)
}
else if (d["species"] == "setosa")
{
Iris_setosa_x.push(+d.petal_length)
Iris_setosa_y.push(+d.sepal_length)
}
else
{
Iris_vrscolor_x.push(+d.petal_length)
Iris_vrscolor_y.push(+d.sepal_length)
}
})
// scale
// graph dimention
var gf_w = widthm -margin.left - margin.right;
var gf_h = heightm - margin.top - margin.bottom;
var xScale = d3.scaleLinear()
.domain([d3.min(iris, function(d) { return d["sepallength"]; }), d3.max(iris, function(d) { return d["sepallength"]; })])
.range([0, gf_w]);
var yScale = d3.scaleLinear()
.domain([d3.min(iris, function(d) { return d["sepalwidth"]; }), d3.max(iris, function(d) { return d["sepalwidth"]; })])
.range([gf_h, 0]);
//getting the parameter of regression line
var setosa = regression(Iris_setosa_x, Iris_setosa_y);
var virginica = regression(Iris_virginica_x, Iris_virginica_y);
var vrscolor = regression(Iris_vrscolor_x, Iris_vrscolor_y);
// linear regression function ( )
function regression(xdt, ydt) {
// learned from a colleague
var TSum = function(x1, x2) {
return x1 + x2; };
var xmean = xdt.reduce(TSum) * 1.0 / xdt.length;
var ymean = ydt.reduce(TSum) * 1.0 / ydt.length;
var xcovar = xdt.map(function(d) { return Math.pow(d - xmean, 2); })
.reduce(TSum);
var ycovar = ydt.map(function(d) { return Math.pow(d - ymean, 2); })
.reduce(TSum);
var xycovar = ydt.map(function(d, i) { return (d - ymean) * (xdt[i] - xmean); })
.reduce(TSum);
var delta = xycovar / xcovar;
var b = ymean - (xmean * delta);
return [delta, b];
}
// setosa parametr
var x1_s = xScale(0),
y1_s = setosa[0] * x1_s + setosa[1],
x2_s = xScale(d3.max(iris, function(d) { return d.sepal_length; })),
y2_s = setosa[0] * x2_s + setosa[1];
// svp creation
var svg = d3.select("svg")
.attr("width", widthm + margin.left+ margin.right)
.attr("height", heightm + margin.top + margin.bottom)
.append("g");
// graphe
// regression line
//setosa
svg.append("line")
.style("stroke", "blue")
.attr("x1", x1_s )
.attr("y1" , y1_s)
.attr("x2", x2_s )
.attr("y2", y2_s);
// It won't draw the regresion line, tried several parameters.
});
</script>
</body>
https://d3js.org/d3.v4.min.js