D3 Examples - Travail maison

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      margin:30;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0; 
    }
  </style>
</head>
​
<body>
  <script>
          var colors = ["blue", "lightblue", "pink"];
      var margin = {
                top: 20,
                    bottom: 60,
                    left: 60,
                right: 20
                        };
    
            var width = 960 - margin.left - margin.right ;
            var heigth = 500 - margin.top - margin.bottom;
​
            //Loading the attributes dataset from the CSV file
            var dataset;
​
            d3.csv("iris.csv", function(data) {
                dataset = data;
                data.forEach( function(d){ d["sepal_length"] = +d["sepal_length"]; });
                data.forEach( function(d){ d["sepal_width"] = +d["sepal_width"]; });  
​
            //Create scale functions for the two axis
            var xScale = d3.scaleLinear()
                                 .domain([d3.min(dataset, function(d) { return d["sepal_length"]; }), d3.max(dataset, function(d) { return d["sepal_length"]; })])
                                 .range([0, width]);
​
            var yScale = d3.scaleLinear()
                                 .domain([d3.min(dataset, function(d) { return d["sepal_width"]; }), d3.max(dataset, function(d) { return d["sepal_width"]; })])
                                 .range([heigth, 0]);
        
      //Create the SVG parent element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", width + margin.left + margin.right )
                        .attr("height", heigth + margin.top + margin.bottom )
                        .append("g")
​
            //We center the group element to leave space on the sides
      svg.attr("transform",
                "translate(" + (margin.left) + "," + (margin.top) + ")");
​
            //We add all the points to the svg parent
            svg.selectAll(".point")
               .data(dataset)
               .enter()
               .append("path")
               .attr("class", "point")
               .attr("d", d3.symbol().type( function(d) {
            if (d["species"] == "virginica") 
                {return d3.symbolCircle}
            else  if (d["species"] == "setosa")
                { return d3.symbolDiamond}
            else { return d3.symbolStar }
                ;}))
               .attr("fill", function(d) {
            if (d["species"] == "setosa") 
                {return "lightblue"}
            else  if (d["species"] == "virginica")
                { return "blue"}
            else { return "pink" }
                ;})
               .attr("transform", function(d) { return "translate(" + xScale(d["sepal_length"]) + "," + yScale(d["sepal_width"]) + ")"; });
​
      //Add the x Axis and its label
        svg.append("g")
                .attr("transform", "translate(0," + heigth + ")")
                .call(d3.axisBottom(xScale));
​
        svg.append("text")             
                .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (heigth + margin.top + 20 ) + ")")
                .style("text-anchor", "middle")
                .text("Sepal Length");
​
        // Add the y Axis
        svg.append("g")
                .call(d3.axisLeft(yScale));
        
            svg.append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 0 - margin.left)
                .attr("x",0 - (heigth / 2))
                .attr("dy", "1.5em")
                .style("text-anchor", "middle")
                .text("Sepal Width");
        
   
      
​
      //Calcul des limites du domaine
      xmin = d3.min(dataset, function(d) { return d["sepal_length"]; });
      xmax = d3.max(dataset, function(d) { return d["sepal_length"]; });
            
        
      //Regression for Virginica species
      var x_datas_virgin = []; 
      var y_datas_virgin = [];
      dataset.forEach( function(d) {
            if (d["species"] == "virginica")
                { x_datas_virgin.push(d["sepal_length"])
                    y_datas_virgin.push(d["sepal_width"])
                            };
                });
​
      regression_virginica = leastSquaresEquation(x_datas_virgin,y_datas_virgin);
​
            svg.append("line")
                .style("stroke", "blue")
                .attr("x1", xScale(xmin) )
                .attr("y1" , yScale(regression_virginica(xmin)))
                .attr("x2", xScale(xmax) )
                .attr("y2", yScale(regression_virginica(xmax)));
        
        
            //Regression for Setosa species
      var x_datas_setosa = []; 
      var y_datas_setosa = [];
      dataset.forEach( function(d) {
            if (d["species"] == "setosa")
                        { x_datas_setosa.push(d["sepal_length"])
                          y_datas_setosa.push(d["sepal_width"])
                            };
                });
​
            regression_setosa = leastSquaresEquation(x_datas_setosa,y_datas_setosa);
​
            svg.append("line")
                .style("stroke", "lightblue")
                .attr("x1", xScale(xmin) )
                .attr("y1" , yScale(regression_setosa(xmin)))
                .attr("x2", xScale(xmax) )
                .attr("y2", yScale(regression_setosa(xmax)));
​
​
            //Regression for Versicolor species
      var x_datas_versi = []; 
      var y_datas_versi = [];
      dataset.forEach( function(d) {
            if (d["species"] == "versicolor")
                        { x_datas_versi.push(d["sepal_length"])
                          y_datas_versi.push(d["sepal_width"])
                            };
                });
​
            regression_versi = leastSquaresEquation(x_datas_versi,y_datas_versi);
​
            svg.append("line")
                .style("stroke", "pink")
                .attr("x1", xScale(xmin) )
                .attr("y1" , yScale(regression_versi(xmin)))
                .attr("x2", xScale(xmax) )
                .attr("y2", yScale(regression_versi(xmax)));
​
             });
    
 
    
    function leastSquaresEquation(x_datas, y_datas) {
      
                var ReduceAddition = function(prev, cur) { return prev + cur; };
    
                //We find the means of x and y datas
      
                var x_mean = x_datas.reduce(ReduceAddition) * 1.0 / x_datas.length;
                var y_mean = y_datas.reduce(ReduceAddition) * 1.0 / y_datas.length;
​
                var SquareXX = x_datas.map(function(d) { return Math.pow(d - x_mean, 2); })
                    .reduce(ReduceAddition);
        
                var ssYY = y_datas.map(function(d) { return Math.pow(d - y_mean, 2); })
                    .reduce(ReduceAddition);
          
                var MeanDiffXY = x_datas.map(function(d, i) { return (d - x_mean) * (y_datas[i] - y_mean); })
                    .reduce(ReduceAddition);
​
                var slope = MeanDiffXY / SquareXX;
                var intercept = y_mean - (x_mean * slope);
        
                // returning regression function
                return function(x){
                return x*slope+intercept
                }
​
   }   
    
​
​
  
  
  </script>
</body>
​
​
​
    