D3 Examples - Scatterplot of iris.csv

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; }
    .axis path,
        .axis line {
    fill: none;
    stroke: rgb(251,230,146);
    shape-rendering: crispEdges;
        }
    
    .axis text {
      fill : rgb(251,230,146)
    }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var dataset;
    
    d3.csv("iris.csv", function(err, data){
      
      if (err){
        console.log("ERREUR !");
      } else {
        console.log("données chargées");
      }
      
      dataset = data;
      width = 700;
      height = 500;
      var svg = d3.select("body")
                  .append("svg")
                  .attr("width", width)
                            .attr("height",height)
                            .style("background", "rgb(0,0,60)")
                            .attr("transform","translate(125,0)");
​
      var circles = svg.selectAll("circle")
                                    .data(dataset)
                                    .enter()
                                    .append("circle");
      padding=30;      
      var xscale = d3.scaleLinear()
                                            .domain([0, d3.max(dataset, function(d){
                                                                                    return d.petal_width})])
                                            .range([0+padding,width-padding]);
      
      var yscale = d3.scaleLinear() 
                                            .domain([0, d3.max(dataset, function(d){
                                                                                    return d.petal_length})])
                                            .range([height-padding,0+padding]);
      
​
      circles.attr("cx", function(d){ return xscale(d.petal_width) })
                    .attr("cy",function(d){ return yscale(d.petal_length)})
                    .attr("r",5)
                    .attr("fill", function(d){
                                if (d.species=="setosa"){
                      return "rgba(45,164,254,0.5)"
                    } else if (d.species=="versicolor") {
                      return "rgba(55,225,39,0.5)"
                    } else if (d.species=="virginica") {
                      return "rgb(255,50,50)"
                    }})
                    .attr("stroke", "white")
                    .attr("stroke-width","1")
                    .on("mouseenter", function(d) { 
                            d3.select(this).attr("stroke-width","5");
                            svg.append("rect")
                            .attr("class","provisoire")
                            .attr("x",xscale(d.petal_width)+10)
                                        .attr("y",yscale(d.petal_length)-15)
                            .attr("width",60)
                            .attr("height",20)
                            .style("fill","rgba(0,0,60,0.5)");
                            svg.append("text")
                            .attr("class","provisoire")
                            .attr("x",xscale(d.petal_width)+10)
                                        .attr("y",yscale(d.petal_length))
                                        .text("("+d.petal_width+", "+d.petal_length+")")
                                        .style("fill","white")
                            .style("font-family", "arial");
                            })
                    .on("mouseleave", function(d) { 
                            d3.select(this)
                        .transition().duration(300).attr("stroke-width","1");
                            svg.selectAll(".provisoire").remove();})
                    ;
                    
                    //.attr("data-legend", function(d){ return d.species });
      
      var xAxis = d3.axisBottom(xscale);
      var yAxis = d3.axisLeft(yscale);
      
      svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0, "+ (height-padding) + ")")
            .call(xAxis);
      svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate("+ padding + ",0)")
            .call(yAxis);
            
      var datax;
      var datay;
      
      dataset.forEach(function(d) {
        datax = +d.petal_width;
        datay = +d.petal_length;
      })
      
      var term1;
      var term2; 
      
      dataset.forEach(function(d){
        // calculate mean x and y
        x_mean = datax/dataset.length;
        y_mean = datay/dataset.length;
​
        // calculate coefficients
        var xr = 0;
        var yr = 0;
        xr = d.petal_width - x_mean;
        yr = d.petal_length - y_mean;
        term1 += xr * yr;
        term2 += xr * xr;
​
        })
      
        var b1 = term1 / term2;
        var b0 = y_mean - (b1 * x_mean);
        // perform regression 
​
        yhat = [];
        dataset.forEach(function(d){
            yhat.push(b0 + (d.petal_width * b1));
        })
      
      
      /*legend = svg.append("g")
                .attr("class","legend")
                .attr("transform","translate(50,30)")
                .style("font-size","12px")
                .call(d3.legend);*/
      var line = d3.line()
        .x(function(d) {
            return xscale(datax);
        })
        .y(function(d) {
            return yscale(yhat);
        });
       svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
      
    })
​
  </script>
</body>
​
    