D3 Examples - Iris dataset exercise

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>D3 Scatterplot with Regression Line</title>
<style>
.line {
    stroke: green;
    fill: none;
    stroke-width: 3;
}
​
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
​
.axis text {
    font-size: 10px;
    font-family: sans-serif;
}
​
.text-label {
    font-size: 10px;
    font-family: sans-serif;
}
​
.dot {
    stroke: #293b47;
    fill: #7A99AC
}
</style>
​
<body>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script>
    var margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 40
        },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
​
    var x = d3.scale.linear()
        .range([0, width]);
​
    var y = d3.scale.linear()
        .range([height, 0]);
​
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
​
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");
​
    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 + ")");
      
    var symbolTypes = {
    "triangleDown": d3.svg.symbol().type("triangle-down"),
    "circle": d3.svg.symbol().type("circle"),
    "square": d3.svg.symbol().type("square")
};
   
    d3.csv("iris.csv", function(data) {
    
    console.log(data);
      
    var dataline = create_data(data);
      
    console.log(dataline)
​
    data.forEach(function(d) {
        d.sepal_length = +d.sepal_length;
        d.sepal_width = +d.sepal_width;
    });
      
    dataline.forEach(function(d) {
        d.x = +d.x;
        d.y = +d.y;
        d.yhat = +d.yhat;
    });
​
    var line = d3.svg.line()
        .x(function(d) {
            return x(d.x);
        })
        .y(function(d) {
            return y(d.yhat);
        });
​
    x.domain(d3.extent(data, function(d) {
        return d.sepal_length;
    }));
    y.domain(d3.extent(data, function(d) {
        return d.sepal_width;
    }));
      
    x.domain(d3.extent(dataline, function(d) {
        return d.x;
    }));
    y.domain(d3.extent(dataline, function(d) {
        return d.y;
    }));
​
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .append("text")
        .attr("class", "label")
        .attr("x", width)
        .attr("y", -6)
        .style("text-anchor", "end")
        .text("Sepal Length");
​
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("class", "label")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Sepal Width")
​
    svg.selectAll(".dot")
        .data(data)
        .enter().append("path")
        .attr("class", "dot")
        .attr("r", 3.5)
        .attr("cx", function(d) {
            return x(d.sepal_length);
        })
        .attr("cy", function(d) {
            return y(d.sepal_width);
        })
            .attr("d", function(d,i){
            if (d.species === "virginica")
                return symbolTypes.circle();
            else if (d.species === "setosa")
                return symbolTypes.triangleDown();
                else
                return symbolTypes.square();
        })
            .attr("transform", function(d) { 
                return "translate(" 
              + x(d.sepal_length) 
              + "," 
              + y(d.sepal_width) + ")"; 
            })
            .style("fill", function(d,i){
            if (d.species !== "virginica"){
                if (d.species === "setosa")
                    return "red";
                else
                    return "yellow";
            }else{
                return "black";
            }
        });
​
    svg.append("path")
        .datum(dataline)
        .attr("class", "line")
        .attr("d", line);
​
​
    function create_data(data,nsamples) {
        var x = [];
        var y = [];
        var n = data.length;
        var x_mean = 0;
        var y_mean = 0;
        var term1 = 0;
        var term2 = 0;
      
        // create x and y values
        for (var iris in data) {
           x.push(parseInt(data[iris].sepal_length));
           y.push(parseInt(data[iris].sepal_width));
           x_mean += x[iris];
           y_mean += y[iris];
        }
        // calculate mean x and y
        x_mean /= n;
        y_mean /= n;
​
        // calculate coefficients
        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 dataline = [];
        for (i = 0; i < y.length; i++) {
            dataline.push({
                "yhat": yhat[i],
                "y": y[i],
                "x": x[i]
            })
        }
        return (dataline);
    }
    });
    </script>
</body>
    