Built with blockbuilder.org
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: 20, right: 20, bottom: 30, left: 40},
width = 1000,
height = 500;
// graph dimention
var gf_w = width -margin.left - margin.right;
var gf_h = height - margin.top - margin.bottom;
// 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)
}
})
});
// linear regression function
function regression(xdt, ydt) {
var TSum = function(xi, xj) { return xi + xj; };
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 A = xycovar / xcovar;
var B = ymean - (xmean * A);
// Y =A*X+B
return [A, B];
}
// scale
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]);
// svp creation
var svg = d3.select("svg")
.attr("width", 1000)
.attr("height", 500);
//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);
var x1_s = x(0),
y1_s = setosa[0] * x1 + setosa[1],
x2_s = x(d3.max(Iris_setosa_y)),
y2_s = setosa[0] * x2 + setosa[1];
var reg1 = [x1_s, y1_s, x2_s, y2_s];
// graph 1
var title = svg.append("g")
.attr("class", "title")
.attr("transform", "translate(" + 60 + "," +0 + ")");
title.append("text")
.attr("x", 10)
.attr("y", 105)
.text("Longueur de sépale en fonction de la longueur de pétale (en cm)")
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
// Add graph.
var graph = svg.append("g")
.attr("class", 'graph')
.attr("transform", "translate(" + margin.left + "," + +(margin.top + 60) + ")");
graph.selectAll(".dot").data(iris).enter()
.append("path")
.attr("class", "dot")
.attr("d", function(d) {
return symbol.type(d3.symbols[ scales(d.species) ])(); })
.attr("transform", function(d,i) {
return "translate(" + x(d.petal_length) + ", " + y(d.sepal_length) + ")"})
.attr("fill", function(d){
return color(d.species)})
// Add the X Axis.
graph.append("g")
.attr("transform", "translate(0," + graph_height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis.
graph.append("g")
.call(d3.axisLeft(y));
// Add regression line
graph.selectAll(".trend").data([reg1]).enter()
.append("line")
.attr("class", "trend")
.attr("x1_s", function(d) { return x(d[0]) })
.attr("y1_s", function(d) { return y(d[1]) })
.attr("x2_s", function(d) { return x(d[2]) })
.attr("y2_s", function(d) { return y(d[3]) })
.attr('stroke', "red")
});
})
})
// Add scale
// Add svg
https://d3js.org/d3.v4.min.js