D3 Examples - Mathilde

xxxxxxxxxx
 
<!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>
​
​
    