Skip to content

Instantly share code, notes, and snippets.

@kabooboo
Last active January 26, 2018 13:28
DM Cours 2 scatterplot iris fork cours 3
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis path, .axis line {
/* fill: none;
stroke: #000;
shape-rendering: crispEdges; */
}
.dot {
stroke: #000;
}
/* setosa */
.fig1 {
stroke: #000;
fill: brown;
}
/* versicolor */
.fig2 {
stroke: #000;
fill: magenta;
}
/* virginica */
.fig3 {
stroke: #000;
fill: cyan;
}
.line {
stroke: #E4002B;
fill: none;
stroke-width: 3;
}
.disabled {
display: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>
d3.csv('iris.csv', function(error, data){
//////////////
// Initialize data regression
//////////////
speciesArray = ['Setosa', 'Versicolor', 'Virginica'];
var n = data.length;
var x_values = data.map(function(el){return +el.petal_length});
var y_values = data.map(function(el){return +el.petal_width});
var x_moy = x_values.reduce(function(a, b) { return a + b; })/n;
var y_moy = y_values.reduce(function(a, b) { return a + b; })/n;
var term1 = 0;
var term2 = 0;
var xr = 0;
var yr = 0;
for (i = 0; i < x_values.length; i++) {
xr = x_values[i] - x_moy;
yr = y_values[i] - y_moy;
term1 += xr * yr;
term2 += xr * xr;
}
var b1 = term1 / term2;
var b0 = y_moy - (b1 * x_moy);
yhat = [];
for (i = 0; i < x_values.length; i++) {
yhat.push(b0 + (x_values[i] * b1));
}
var meanData = [];
for (i = 0; i < y_values.length; i++) {
meanData.push({
"yhat": yhat[i],
"y": y_values[i],
"x": x_values[i]
})
}
//////////////
// Initialize data figures
//////////////
data_1 = [];
data_2 = [];
data_3 = [];
data.forEach(function(el){
if (el.species == "setosa") {
data_1.push(el);
}
if (el.species == "versicolor") {
data_2.push(el);
}
if (el.species == "virginica") {
data_3.push(el);
}
});
//////////////
// Initialize svg
//////////////
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height",500)
.append("g")
.attr("transform", "translate(40,20)");
//////////////
// X Axis
//////////////
var x = d3.scaleLinear().range([0, 900]);
x.domain([0,8]);
var xAxis = d3.axisBottom().scale(x);
svg.append('g')
.attr('transform', 'translate(0,450)')
.attr('class', 'x axis')
.call(xAxis);
svg.append('text')
.attr('x', 900)
.attr('y', 450 - 10)
.attr('text-anchor', 'end')
.attr('class', 'label')
.text('Petal Length');
//////////////
// Y Axis
//////////////
var y = d3.scaleLinear().range([450, 0]);
y.domain([0,4]);
var yAxis = d3.axisLeft()
.scale(y);
svg.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'y axis')
.call(yAxis);
svg.append('text')
.attr('x', 10)
.attr('y', 10)
.attr('class', 'label')
.text('Petal Width');
//////////////
// Droite regression
//////////////
var line = d3.line()
.x(function(d) {return x(d.x)})
.y(function(d){return y(d.yhat)});
svg.append("path")
.datum(meanData)
.attr("class", "line")
.attr("d", line);
//////////////
// Figures
//////////////
var arc1 = d3.symbol().type(d3.symbolStar);
svg.selectAll(".fig1")
.data(data_1)
.enter()
.append("path")
.attr('d',arc1)
.attr("class", "fig fig1")
.attr('transform', function(d) {
return "translate(" + x(d.petal_length) + "," + y(d.petal_width) + ")";
})
var arc2 = d3.symbol().type(d3.symbolDiamond);
svg.selectAll(".dig2")
.data(data_2)
.enter()
.append("path")
.attr('d',arc2)
.attr("class", "fig fig2")
.attr('transform', function(d) {
return "translate(" + x(d.petal_length) + "," + y(d.petal_width) + ")";
})
var arc3 = d3.symbol().type(d3.symbolCross);
svg.selectAll(".fig3")
.data(data_3)
.enter()
.append("path")
.attr('d',arc3)
.attr("class", "fig fig3")
.attr('transform', function(d) {
return "translate(" + x(d.petal_length) + "," + y(d.petal_width) + ")";
})
//////////////
// Legende
//////////////
var legend = svg.selectAll(".legend")
.data(speciesArray)
.enter().append("g")
.attr("class", function(d,i) {return "legend " + d.toLowerCase();})
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
var legendCircle = svg.select(".setosa");
legendCircle
.append("path")
.attr('d',arc1)
.attr("class", "fig1")
.attr('transform', function(d) {
return "translate(891,10)";
})
var clicked = null;
legend.on("click", function(d) {
d3.selectAll(".fig").style("opacity", 1)
console.log(d3.selectAll(".fig"))
if(clicked !== d) {
d3.selectAll(".fig")
.filter(function(e) {
return e.species !== d.toLowerCase()
})
.style("opacity", 0.1)
clicked = d;
} else {
clicked = null;
}
})
var legendSquare = svg.select(".versicolor");
legendSquare
.append("path")
.attr('d',arc2)
.attr("class", "fig2")
.attr('transform', function(d) {
return "translate(891,10)";
})
var legendTriangle = svg.select(".virginica");
legendTriangle
.append("path")
.attr('d',arc3)
.attr("class", "fig3")
.attr('transform', function(d) {
return "translate(891,10)";
})
legend.append("text")
.attr("x", 900 - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
</script>
sepal_length sepal_width petal_length petal_width species
5.1 3.5 1.4 0.2 setosa
4.9 3 1.4 0.2 setosa
4.7 3.2 1.3 0.2 setosa
4.6 3.1 1.5 0.2 setosa
5 3.6 1.4 0.2 setosa
5.4 3.9 1.7 0.4 setosa
4.6 3.4 1.4 0.3 setosa
5 3.4 1.5 0.2 setosa
4.4 2.9 1.4 0.2 setosa
4.9 3.1 1.5 0.1 setosa
5.4 3.7 1.5 0.2 setosa
4.8 3.4 1.6 0.2 setosa
4.8 3 1.4 0.1 setosa
4.3 3 1.1 0.1 setosa
5.8 4 1.2 0.2 setosa
5.7 4.4 1.5 0.4 setosa
5.4 3.9 1.3 0.4 setosa
5.1 3.5 1.4 0.3 setosa
5.7 3.8 1.7 0.3 setosa
5.1 3.8 1.5 0.3 setosa
5.4 3.4 1.7 0.2 setosa
5.1 3.7 1.5 0.4 setosa
4.6 3.6 1 0.2 setosa
5.1 3.3 1.7 0.5 setosa
4.8 3.4 1.9 0.2 setosa
5 3 1.6 0.2 setosa
5 3.4 1.6 0.4 setosa
5.2 3.5 1.5 0.2 setosa
5.2 3.4 1.4 0.2 setosa
4.7 3.2 1.6 0.2 setosa
4.8 3.1 1.6 0.2 setosa
5.4 3.4 1.5 0.4 setosa
5.2 4.1 1.5 0.1 setosa
5.5 4.2 1.4 0.2 setosa
4.9 3.1 1.5 0.1 setosa
5 3.2 1.2 0.2 setosa
5.5 3.5 1.3 0.2 setosa
4.9 3.1 1.5 0.1 setosa
4.4 3 1.3 0.2 setosa
5.1 3.4 1.5 0.2 setosa
5 3.5 1.3 0.3 setosa
4.5 2.3 1.3 0.3 setosa
4.4 3.2 1.3 0.2 setosa
5 3.5 1.6 0.6 setosa
5.1 3.8 1.9 0.4 setosa
4.8 3 1.4 0.3 setosa
5.1 3.8 1.6 0.2 setosa
4.6 3.2 1.4 0.2 setosa
5.3 3.7 1.5 0.2 setosa
5 3.3 1.4 0.2 setosa
7 3.2 4.7 1.4 versicolor
6.4 3.2 4.5 1.5 versicolor
6.9 3.1 4.9 1.5 versicolor
5.5 2.3 4 1.3 versicolor
6.5 2.8 4.6 1.5 versicolor
5.7 2.8 4.5 1.3 versicolor
6.3 3.3 4.7 1.6 versicolor
4.9 2.4 3.3 1 versicolor
6.6 2.9 4.6 1.3 versicolor
5.2 2.7 3.9 1.4 versicolor
5 2 3.5 1 versicolor
5.9 3 4.2 1.5 versicolor
6 2.2 4 1 versicolor
6.1 2.9 4.7 1.4 versicolor
5.6 2.9 3.6 1.3 versicolor
6.7 3.1 4.4 1.4 versicolor
5.6 3 4.5 1.5 versicolor
5.8 2.7 4.1 1 versicolor
6.2 2.2 4.5 1.5 versicolor
5.6 2.5 3.9 1.1 versicolor
5.9 3.2 4.8 1.8 versicolor
6.1 2.8 4 1.3 versicolor
6.3 2.5 4.9 1.5 versicolor
6.1 2.8 4.7 1.2 versicolor
6.4 2.9 4.3 1.3 versicolor
6.6 3 4.4 1.4 versicolor
6.8 2.8 4.8 1.4 versicolor
6.7 3 5 1.7 versicolor
6 2.9 4.5 1.5 versicolor
5.7 2.6 3.5 1 versicolor
5.5 2.4 3.8 1.1 versicolor
5.5 2.4 3.7 1 versicolor
5.8 2.7 3.9 1.2 versicolor
6 2.7 5.1 1.6 versicolor
5.4 3 4.5 1.5 versicolor
6 3.4 4.5 1.6 versicolor
6.7 3.1 4.7 1.5 versicolor
6.3 2.3 4.4 1.3 versicolor
5.6 3 4.1 1.3 versicolor
5.5 2.5 4 1.3 versicolor
5.5 2.6 4.4 1.2 versicolor
6.1 3 4.6 1.4 versicolor
5.8 2.6 4 1.2 versicolor
5 2.3 3.3 1 versicolor
5.6 2.7 4.2 1.3 versicolor
5.7 3 4.2 1.2 versicolor
5.7 2.9 4.2 1.3 versicolor
6.2 2.9 4.3 1.3 versicolor
5.1 2.5 3 1.1 versicolor
5.7 2.8 4.1 1.3 versicolor
6.3 3.3 6 2.5 virginica
5.8 2.7 5.1 1.9 virginica
7.1 3 5.9 2.1 virginica
6.3 2.9 5.6 1.8 virginica
6.5 3 5.8 2.2 virginica
7.6 3 6.6 2.1 virginica
4.9 2.5 4.5 1.7 virginica
7.3 2.9 6.3 1.8 virginica
6.7 2.5 5.8 1.8 virginica
7.2 3.6 6.1 2.5 virginica
6.5 3.2 5.1 2 virginica
6.4 2.7 5.3 1.9 virginica
6.8 3 5.5 2.1 virginica
5.7 2.5 5 2 virginica
5.8 2.8 5.1 2.4 virginica
6.4 3.2 5.3 2.3 virginica
6.5 3 5.5 1.8 virginica
7.7 3.8 6.7 2.2 virginica
7.7 2.6 6.9 2.3 virginica
6 2.2 5 1.5 virginica
6.9 3.2 5.7 2.3 virginica
5.6 2.8 4.9 2 virginica
7.7 2.8 6.7 2 virginica
6.3 2.7 4.9 1.8 virginica
6.7 3.3 5.7 2.1 virginica
7.2 3.2 6 1.8 virginica
6.2 2.8 4.8 1.8 virginica
6.1 3 4.9 1.8 virginica
6.4 2.8 5.6 2.1 virginica
7.2 3 5.8 1.6 virginica
7.4 2.8 6.1 1.9 virginica
7.9 3.8 6.4 2 virginica
6.4 2.8 5.6 2.2 virginica
6.3 2.8 5.1 1.5 virginica
6.1 2.6 5.6 1.4 virginica
7.7 3 6.1 2.3 virginica
6.3 3.4 5.6 2.4 virginica
6.4 3.1 5.5 1.8 virginica
6 3 4.8 1.8 virginica
6.9 3.1 5.4 2.1 virginica
6.7 3.1 5.6 2.4 virginica
6.9 3.1 5.1 2.3 virginica
5.8 2.7 5.1 1.9 virginica
6.8 3.2 5.9 2.3 virginica
6.7 3.3 5.7 2.5 virginica
6.7 3 5.2 2.3 virginica
6.3 2.5 5 1.9 virginica
6.5 3 5.2 2 virginica
6.2 3.4 5.4 2.3 virginica
5.9 3 5.1 1.8 virginica
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment