D3 Examples - Iris Species with lin reg and mouseover

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial 2 D3</title>
  <style>
    .axis line, .axis path{
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
​
    .axis text{
        font-family: sans-serif;
        font-size: 10px;
    }
​
    .line {
        stroke: #000000;
        fill: none;
        stroke-width: 2;
}
  </style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        var dataset;
​
        var w = 900;
        var h = 500;
        var padding = 0;
​
        var margin = {top: 50, right: 180, bottom: 30, left: 50};
        var width = w - margin.right - margin.left;
        var height = h - margin.top - margin.bottom;
​
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h)
                    .append("g")
                    .attr("transform", "translate(" + margin.left +", " + margin.top + ")");
​
        d3.csv("iris.csv", function(data){
            dataset = data;
            //console.log(dataset);
​
            var xScale = d3.scaleLinear()
                            .domain([0, d3.max(dataset, function(d){ return d.petal_length; })])
                            .range([0, width]);
            var yScale = d3.scaleLinear()
                            .domain([0, d3.max(dataset, function(d){ return d.petal_width; })])
                            .range([height, 0]);
​
            var xAxis = d3.axisBottom(xScale);
            var yAxis = d3.axisLeft(yScale);
​
​
            svg.append("g")
                .attr("class", "axis")
                .call(yAxis);
​
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0, " + height + ")")
                .call(xAxis);
​
            var path = svg.selectAll("path")
                .data(dataset)
                .enter()
                .append("path")
​
            var color = d3.scaleOrdinal(d3.schemeCategory10);
​
            // Pour l'affichage des coordonnees au survol des points
            var g = svg.append("g")
                        .attr("transform", "translate(10, 0)");
                
            path.attr("transform", function(d) { return "translate(" + xScale(d.petal_length) + ", " + yScale(d.petal_width) + ")"; })
                .attr("d", d3.symbol()
                                .type(function(d){
                                    if (d.species == 'setosa'){
                                        return d3.symbolCircle;
                                    }
                                    else if (d.species == 'versicolor') {
                                        return d3.symbolCross;
                                    }
                                    else if (d.species == 'virginica') {
                                        return d3.symbolDiamond;
                                    }
                                    else {
                                        return d3.symbolSquare;
                                    }
                                }))
                .style("fill", function(d){ return color(d.species); })
                .on("mouseover", function(d){
                    g.selectAll("#tooltip").data([d]).enter().append("text")
                        .attr("id", "tooltip")
                        .text(function(d){ return 'x = ' + d.petal_length + ' | y = ' + d.petal_width; })
                        .attr("x", function(d){ return d.petal_length; })
                        .attr("y", function(d){ return d.petal_width; })
                        .attr("transform", function(d){ return 'translate(' + xScale(d.petal_length) + ', ' + yScale(d.petal_width) + ')'; });
                })
                .on("mouseout", function(d){
                    g.selectAll("#tooltip").remove();
                });
​
            // Regression lineaire
​
            // Moyennes petal_length et petal_width
            var x_mean = d3.mean(dataset, function(d){ return d.petal_length; });
            var y_mean = d3.mean(dataset, function(d){ return d.petal_width; });
​
            // Coefficients
            
            var xr = 0;
            var yr = 0;
            var term1 = 0;
            var term2 = 0;
            for (var i=0; i< dataset.length; i++){
                xr = parseFloat(dataset[i].petal_length) - x_mean;
                yr = parseFloat(dataset[i].petal_width) - y_mean;
                term1 += xr * yr;
                term2 += xr * xr;
                }
​
            var b1 = term1 / term2;
            var b0 = y_mean - (b1 * x_mean);
​
            for (i=0; i< dataset.length; i++){
                dataset[i].lin_reg_term = b0 + (dataset[i].petal_length * b1); 
                }
​
            // Trace la droite
            var line = d3.line()
                .x(function(d){ return xScale(d.petal_length); })
                .y(function(d){ return yScale(d.lin_reg_term); });
​
            svg.append("path")
                .datum(dataset)
                .attr("class", "line")
                .attr("d", line);
​
            // Ajout de l'equation
            document.getElementById("equation").innerHTML = "y = " + b0 + ' + ' + b1 + "x" ;
​
            // Legende
​
            var legendRectSize = 18;
            var legendSpacing = 4;
​
            var legend = svg.selectAll('.legend')
              .data(['setosa', 'versicolor', 'virginica'])
              .enter()
              .append('g')
              .attr('class', 'legend')
              .attr('transform', function(d, i){
                var horizontal_offset = 2 * legendRectSize ;
                var vertical_offset = i * (legendRectSize + legendSpacing) - (legendRectSize + legendSpacing)/ 3 / 2;
                return 'translate(' + horizontal_offset + ', ' + vertical_offset + ')';
              });
​
            legend.append('rect')
                .attr('width', legendRectSize)
                .attr('height', legendRectSize)
                .style('fill', color)
                .style('stroke', color);
​
            legend.append('text')
                .attr('x', legendRectSize + legendSpacing)
                .attr('y', legendRectSize - legendSpacing)
                .text(function(d) { return d; });
​
        });
​
    </script>
    <div id="equation"></div>
</body>
</html>
    