Skip to content

Instantly share code, notes, and snippets.

@hamzaECL

hamzaECL/.block

Last active February 16, 2018 21:39
Show Gist options
  • Save hamzaECL/c7e372d306b6dc6bf027291cd329cb40 to your computer and use it in GitHub Desktop.
Save hamzaECL/c7e372d306b6dc6bf027291cd329cb40 to your computer and use it in GitHub Desktop.
Download ZIP
scatterplot iris
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html encoding="utf-8">
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var margin = {
top: 30,
right: 30,
bottom: 40,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var 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 + ")");
d3.csv("iris.csv", function(data)
{
var xScale = d3.scale.linear().domain(d3.extent(data, function(d){return d.sepal_width;}))
.range([0, width]);
var yScale = d3.scale.linear().domain(d3.extent(data, function(d){return d.sepal_length;}))
.range([height, 0]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");
var symbol = d3.svg.symbol().size(50);
var x = data.map(function(d){return +d.sepal_width;});
var y = data.map(function(d){return +d.sepal_length;});
var x_mean = 0;
var y_mean = 0;
var term1 = 0;
var term2 = 0;
for (var i = 0; i < x.length; i++) {
x_mean += x[i]
y_mean += y[i]
}
// calculate mean x and y
x_mean /= x.length;
y_mean /= x.length;
var xr = 0;
var yr = 0;
for (i = 0; i < x.length; i++) {
xr = x[i] - x_mean;
yr = y[i] - y_mean;
term1 += xr * yr;
term2 += xr * xr;
}
var b1 = term1 / term2;
var b0 = y_mean - (b1 * x_mean);
// perform regression
var yhat = [];
// fit line using coeffs
for (i = 0; i < x.length; i++) {
yhat.push(b0 + (x[i] * b1));
}
var line = d3.svg.line()
.x(function(d, i) {
return xScale(x[i]);
})
.y(function(d, i) {
return yScale(yhat[i]);
});
svg.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("transform", function(d, i){return "translate("+xScale(x[i]) +","+ yScale(y[i]) + ")";})
.attr("d", function(d){
if(d.species === "setosa"){
return symbol.type("cross")();
}else{
if(d.species === "virginica"){
return symbol.type("diamond")();
}else{
return symbol.type("square")();
}
}
})
.attr("fill", function(d){
if(d.species === "setosa"){
return "rgb(30,144,255)";
}else{
if(d.species === "virginica"){
return "rgb(255,140,0)";
}else{
return "rgb(105,105,105)";
}
}
});
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line)
.style("stroke", "rgb(176,224,230)")
.style("stroke-width", "3")
;
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("sepal_width");
svg.append("g")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("sepal_length")
var labels = svg.append("g").attr("transorm", "translate(1000,900)")
var legend = svg.append("g")
legend.append("path")
.attr("transform", "translate(" + width + ", 0)")
.attr("d", symbol.type("cross")())
.style("fill", "rgb(30,144,255)")
legend.append("path")
.attr("transform", "translate(" + width + ", 20)")
.attr("d", symbol.type("square")())
.style("fill", "rgb(105,105,105)")
legend.append("path")
.attr("transform", "translate(" + width + ", 40)")
.attr("d", symbol.type("diamond")())
.style("fill", "rgb(255,140,0)")
legend.append("text")
.attr("transform", "translate(" + (width -55) + ", 5)")
.text("setosa")
.style("fill", "rgb(30,144,255)")
legend.append("text")
.attr("transform", "translate(" + (width - 80) + ", 24)")
.text("versicolor")
.style("fill", "rgb(105,105,105)")
legend.append("text")
.attr("transform", "translate(" + (width - 75) + ", 45)")
.text("virginica")
.style("fill", "rgb(255,140,0)")
var data_species = data.map(function(d){return d.species});
console.log(data_species)
});
</script>
</body>
</html>
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