Skip to content

Instantly share code, notes, and snippets.

@kabooboo

kabooboo/.block

Last active January 26, 2018 13:28
Show Gist options
  • Save kabooboo/55534577460add797d4323507cbfc633 to your computer and use it in GitHub Desktop.
Save kabooboo/55534577460add797d4323507cbfc633 to your computer and use it in GitHub Desktop.
Download ZIP
DM Cours 2 scatterplot iris fork cours 3
Raw
.block
license: mit
Raw
index.html
<!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>
Raw
iris.csv
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