Skip to content

Instantly share code, notes, and snippets.

@MathReynaud

MathReynaud/.block

Created January 21, 2018 20:57
Show Gist options
  • Save MathReynaud/6249184375240531991b1e3f8c5fdd7f to your computer and use it in GitHub Desktop.
Save MathReynaud/6249184375240531991b1e3f8c5fdd7f to your computer and use it in GitHub Desktop.
Download ZIP
Mathilde_Reynaud
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Drawing with iris data</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
var margin = {
top: 20,
right: 20,
bottom: 50,
left: 70
};
var w = 1000 - margin.left - margin.right ;
var h = 500 - margin.top - margin.bottom;
//Upload Data
var dataset;
d3.csv("iris3.csv", function(data) {
dataset = data;
data.forEach( function(d){ d["sepallength"] = +d["sepallength"]; });
data.forEach( function(d){ d["sepalwidth"] = +d["sepalwidth"]; });
//Create scale functions
var xScale = d3.scaleLinear()
.domain([d3.min(dataset, function(d) { return d["sepallength"]; }), d3.max(dataset, function(d) { return d["sepallength"]; })])
.range([0, w]);
var yScale = d3.scaleLinear()
.domain([d3.min(dataset, function(d) { return d["sepalwidth"]; }), d3.max(dataset, function(d) { return d["sepalwidth"]; })])
.range([h, 0]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w + margin.left + margin.right )
.attr("height", h + margin.top + margin.bottom )
.append("g")
// moves the 'group' element to the top left margin
svg.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//Add the points
svg.selectAll(".point")
.data(dataset)
.enter()
.append("path")
.attr("class", "point")
.attr("d", d3.symbol().type( function(d) {
if (d["species"] == "setosa")
{return d3.symbolTriangle}
else if (d["species"] == "virginica")
{ return d3.symbolCross}
else { return d3.symbolStar }
;}))
.attr("fill", function(d) {
if (d["species"] == "setosa")
{return "red"}
else if (d["species"] == "virginica")
{ return "orange"}
else { return "blue" }
;})
.attr("transform", function(d) { return "translate(" + xScale(d["sepallength"]) + "," + yScale(d["sepalwidth"]) + ")"; });
// Add the x Axis
svg.append("g")
.attr("transform", "translate(0," + h + ")")
.call(d3.axisBottom(xScale));
// text label for the x axis
svg.append("text")
.attr("transform",
"translate(" + (w/2) + " ," +
(h + margin.top + 20 ) + ")")
.style("text-anchor", "middle")
.text("Sepal Lenght ");
// Add the y Axis
svg.append("g")
.call(d3.axisLeft(yScale));
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (h / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Sepal Widht");
//Limits of the domain
xmin = d3.min(dataset, function(d) { return d["sepallength"]; });
xmax = d3.max(dataset, function(d) { return d["sepallength"]; });
// Regression for Setosa
var XaxisDataS = [];
var YaxisDataS = [];
dataset.forEach( function(d) {
if (d["species"] == "setosa")
{ XaxisDataS.push(d["sepallength"])
YaxisDataS.push(d["sepalwidth"])
};
});
regressionS = leastSquaresequation(XaxisDataS,YaxisDataS);
svg.append("line")
.style("stroke", "red")
.attr("x1", xScale(xmin) )
.attr("y1" , yScale(regressionS(xmin)))
.attr("x2", xScale(xmax) )
.attr("y2", yScale(regressionS(xmax)));
//Regression for Virginica
var XaxisDataV = [];
var YaxisDataV = [];
dataset.forEach( function(d) {
if (d["species"] == "virginica")
{ XaxisDataV.push(d["sepallength"])
YaxisDataV.push(d["sepalwidth"])
};
});
regressionV = leastSquaresequation(XaxisDataV,YaxisDataV);
svg.append("line")
.style("stroke", "orange")
.attr("x1", xScale(xmin) )
.attr("y1" , yScale(regressionV(xmin)))
.attr("x2", xScale(xmax) )
.attr("y2", yScale(regressionV(xmax)));
//Regression for Versicolor
var XaxisDataC = [];
var YaxisDataC = [];
dataset.forEach( function(d) {
if (d["species"] == "versicolor")
{ XaxisDataC.push(d["sepallength"])
YaxisDataC.push(d["sepalwidth"])
};
});
regressionC = leastSquaresequation(XaxisDataC,YaxisDataC);
svg.append("line")
.style("stroke", "blue")
.attr("x1", xScale(xmin) )
.attr("y1" , yScale(regressionC(xmin)))
.attr("x2", xScale(xmax) )
.attr("y2", yScale(regressionC(xmax)));
});
function leastSquaresequation(XaxisData, YaxisData) {
var ReduceAddition = function(prev, cur) { return prev + cur; };
//console.log(XaxisData)
//console.log(YaxisData)
// finding the mean of Xaxis and Yaxis data
var xBar = XaxisData.reduce(ReduceAddition) * 1.0 / XaxisData.length;
var yBar = YaxisData.reduce(ReduceAddition) * 1.0 / YaxisData.length;
console.log(XaxisData.reduce(ReduceAddition))
var SquareXX = XaxisData.map(function(d) { return Math.pow(d - xBar, 2); })
.reduce(ReduceAddition);
var ssYY = YaxisData.map(function(d) { return Math.pow(d - yBar, 2); })
.reduce(ReduceAddition);
var MeanDiffXY = XaxisData.map(function(d, i) { return (d - xBar) * (YaxisData[i] - yBar); })
.reduce(ReduceAddition);
var slope = MeanDiffXY / SquareXX;
var intercept = yBar - (xBar * slope);
// returning regression function
return function(x){
return x*slope+intercept
}
}
</script>
</body>
Raw
iris3.csv
sepallength sepalwidth petallength petalwidth 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