Skip to content

Instantly share code, notes, and snippets.

@RaphAllier

RaphAllier/.block

Last active January 23, 2018 21:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RaphAllier/9cbc69d2ece912dfcf95eb2c34d8678b to your computer and use it in GitHub Desktop.
Save RaphAllier/9cbc69d2ece912dfcf95eb2c34d8678b to your computer and use it in GitHub Desktop.
Download ZIP
Iris Dataset Scatterplot
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scatterplot of Iris</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family : sans-serif;
font-size: 10px;
}
.label {
font-family: sans-serif;
font-size: 11px;
}
.title {
font-family : sans-serif;
font-size: 25px;
text-anchor: middle;
}
.line {
stroke: black;
fill: none;
stroke-width: 1;
stroke-dasharray: 10,5;
}
#tooltip {
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
}
</style>
</head>
<body>
<script type="text/javascript">
// Width and height definition
var w = 760;
var h = 400;
var symbolsize = 40;
// Margin setup
var margin = {top: 50, right: 30, bottom: 50, left: 100},
width = w - margin.left - margin.right,
height = h - margin.top - margin.bottom;
// Basic SVG canvas
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 + ")");
// g
var g = svg.append("g");
// Loading data
var iris;
d3.csv("iris.csv", function(data) {
iris = data;
// Scale definition
var x = d3.scaleLinear()
.domain([0,d3.max(iris,function(d,i) {return d.petal_length; })])
.range([0, width]);
var y = d3.scaleLinear()
.domain([0,d3.max(iris, function(d) {return d.petal_width; })])
.range([height,0]);
// Line definition for regression
var line = d3.line()
.x(function(d) { return x(d.x);})
.y(function(d) {return y(d.yreg);});
// Regression function
function create_regression(d){
var x_mean = 0;
var y_mean = 0;
var term1 = 0;
var term2 = 0;
var xr = 0;
var yr= 0;
// Compute mean
for (var i =0; i< d.length;i++){
x_mean += parseFloat(d[i].petal_length);
y_mean += parseFloat(d[i].petal_width);
}
x_mean /= d.length;
y_mean /= d.length;
// Compute coefficients
for (i=0; i<d.length;i++){
xr = parseFloat(d[i].petal_length) - x_mean;
yr = parseFloat(d[i].petal_width) - y_mean;
term1 += xr*yr;
term2 += xr*xr;
}
var b1 = term1/term2;
var b0 = y_mean - (b1*x_mean);
// Push regression coordinates
var yreg = [];
for (i=0;i<d.length;i++){
yreg.push(b0 + (parseFloat(d[i].petal_length)*b1));
}
// Creates Data for regression line
var regdata = [];
for (i=0;i<d.length;i++){
regdata.push({
"yreg":yreg[i],
"x":parseFloat(d[i].petal_length)
})
}
return (regdata)
}
// Regression creation
var reg = create_regression(iris);
svg.append("path")
.datum(reg)
.attr("class","line")
.attr("d",line);
// Generate axis
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
svg.append("g")
.attr("class","axis")
.call(yAxis);
svg.append("g")
.attr("class","axis")
.attr("transform", function(){return "translate(0,"+height+")";})
.call(xAxis);
// Axis names
svg.append("text")
.attr("class","label")
.attr("transform","rotate(-90)")
.attr("x","-55")
.attr("y","15")
.text("Petal width");
svg.append("text")
.attr("class","label")
.attr("x",width-50)
.attr("y",height-5)
.text("Petal length");
// Scatterplot title
svg.append("text")
.attr("class","title")
.attr("x",(w-margin.left)/2)
.attr("y",-margin.top/2)
.text("Iris dataset Scatterplot");
// Legend
var LegendSymbolSize = 120;
var GenLegendStar = d3.symbol()
.type(d3.symbolStar)
.size(LegendSymbolSize);
var GenLegendCross = d3.symbol()
.type(d3.symbolCross)
.size(LegendSymbolSize);
var GenLegendCircle = d3.symbol()
.type(d3.symbolCircle)
.size(LegendSymbolSize);
svg.append("rect")
.attr("x","50")
.attr("y","30")
.attr("width","200")
.attr("height","100")
.style("fill","white")
.style("stroke-width","1")
.style("stroke","black");
var legend = svg.append("g")
.attr("class","legend-symbol");
legend.append("path")
.attr("d",GenLegendCircle())
.attr("transform","translate(70,50)")
.style("fill","blue");
legend.append("path")
.attr("d",GenLegendStar())
.attr("transform","translate(70,80)")
.style("fill","green");
legend.append("path")
.attr("d",GenLegendCross())
.attr("transform","translate(70,110)")
.style("fill","red");
legend.append("text")
.attr("transform","translate(85,55)")
.text("Setosa");
legend.append("text")
.attr("transform","translate(85,85)")
.text("Versicolor");
legend.append("text")
.attr("transform","translate(85,115)")
.text("Virginica");
// Symbol Generation
/* Star, green : versicolor
Circle, blue : setosa
Cross, red : virginica*/
var GenerateStar = d3.symbol()
.type(d3.symbolStar)
.size(symbolsize);
var GenerateCircle = d3.symbol()
.type(d3.symbolCircle)
.size(symbolsize);
var GenerateCross= d3.symbol()
.type(d3.symbolCross)
.size(symbolsize);
// Symbol Creation for each value
svg.append("g")
.selectAll("path")
.data(iris)
.enter()
.append("path")
.attr("d", function(d) {
if (d.species == "setosa") {return GenerateCircle(); }
else if (d.species == "versicolor") {return GenerateStar();}
else {return GenerateCross();}
})
.attr("transform",function(d) {return "translate(" + x(d.petal_length) +","+y(d.petal_width)+")" ;})
.style("fill", function(d) {
if (d.species == "setosa") {return "blue"; }
else if (d.species == "versicolor") {return "green";}
else {return "red";}
})
.on("mouseover",function(d) {
d3.select(this).transition().duration(500).style("fill","black");
svg.selectAll("#tooltip").data([d]).enter().append("text")
.attr("id","tooltip")
.text(function(d){return "(" + d.petal_length +"," + d.petal_width + ") " +d.species ; })
.attr("x",function(d) {return x(d.petal_length);})
.attr("y",function(d) {return y(d.petal_width)-5;});
})
.on("mouseout",function(d){
d3.select(this).transition().duration(250).style("fill",function(d) {
if (d.species == "setosa") {return "blue"; }
else if (d.species == "versicolor") {return "green";}
else {return "red";}});
d3.select("#tooltip").remove();
})
});
</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