D3 Examples - D3 : Lecture 2

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
            var w = 800;
            var h = 600;
            var padding = 20;
            var x = 0;
            var y =0;
            var x_mean = 0;
            var y_mean =0;
            var term1 = 0            
            var term2 = 0
​
​
​
            d3.csv("iris.csv", function(data) {
              data.forEach(function(d) {
                d.sepal_length = +d.sepal_length;
                d.sepal_width  = +d.sepal_width;
                d.petal_length = +d.petal_length;
                d.petal_width = +d.petal_width;
                d.species = d.species;
              });
​
​
            var xScale = d3.scaleLinear()
                          .domain([d3.min(data,function(d) {return d.sepal_length;}), 
                                   d3.max(data,function(d) {return d.sepal_length;})])
                          .range([padding, w - padding]);
            var yScale = d3.scaleLinear()
                          .domain([d3.min(data,function(d) {return d.sepal_width;}), 
                                   d3.max(data,function(d) {return d.sepal_width;})])
                          .range([padding, h- padding]);
​
​
            var svg = d3.select('body').append('svg').attr('width',w).attr('height',h);
​
            svg.selectAll('.symbol')
               .data(data)
               .enter()
               .append('path')
               .attr('transform',function(d,i) { return 'translate('+( xScale(d.sepal_length))+','+ yScale(d.sepal_width)+')';})
               .attr('d', d3.symbol().type( function(d,i) { 
                if (d.species == "setosa")
                    {return d3.symbolCross}
                else if (d.species == "versicolor")
                    {return d3.symbolStar}
                else if (d.species == "virginica")
                    {return d3.symbolTriangle}
            })
            )
               .attr("fill",function(d) {
                if (d.species == "setosa")
                    {return "red"}
                else if (d.species == "versicolor")
                    {return "green"}
                else if (d.species == "virginica")
                    {return "blue"}
​
               })
               ;
​
            function linR (data){
​
                    var lr = {};
                    var n = data.length;
                    var mean_x1 = 0;
                    var mean_x2 = 0;
                    var mean_x3 = 0;
                    var mean_y1 = 0;
                    var mean_y2 = 0;
                    var mean_y3 = 0;
                    var Sx1=0;
                    var Sy1=0;
                    var Sxy1=0;
                    var Sx2=0;
                    var Sy2=0;
                    var Sxy2=0;
                    var Sx3=0;
                    var Sy3=0;
                    var Sxy3=0;
​
​
                    for (var i = 0; i < n; i++) {
                            x=data[i].sepal_length;
                            y=data[i].sepal_width;
                        if (data[i].species == "setosa")
                            {
                                mean_x1+=x/50
                                mean_y1+=y/50
                            }
                        else if (data[i].species == "versicolor")
                        {
                                mean_x2+=x/50
                                mean_y2+=y/50
                        }
                        else if (data[i].species == "virginica")
                        {
                                mean_x3+=x/50
                                mean_y3+=y/50
                        }
                    }
                    console.log(mean_x1) 
                    console.log(mean_y1)
​
                    for (var i = 0; i < n; i++) {
                        x=data[i].sepal_length;
                        y=data[i].sepal_width;
                        if (data[i].species == "setosa")
                            {
                            Sx1 += Math.pow(x-mean_x1,2);
                            Sy1 += Math.pow(y-mean_y1,2);
                            Sxy1+=(x-mean_x1)*(y-mean_y1)
                            }
                        else if (data[i].species == "versicolor")
                            {
                            Sx2 += Math.pow(x-mean_x2,2);
                            Sy2 += Math.pow(y-mean_y2,2);
                            Sxy2+=(x-mean_x2)*(y-mean_y2)
                            }
                        else if (data[i].species == "virginica")
                            {
                            Sx3 += Math.pow(x-mean_x3,2);
                            Sy3 += Math.pow(y-mean_y3,2);
                            Sxy3+=(x-mean_x2)*(y-mean_y2)
                            }
​
                    } 
​
                    lr['slope1'] = Sxy1/Sx1
                    lr['slope2'] = Sxy2/Sx2
                    lr['slope3'] = Sxy3/Sx3
                    lr['intercept1'] = mean_y1-lr.slope1*mean_x1
                    lr['intercept2'] = mean_y2-lr.slope2*mean_x2
                    lr['intercept3'] = mean_y3-lr.slope3*mean_x3
                    return lr;
​
            };
​
            var lr= linR(data)
            console.log(lr)
​
            xmin=d3.min(data,function(d) {return d.sepal_length;})
            xmax=d3.max(data,function(d) {return d.sepal_length;})
​
            var line1 = svg.append("line")
                                     .attr("x1",xScale(xmin))
                                     .attr("x2",xScale(xmax))
                                     .attr("y1",yScale(lr.intercept1 +(xmin)*lr.slope1  ))
                                     .attr("y2",yScale(lr.intercept1 + (xmax)*lr.slope1))
                                     .attr("stroke-width", 2)
                                     .attr("stroke", "red");
            var line2 = svg.append("line")
                                     .attr("x1",xScale(xmin))
                                     .attr("x2",xScale(xmax))
                                     .attr("y1",yScale(lr.intercept2 +(xmin)*lr.slope2  ))
                                     .attr("y2",yScale(lr.intercept2 + (xmax)*lr.slope2))
                                     .attr("stroke-width", 2)
                                     .attr("stroke", "green");
            var line3 = svg.append("line")
                                     .attr("x1",xScale(xmin))
                                     .attr("x2",xScale(xmax))
                                     .attr("y1",yScale(lr.intercept3 +(xmin)*lr.slope3  ))
                                     .attr("y2",yScale(lr.intercept3 + (xmax)*lr.slope3))
                                     .attr("stroke-width", 2)
                                     .attr("stroke", "blue");
​
​
            });
​
​
​
​
  </script>
</body>
​
    